Internet browsers such as Mozilla Firefox, Google Chrome, Microsoft Edge, Opera gives users a simple view with a straight logic — one size that fits all. Extensions are programs that extend the browser functionality to modify the browser functionality. There are several cross browser extensions available for Mozilla Firefox, Google Chrome, Microsoft Edge, Opera web store that are used to modify browsers and add utilities like creating notes, blocking ads, managing passwords etc.

There are six major areas that we would be touching in this article, that will be helpful in developing cross-platform extensions:

•  API namespace
• API asynchronous event handling
• API function coverage
• Manifest keys
• Extension packaging
• Extension publishing

1. API Namespace:

browser.* (Mozilla Firefox, Microsoft Edge) & chrome.* (Google chrome, Opera) are two API namespaces that are used in four browsers.

• chrome.* is supported by Mozilla Firefox and also compatible with chrome to assist primarily.
• browser.* access the promises, which is modern & flexible mechanism to manage the asynchronous events.

2. API Asynchronous Event Handling:

There are two ways for handling asynchronous events which can be accessible in among four browsers (Mozilla Firefox, Microsoft Edge, Google Chrome, Opera).

• Promises have a standard to be followed for their extensions of API integration in Firefox.
• Callbacks can be easily accessed by Chrome, Edge, and Opera.
• Firefox supports callbacks for APIs which support the chrome.* namespace. If in any case, the promise is accepted as part of the standard followed by the system. It simplifies asynchronous events handling.

3. WebExtension Browser API Polyfill

API namespace and asynchronous is addressed by the Polyfill at the time of event handling when it takes place in Firefox, Chrome, and Opera.

To get access to the polyfill, install it on your machine to begin with the development of the extension using npm or you can also download it directly from GitHub releases.

Reference browser-polyfill.js in:

manifest.json, will be available for the background and content scripts. (Manifest.json file has basic collective information of the platforms).

HTML documents, like browserAction popups or tab pages. (HTML and CSS files define the user interface in the browser).

The executeScript call is dynamically-injected into the content scripts which can be loaded by tabs.executeScript, when it doesn’t get loaded using content_scripts declaration in manifest.json.

For example

Below mentioned manifest.json code is implemented with the polyfill available on background scripts:

{

// …

“background”: {

“scripts”: [

“browser-polyfill.js”,

“background.js”

]

}

}

Most important thing is to ensure that the polyfill executes the earliest extension before another script except in the browser.* API namespace executes.

The difference in API functionalities are offered in browser (Mozilla Firefox, Microsoft Edge, Google Chrome, Opera) and fall into three broad categories:

• Lack of support for an entire functionality

eg. While typing on Microsoft Edge, it doesn’t provide support for the privacy functionality.

• Variations in the support for features within a functionality.

eg. While typing on Firefox, it doesn’t support the notification functionality, onButtonClicked. Firefox is the only browser which can support onShown.

• Proprietary functionality, supporting browser-specific features.

Eg. While typing on containers, it would be a Firefox-specific feature which supports the contextualIdentities functionality.

4. Manifest Keys

The difference in manifest.json file is that keys are supported by browsers (Mozilla Firefox, Microsoft Edge, Google chrome, Opera) and fall into three broad categories:

• Extension information attributes

eg. While typing on Firefox / Opera, it includes the developer key & information of the author name to be displayed in extension.

• Extension features

eg. While typing on Edge, it doesn’t support the command key which allows shortcut keys to be defined for extension.

• Key optionality

eg. Author key will be mandatory for the user to input in Edge and optional for other browsers.

5. Extension Packaging

Packaging of an extension in a zip format is done just for the distribution through the extensions store of the browser and is relatively straight forward.

• Firefox, Chrome, and Opera extensions can be uploaded in a zip format which requires the manifest.json file to be at the root of the zipped folder.
• In case if any of the users is submitting it directly to the Microsoft store, it may require additional extension files in packaging to function accordingly.

The details of packaging, refers to the guidance of the respective extension’s developer portals.

6. Extension Publishing

Packaging of an extension in a zip format is done just for the distribution through the extensions store of the browser and is relatively straight forward.

• Effects for finding a way by adding and updating extensions for each store separately. In some cases, extensions can be uploaded based on their utility.
• In this scenario users must have to add / update their extensions for each store separately or can also upload extensions using utility.
  

QA of Cross-Extension Browser

Due to technical oversight, it can happen that there are some features that don’t run on all browsers or there are some issues in styling effects that are not exactly clear in other browsers, and it becomes necessary to verify it by testing if the program or application works perfectly as built for all browsers.

For testing and verifying application developers or QA can add and debug browsers extensions on their local server.

1. Mozilla Firefox

Add extension

• Navigate to about:debugging
• Check Enable add-on debugging option
• Click on to “Load Temporary Add-on”
• Select the manifest.json file

Debugging extension

• Navigate to about:debugging
• Locate extension
• By clicking on Debug option – Developers tool will open

here are six major areas that we would be touching in this article, that will be helpful in developing cross-platform extensions:

2. Google Chrome / Opera

Add extension

• Navigate to chrome://extensions/
• Click on Load unpacked
•  Locate and select the extension folder

Debugging extension

Once the package is uploaded background scripts errors can be encountered

• Navigate to chrome://extensions/
• Locate extension
• On click to the error button (error logs will be displayed to the user)
• Click on view in Developer Tools option

To debug a popup extension:

• Open the popup
• Right-click on popup
• Click on Inspect to view elements to perform debugging

3. Microsoft Edge

Add extension

• Navigate to about:flags
•  Click on check to enable extension developer features
• Click on the settings, more icon can be viewable as 3 dots icon on the top right of browser
• Select Extensions from this menu
• Click on Load extension
• Select the extension folder

Debugging extension

• To debug a popup extension:
• Open popup by clicking on it
• Right-click on to the popup
• Click on Inspect element

Polyfill use in Cross Browser Extension

Mozilla/webextension-polyfill is an extension which can be used to allow browsers like Mozilla Firefox, Microsoft Edge and Google Chrome which can be integrated with the Promise-based WebExtension APIs. In some browsers uncertainty some issues populate and can be figured out by debugging process.

Cross-browser extension development addresses the variation in API implementations to integrate with the extensions which can be used to address by targeting internet browsers using the WebExtension browser API Polyfill. Following this approach will give benefit to you for using API features that are aligned closely in the extensions API standard and offers simplicity of promises for handling asynchronous events.

Cross browser extensions are capable of handling variations among the API features supported by main browsers. File named manifest.json will be controlled by you as a developer to add data/information manually from where you can view variations in extension packaging and the processes of publishing it to the extension stores.

We hope that this blog will help you in getting started with building cross browser extensions.