Question

I develop chrome extension and I need to get a word of any web page when mouse is over this word.
I don’t want to put all words to specific containers and then get it by id.
For example, if I have <p>The weather is very good today</p> I want to make mouse over the word “very” and get it in my js (for example, alert('very')).

Answer 1

I’d like to show you a proof of concept for this feature. It’s very naive and weak but shows that it’s possible with an appropriate regex. Basically, hover the green-bordered div to see the results.

With this approach, each paragraph is split into spanned chunks with a regex. The more powerful regex, the better result, of course. Then, onmousemove is bubbling, being triggered by a span. Reading a content of the span is a piece of cake.

This method is very intrusive, by modifying DOM structure, which you probably don’t want to touch. It works in plain JS though. The more advanced (still easy) approach would be as follows:

1. Don’t touch any paragraph.
2. Observe onmousemove to find the paragraph under the mouse.
3. Save clientX and clientY.
4. Copy the paragraph, make it transparent and position: absolute.
5. Do the spanify() thing on a copy.
6. Use document.elementFromPoint to find which span is being hovered. Use saved (3.) clientX and clientY shifted by the position of the copy (left, top).
7. You’ve got the span. You’ve got its content.
8. Remove paragraph copy from DOM.

This hack still works in plain JS. Happy coding! 😉