Update to Manifest V3

[lydell]

Summary:

• I don’t use Chrome very much myself.
• Manifest V2 extensions will continue working in Firefox.
• I don’t have super much time to work on Link Hints.
• But I have a plan and I do want to upgrade to Manifest V3 eventually, so Link Hints works on Chrome again.
• React with a 👍 on this post to show that you would like to see Manifest V3 support, that motivates me!

---

Manifest V2 extensions won’t run in Chrome in some time in 2024.

https://developer.chrome.com/docs/extensions/mv3/mv2-sunset/

According to https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/manifest_version no browser except Chrome supports V3. Not sure what one’s supposed to do. Update: Firefox 109 supports v3.

This article gives some clues: https://discourse.mozilla.org/t/when-will-web-ext-support-manifest-v3/91514/5. Sounds boring.

Found a checklist: https://developer.chrome.com/docs/extensions/mv3/mv3-migration-checklist/

Might be able to piggy-back on learnings from refined-github/refined-github#5531

web-ext now has --firefox-preview for trying experimental manifest v3 support: https://github.com/mozilla/web-ext/releases/tag/7.1.0

Update: Newer blog post from Mozilla: https://blog.mozilla.org/addons/2022/10/31/begin-your-mv3-migration-by-implementing-new-features-today/

[lydell]

Chrome now shows this:

I don’t use Chrome regularly myself, and as is evident in this issue tracker I don’t have much time for Link Hints, so unfortunately Link Hints might stop working for Chrome soon :(

It should be possible to convert to manifest version 3 though, it’s mostly a question about time. (Time investigating how to adapt Link Hints, and doing the actual work.)

[lydell]

I have now began work on this in the mv3 branch.

Plan:

• Turn injected.ts into a regular content script with "world": "MAIN" in Chrome (since injecting inline scripts is not allowed anymore). (Firefox should be able to keep using its xray stuff.)
• Render the hints in an iframe, and use chrome.scripting.insertCSS() to insert the CSS into it (since injecting inline styles is not allowed anymore). (This should also get rid of the annoying page CSP workaround in Firefox.)
• Stop using the browser API polyfill, and just use chrome instead. In MV3 it supports promises and Firefox supports chrome too. Use @types/chrome for TypeScript.
• Let the top-level frame of each tab be in charge of that tab, instead of the background script being in charge for all tabs. Reason: The top-level frame script lives as long as the page is loaded, while the background script (service worker) goes to sleep and loses state.
• Let the background script / service worker do as little as possible, only the the things that have to be done there. Make it a stupid listener.
• Communicate between the worker and top-level frame script directly instead of via message passing (small optimization).
• Read the options and subscribe to changes in all scripts, instead of just in the background.
• Let the options page read and write options itself. Everyone else will get updates through listening to storage changes.

[meldron]

It is now no longer possible to install the Extension from the chrome store. May be you could add a packed extension for Chrome in the Repo releases.

[lydell]

@meldron Can I read more about “packaged extensions” somewhere?

[meldron]

Hey @lydell, sorry I meant a zip file containing a directory with the "unpacked extensions".

Unpacked extensions are a directory containing the extension, including a manifest.json file.

So that people can download the zip file. Unpack it and use the developer options to load the extension on chrome://extensions/:

[meldron]

So more or less just the output of npm run build:chrome: dist-chrome/link_hints-1.3.2.zip. Just tested it and works for me.

So may be creating a Github Aciton and a release and run all the build: commands and add the zip files?