Firefox / Chrome / MS Edge extensions using chrome.* or browser.*

Question

So I couldn't find anything that talked about using chrome.* or browser.* specifically. In some of the WebExtension examples it uses browser.* (browser.runtime.getManifest();) https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/getManifest, and in others it uses chrome.* (chrome.notifications.create), https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/notifications.

I'm not entirely sure what's the difference. Is it contextual? Both chrome.* and browser.* are available in my content script and in the background script in Firefox. I looked at IEs docs as well and they use browser.* ( didn't see chrome.* in their docs)

I'd like to know what the difference is between and do Chrome extensions only use chrome.* or does it have browser.* as well (does IE only have browser.*)?

Frail

Highly related, potentially a duplicate: Using chrome.tabs vs browser.tabs for browser compatibility – Polemics

As of 2021 there is way to make plugins that will work in Chrome, Firefox, Safari, see #68572483 – Shaniqua

Answer 1

Chrome only has chrome.apis. In the old Edge only browser.apis were supported, but now Chromium Edge supports only chrome.apis. Firefox has both browser.apis and chrome.apis for compatibility with existing Chrome extensions.

The main difference is that in Firefox the browser.apis use promises but the chrome.apis use callbacks.

See the docs at https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Chrome_incompatibilities

Laplante

Chrome's chrome.apis use callbacks as well? I also quickly looked up Edge's browser.storage, it doesn't use promises? developer.microsoft.com/en-us/microsoft-edge/platform/issues/… Basically I'm looking at how to make it most cross-browser compatible without having to go and change every JS file where the *.api is called between the different browsers or is that going to happen anyway? – Frail

To note, I'm developing in Firefox and utilizing it's promises from browser.*. – Frail

@KnightYoshi, If you want cross browser compatibility use chrome.*, not browser.* It is relatively easy to polyfill from chrome.* (callback) calls to their browser.* (Promise) equivalents. It is difficult to do the reverse because the callback function information does not exist in the API call when you call a browser.* API. Also, even if you don't polyfill, using chrome.* gives you Chrome and Firefox. together those two give you the majority of the marketplace (You can polyfill for the rest). – Polemics

Answer 2

As of 2021

Check https://github.com/mozilla/webextension-polyfill
(or TypeScript counterpart https://github.com/Lusito/webextension-polyfill-ts)
for some better compatibility between Chrome and Firefox

Shaniqua

Answer 3

I think your best solution for now is to use callbacks instead of promises as they work for chrome, firefox and edge. In addition you can use something like browser = browser || chrome; to solve the chrome vs browser issue and browser.runtime.lastError; for error handling. Firefox support both the callback and the promise version of the api, callback version will work for both the chrome and browser objects.

Gentility