Porting my extension to Chrome, why it is such a nightmare?

How do I port my extension to chrome, doing the least possible modifications? Is it possible to have a single dev tool then “compile” for firefox and chrome?

For example, adapting the manifest.json or being able to use browser in both platforms without having to replace it with chrome everywhere. Lastly, but this would be the least, using CSS that is compatible to both platforms.

Personally, I just have a simple bash script that copies all of the files to different build folders for each browser and then deletes any browser-specific files.

For example, I have manifest-firefox.json and manifest-chrome.json. After everything is copied (let’s say, for Chrome), the Firefox file is deleted from the build folder and the chrome one is renamed.

I’m sure there’s better ways, but it works for me. Most of the code between the two browsers is the same. For any JavaScript that’s not, you can easily tell what browser you are on by checking if the “browser” variable is defined. If it’s not, you’re on Chrome. You can then just assign "browser’s to “chrome” and that works for many of the API calls.

The polyfill library is also an option, but I’ve never personally used it.

As for CSS, 99% of the CSS should work on both browsers. If you need to use CSS with a vendor prefix, you can just add it in. Firefox will ignore it.

It is possible to have a dev tool to “compile” version dedicated for each browser. I have however never done it that way.

Has Google started to require use of Manifest 3 for new Chrome extensions? If you can still use manifest version 2 for Chrome extensions, you can in principle construct cross-browser compatible extensions using “browser” namespace (promise based API) with the help of webextension-polyfill:


I have done that with my Flickr Fixr and xIFr extensions. They can both run on Chrome too (though, later is only officially available for Firefox).
2 Likes

nope, chrome forces v3 manifest now

I tried the other way in chrome: var browser = chrome; but gave me an error.
Also I’m having a weird error in Chrome:

Access to XMLHttpRequest as been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

This in the content script I’m calling other XMLHttpRequest in my settigns page and they are working fine, but in content script I get this error, of course I have already set appropriate host_permissions to my XMLHttpRequest target.

To unify namespace (to “browser”) use the polyfill library mentioned above. It works great in both, Manifest V2 and V3 Chrome extensions.

I eventually did the other way, so I assign browser to chrome if I’m in Firefox.

You shouldn’t have to do that, Firefox provides chrome.* by default if an API also exists in Chrome.