Solved

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
3
49 Views
Last Modified: 2016-10-14
Hi,

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?
0
Comment
Question by:cotton9
  • 2
3 Comments
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41836473
If you are tagging pages you control you can class the <span> and remove them on the server side.

If you are tagging all sites then that won't work.

The only other option I can think of is positioned elements. You would need to find the screen co-ords of the word, then check the parent for the font size and family style - create a new child of <body> with the top, left and font attributes added - you can add a class to give general styling for the link etc.

Tricky bit is going to be finding the screen coords of the text.

You would also would need to catch a screen resize to reposition text if the screen changes.

I don't think this is a viable solution as by decoupling your styling from the actual element any in page operations that might change the layout will result in the overlays not aligning any more.

That leaves enclosing in a <span> which is probably the way to go. What you would need to do is capture form submits and "clean" the data before it is sent on. Not sure what you would do with AJAX submissions though - might be a solution there but not sure off the top of my head.
0
 

Author Comment

by:cotton9
ID: 41837721
Thanks Julian,

Although I'd love a great solution (and still hoping for one), I admit I'm a little relieved that I wasn't missing something obvious.  

The chrome extension needs to work w/ public sites, so we won't have control of the pages served.  I wasn't sure if that span creation/removal trick would work, but it makes sense that it would have to occur server-side.   And I had the feeling resizing would screw up positioned divs/overlays.

If a genius solution doesn't present itself, we may end up using span where we can and pseudoelement overlays at the parent element level where span can't work.  Not ideal, but not horrible either.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41838160
If I understand the problem correctly - normal document markup is fine - it is just markup inside forms / elements that are going to be sent back to the server? Is that through an AJAX request - might be an option to sub class the open method on the XHTTPRequest and "clean" anything being sent back - have not tried it - there may be some specific issues with older browsers - but it is a strategy we use in Angular quite a bit - specifically with authentication with JWT's
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
can't display bootstrap glyphs in select menu 4 17
razorCMS: Change Menu Font 4 27
HTML CSS 7 20
Problem to page 4 29
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now