Search code examples
javascriptgoogle-chrome-extensionfirefox-addongmail-apifirefox-addon-webextensions

What is the best way to create a cross browser Gmail extension?

I want to create a Gmail extension that should work fine for both Chrome and Firefox. What is the best way to proceed?

Solution

  • Just use chrome.* for extension API calls to write code that works in both.

    To a large extent, Chrome, and Firefox (using WebExtensions) are directly code compatible. As long as you are using APIs which are supported in both browsers (Chrome, Firefox), you can just use the chrome.* namespace for API calls in both browsers. Many extensions will be directly code compatible.

    However, there are some functional incompatibilities. The best place to look for information about such is on the Mozilla Developer Network (MDN) page for each API. If you find incompatibilities, you can write them up and submit a PR to the browser compatibility JSON file maintained by Mozilla, or directly modify the appropriate MDN API page (e.g. issues where developers need to see something is actually broken). For some things, you will need to detect the browser you are running in and execute slightly different code for each. However, for most things these will be runtime choices. You should not need to have two different sets of code.

    Chrome: You should begin by reading the Chrome extension overview (perhaps along with the pages linked from the overview). The architecture section has overall architecture information which should help your understanding of how things are generally organized/done. You will should also read Content Scripts.

    Firefox: You should begin by reading the Anatomy of a WebExtension page (perhaps work through reading the pages linked from there). It has overall architecture information which should help your understanding of how things are generally organized/done. Here, also, reading about content scripts will be quite beneficial.

    Notes:

    1. Firefox natively supports its APIs using both browser.* (Promise based) and chrome.* (callback based, like Chrome). If you want Promise based API calls in Chrome, Mozilla has a browser.* pollyfill. The fact that the chrome.* namespace is supported with callbacks is not well documented (it was, but Mozilla chose to change the docs to only mention it in a couple of places). Thus, you will find all of their API pages showing the browser.* namespace and Promises. Don't be deterred. The chrome.* namespace is supported, specifically to make cross-browser extensions with Chrome (in particular porting from Chrome to Firefox) easier.

    2. Each browser has APIs which are not supported by the other. Mozilla is still very active in developing WebExtensions APIs. To a large extent, this is implementing APIs which are already available in Chrome. To some extent, this is providing some of the additional capability which is available in other types of Firefox add-ons. However, this will always be a very limited subset of the capabilities which are/were available to other types of Firefox add-ons. In case you are unaware, Firefox will disable all types of extensions, other than WebExtensions, as of the release version of Firefox 57 (2017-11-14).

    Gmail specifically

    What you are going to need will depend greatly on what it is that you are actually wanting to do. There is the question How to develop Chrome extension for Gmail? which provides some information. You should also investigate the Gmail API. There are also a large number of questions/answers related to making a Gmail Google Chrome extension.