refactor(chrome-ext): drop jquery dependency

[Ingramz]

Issues

N/A

Description

This pull request removes jQuery from the browser extension content script in favor of native document.querySelectorAll.

Demo

N/A

How Has This Been Tested?

Working from a Windows environment, I was unable to build the browser extension successfully.

Manually tested the Firefox extension built by the CI in this pull request and the selectors appear to be all selecting just fine.

Checklist

• I have performed a self-review of my own code
• I have added tests to cover my changes

[Ingramz]

Drafting this for now, realized :visible is being used which is jq only selector.

[Ingramz]

I believe the changes should be now ready to review. Currently writing this message with the Firefox extension enabled and it is working just fine. I also verified with a debugger that the query selectors trigger appropriately.

[Ingramz]

This might still be incorrect.

<textarea> that is below the fold on a static page will be skipped over if it will not appear in the viewport within the first second.

A more compatible replacement could be https://youmightnotneedjquery.com/#is_visible

[elijah-potter]

For the most part, this looks good to me. The visibility check might be technically different, but I think it's close enough that it won't cause a problem.

For posterity, could you fully explain your reasoning for removing JQuery?

[Ingramz]

For the most part, this looks good to me. The visibility check might be technically different, but I think it's close enough that it won't cause a problem.

Easy way to see it for yourself is if you have a plain html file with enough <br> before <textarea> that it gets rendered outside your viewport on page load. On websites with more interactivity this gets masked as MutationObserver will most likely fire due to textarea having some focus listener to change its appearance or the page having a scroll listener, which causes the scan to trigger again.

The replacement I linked turns out to be lifted from actual jQuery source, so one should not be discouraged from using it if the current isVisible check turns out to be problematic in practical use. Having two different isVisible checks in a single file however may get confusing, but that's a different problem.

For posterity, could you fully explain your reasoning for removing JQuery?

To me it feels just the wrong tool for the job in this particular instance. It's a pretty big library (~30% of shipped JS) for doing 4 selectors that gets loaded on every page load. The problem isn't that it is necessarily jQuery, it's just that it's massively underutilized. Using it more however does not make it a better tool as modern web has alternatives in vanilla JS to most of the common jQuery patterns.

My main concern is how this ties to how it's used in the extension. As it is part of content script, then my understanding is that every time a new tab is opened or a page is loaded, this will incur loading another instance of jQuery into memory. As it is right now, this overhead can be easily avoided, leading to a better browsing experience - either pages loading/becoming responsive faster, making battery last longer or being able to keep open more tabs at a time. I do admit, the gains from this may turn out to be insignificant, but they are gains nonetheless.

[elijah-potter]

I absolutely agree with all of your points. I think this PR is in a good enough state to be merged. I'll monitor for any issues before running a release.

[elijah-potter]

Thanks for helping out!