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
65 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 54

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 54

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

803 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