New Approach to Avoid inline DOM modifications?

[karlhorky]

It seems like the major problems caused by this extension come from the inline DOM modifications. Maybe it would be possible to achieve the highlighting in a different way?

Eg. two ideas that come to mind:

1. Create an absolutely positioned container somewhere else in the DOM where it will have the minimum impact (for example, at the end of the page) - this could hold all of the highlighter elements
2. Use a single canvas element to paint highlights over the necessary areas

Maybe this would also increase performance...

[neaumusic]

this is a really cool idea

[karlhorky]

Here's some inspiration for implementation using canvas from the React DevTools

https://github.com/facebook/react/pull/16989

[neaumusic]

yea this is a cool idea, and because I get the coordinates for the scroll markers anyways, this shouldnt affect performance too much, I'd need to really make sure the coordinates are correct though

[karlhorky]

@neaumusic just reading about the new CSS Highlight API, and this sounds much simpler!

https://css-tricks.com/css-custom-highlight-api-early-loo/

Just need to wait a few releases until it's available unflagged in browsers!

[neaumusic]

awesome @karlhorky thank you so much for this 🙌

yea it looks like that will be the future for this extension, thank you so much https://www.w3.org/TR/css-highlight-api-1/#highlight-registry

looks like you can just set a range

do you know of any way to know when this API will be available?

[karlhorky]

I guess some status is tracked on Chrome Platform Status here:

https://chromestatus.com/feature/5436441440026624

There's also an issue to track inclusion on caniuse here:

https://github.com/Fyrd/caniuse/issues/6147

[aderchox]

I am having a weird weird issue with this extension and I'm not sure yet if I should open a new issue. But I'm going to say it here first. I used React and Redux and created a simple Todo app, then when I entered three todos (say, aaaa, bbbb, cccc) and then deleted "bbbb", what remained on the page was weirdly "aaaa" and "bbbb"! (instead of "aaaa" and "cccc"). So I tried many things in my code and I realized everything was fine with my code, both console.log and Redux DevTools showed I have correct data ("aaaa" and "cccc"), but just what I saw was wrong. I was really confused, so I tried other browsers and I saw this problem didn't exist on those browsers! I then tried Google Chrome's Incognito mode and again this issue didn't exist there either! So I realized it was an extension that was causing this... I disabled different extensions and finally found the one that was causing that issue (this extension, i.e., selection highlighter). Honestly I cannot live without this extension... 😏 so any chances you might consider a fix? I know the information I've given here is not enough for debugging the case, so I can share the project too if you want to check yourself.

[neaumusic]

@aderchox interesting, yea I can definitely help debug but I'd open another issue with the repro steps so I can look into it, I've seen this with YouTube but I thought it was an angular thing / just incorrect DOM selection on their part

[neaumusic]

This should be good to go, submitted to store for review (v3.0.0)

ec44dbf

[neaumusic]

Thanks so much btw @karlhorky, I would never have known about the API, and it's still experimental, but works great

[karlhorky]

Great job, new version works well! Completely got rid of the jank, especially important in DOM-sensitive apps like ChatGPT.

I created a Greasemonkey / Tampermonkey / Violentmonkey userscript based on the new version (converted the TypeScript to JSDoc, inlined everything into 1 file, fixed any errors):

https://github.com/karlhorky/userscripts/blob/main/highlight-all-occurrences-of-selected-text.user.js