Things I wish I knew before building a cross-browser extension

/ Leave a Comment

In the last post, I showed how to make the Chrome extension working in Firefox. In this post, I’m going to talk about things I wish I knew before building a cross-browser extension.

Latest Edge browser is compatible with Chrome

The Chrome extension just works with Edge locally without any changes. This is also the case for the native app configuration. This is quite nice. It makes sense as the latest Edge is now based on Chromium. The only one thing I had to fix is when submitting to Edge Add-ons store, it did not like the key property in the manifest file even though they say that is supported in their documentation. It was happy with Key.

The WebExtension browser API Polyfill

Even though Firefox recommends using the WebExtension browser API Polyfill, I find it quite annoying to use. It makes the initial setup a bit more complex as I would also need to include it in both the background and content scripts sections of the manifest file.

The namespace chrome.* is not compatible in Firefox but only in the web app. It works fine when used in the background and content scripts. It does not have this  “TypeError: window.chrome is undefined” exception.

Firefox extensions does not work with localhost

This is the most annoying quirk I find when building a Firefox extension. In the content_scripts section in the manifest file, I have the matches to allow localhost like this

    "content_scripts": [
      {
        "matches": [ "http://localhost:3000/*" ],
        "js": [ "content.js" ]
      }
    ]

However, the content script does not get served by the extension when looking in Sources in the Developer Tool. This means I could not test my code locally. I ended up having to deploy it to a development environment, test it and hoping that it works. If it doesn’t then fix the code, re-deploy and repeat.

Native app manifest incompatibilities

In the app manifest that describes to the browser how it can connect to the native application, it is OK to have Firefox specific property when using Chrome. However, it would throw exception if there is Chrome specific property when using Firefox.

{     
    "name": "some.sample.domain.name",     
    "description": "Sample native app host",     
    "path": "native-host.bat",     
    "type": "stdio",
    "allowed_extensions": [ "[email protected]" ],
    "allowed_origins": [
        "chrome-extension://eklgpfdhpffgfecicfbikddafnclmnjf/"
    ]
}

Using Firefox with the above (the highlighted property is specific to Chrome), you would get this exception.

I ended up going with two separate manifest files, one for Chrome/Edge and the other for Firefox.

Browser console

The error from the previous section took me a long time to find. I find that it is easy to debug and see the console output for the background and content scripts.

For the background script, you need to click on Inspect button in Firefox extensions page.

As for the content script, you can see the content script under Sources in Debugger tab from the developer tool.

If there is any issue when sending message to the native app, neither these two consoles will tell you what goes wrong. You will need to use the Browser Console. You can open the Browser Console by going to Firefox menu, select “Web Developer” and then select “Browser Console”. You could also use Ctrl + Shift + J to bring it up.

That’s it. Hopefully this would save you a lot more time when building a cross-browser extension.

Leave a Reply