For my new side project I needed to build a browser extension. I was hesitant to build one as the development experience of doing everything in the browser seemed annoying to debug.

After hearing more and more about Web Extensions and even Safari adding support recently I assumed that now is the time to take this on.

I found out that it was optimistic to think that now you'll write one extension, compile it for the 3 platforms, upload it to the respective extension stores and you are done.

“Write once, run anywhere” was once again a lie.

Misconception 1:

Manifest 3 is the new hotness and that's what you should use

Reality: Mozilla and Google are still fighting over what Manifest v3 is supposed to be. For now Firefox doesn't really support Manifest 3, their extension testing website is only working with v2 (or at least is broken in general) and all the tooling to build a Safari extension is only working for Manifest v2.

Misconception 2:

The Web Extension shares the same code for all platforms.

Reality: There's subtle differences so you'll still end up with either platform conditions or separate code bases. Even small differences like browser.webRequest.onBeforeSendHeaders and chrome.webRequest.onBeforeSendHeaders behaving differently.

Misconception 3:

A simple fetch will behave the same in Chrome and Firefox.

Reality: Firefox does something differently and you'll run into CORS issues. I think it might be related to this issue but I wasn't able so solve it yet. Currently I just whitelisted the moz-ext://... header in the backend which is not ideal.

In general it seems to be that the Mozilla Firefox tooling for developing extensions is more polished. They have a CLI build tool: web-ext build and web-ext run which runs and auto-reloads the extension. Including for Manifest changes where Chrome always needed me to remove and re-add the extension.

It is possible that some of my solutions or understandings of the issues are wrong, I'm still new to this. If you spot something off, let me know!