Genius way to attach style/button/icon to specific text within an element without using span tag? (for Chrome extension)
Posted on 2016-10-09
We're working on a chrome extension that needs to scan webpage content, compare it to a predefined list of strings, and then label any matches both visually and with some sort of interactive element (button, clickable icon, etc.).
For example, with a predefined list of different kinds of fruit, if the webpage loaded includes the phrases "an apple a day..." and "orange is the new black", both "apple" and "orange" are identified and somehow clickable. Ideally, it would be a clickable icon next to the word, but I'd be satisifed with ANY way to visually identify it and make it clickable. We've got the scan and, compare parts down, but we're having a heck of a time finding a way to reliably label them.
The obvious solution would be to wrap any matched text in span tags and use CSS to label and JS to click. However, this solution causes problems when the matched text is within certain types of elements like an editable field with an autosave feature. We wrap a span around "apple" and it ends up going into the database w/ span tags - not good.
But without isolating the specific text as its own element, we can't apply CSS to it specifically. For example, if "apple" was included within a long paragraph (p tag), the CSS has to be applied to the whole paragraph.
After way too many hours of contemplation, research, and experimentation, I'm still stumped. The winning idea so far is to wrap the text in span tags, find the position of those tags, remove the span tags, and then insert a div tag at that position w/ a higher z-index. I admit I haven't actually tried it yet, but I'm anticipating at least major issues w/ resizing using this technique.
I'm hoping there's a genius out there that has a better way. Any ideas?