1

I was trying to make a Chrome extension that lets me highlight parts of a webpage and then store these highlights in browser storage. These highlights should be available when I revisit the page.

I wrote a function that takes in the selection object as an argument and highlights it on the webpage.

The function signature looks something like this

function highlighter ( anchorNode, focusNode, commonAncestorContainer , focusOffset, anchorOffset)

I tried cloning the selection object and storing it, only to realize later that any changes made using the stored selection object wont obviously reflect back in the DOM

Is There a better way to do this (like storing path to the node?)

prateek
  • 305
  • 3
  • 8
  • DOM elements can't be stored so indeed you'll have to calculate and store the path. – wOxxOm May 21 '20 at 04:17
  • @wOxxOm I was thinking of traversing from the target node up to documentElement and storing indices of childNodes in path, something like this `Array.prototype.indexOf.call(node.parentNode.childNodes,node)` , is there a faster/better way? – prateek May 21 '20 at 10:35
  • You can build a selector: example [one](https://stackoverflow.com/questions/8588301/how-to-generate-unique-css-selector-for-dom-element) and [two](https://stackoverflow.com/questions/4588119/get-elements-css-selector-when-it-doesnt-have-an-id/29318219). – wOxxOm May 21 '20 at 10:44

0 Answers0