webextension-polyfill VS template

Porting this extension to Firefox should be relatively straightforward using the webextension polyfill: https://github.com/mozilla/webextension-polyfill

Firefox maintain a library for unified extension API https://github.com/mozilla/webextension-polyfill

Their type definition for HAR request isn't exported https://github.com/DefinitelyTyped/DefinitelyTyped/blob/mast...

best is to use https://github.com/mozilla/webextension-polyfill

The Browser Extension Working Group at W3.org proposes the web standards based on the Chrome extension manifest, which supports all web browsers. Based on that proposal, Mozilla has released the Browser Extension Polyfill library that supports the modern promise pattern instead of callback. Therefore, if you import this polyfill library, theoretically, your Chrome extension quickly turns into the browser extension that runs on multiple browser engines.

And the biggest tip that i received late. Use Typescript type by Mozilla to make your development much easier(autocomplete, inline docs etc): https://github.com/mozilla/webextension-polyfill

I've written extensions before and Firefox has a very good polyfill [0] that makes it quite easy to write extensions for all browsers. It does get a bit trickier if you also want to incorporate TypeScript [1] or React however.

[0] https://github.com/mozilla/webextension-polyfill

[1] https://github.com/Lusito/webextension-polyfill-ts

I used WebExtension polyfill[0] when adapting my FF addon to Chrome and admittedly all the intricate differences between APIs still costed me half a day of work.

I managed to have it done with only a few places where I branch on navigator.vendor, but If I wanted to ship different versions to AMO and CWS, I'd make use of something like DefinePlugin[1] for webpack to include/exclude code based on build target.

[0] https://github.com/mozilla/webextension-polyfill/

[1] https://github.com/webpack/docs/wiki/list-of-plugins#definep...

Initially I created wrapper functions to convert Chrome functions that require callback to return promise instead. The better approach, as I found out later, is probably to use webextension-polyfill from Mozilla and its types.

I mean, the browser apis are close (and Mozilla still has much better documentation) but there are a LOT of edges cases where behavior diverges.

Frankly - I'm a little peeved that Optional permissions in Firefox are STILL broken - The prompt can only be triggered in response to a user action, and Firefox blows the fuck up if you put a promise anywhere in between the user click and the call to the api. Which is hugely ironic, since Mozilla is the one pushing to move all the webext APIs to be promise based (and provides a nice helpful library for Chrome/Edge/Safari support: https://github.com/mozilla/webextension-polyfill) which... doesn't work on their platform. Doubly ironic, since the result is that most FF extensions just ask for more permissions up front, which is exactly the opposite of what you'd want in the "secure/private" world Mozilla claims they're pushing towards.

This creates a basic Svelte project for us from this template. We still have to install the packages that come with the template though. We can use either yarn or npm for this but I'll use yarn.

I didn't want to use Sveltekit because I don't think I would benefit a lot from things like routing and ssr, which would end up adding unnecessary complexity. I also didn't want to use some of the Svelte templates out there because they point to a repo that is now archived in favour of Vite and/or Sveltekit. Also, since I was at it, I decided to throw in a CSS framework and ended up choosing Tailwind to complete my template, but you could ignore it and go with the svelte way of doing things if you prefer.

https://sveltestrap.js.org/ https://svelte.dev/ https://github.com/sveltejs/template https://svelte.dev/repl/7eb8c1dd6cac414792b0edb53521ab49?version=3.20.1 https://svelte.dev/repl/4162507931ea406c9f03be1b3aed9e94?version=3.48.0

! could not fetch remote https://github.com/sveltejs/template

This. Using the svelte template as OP did, you should have a public directory by default.

Grab your favorite Svelte template. I'm a typescript+pug+stylus weirdo, but the standard Svelte-provided one is a good place to start.