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
59 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 52

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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…

920 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

17 Experts available now in Live!

Get 1:1 Help Now