[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
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
Medium Priority
?
101 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 2000 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 59

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

649 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