Create Cross Browser Extensions

Browsers are made on a very simple logic — one size fits all. Browser extensions are the things that extend the browser functionality to suit everyone’s requirement. There are a number of extensions available on Firefox AMO, as well as Chrome web store, which modify browsers and add utilities like creating notes, blocking ads, manage passwords etc.

With the WebExtensions API, building a cross-browser extension is a piece of cake, all it needs is a basic Javascript knowledge. And to our joy, the same piece of code will run across various browsers.

WebExtensions API

WebExtensions APIs are simple APIs that can be used with Javascript to modify browser functionalities without touching the native browser code.
Below are some APIs and how they can be used.

1. Tabs API

This API is used to deal with browser tabs. With the help of this API, you can create a new tab with specific URL, detach a tab, close a tab, you can also create hook functions on tab close, tab creates, tab activates etc events.

2. Notification API

This API is used for creating browser notifications. It accepts a simple object of options like 'title', 'message' and 'type' (template type).

3. BrowserAction API

Browser action is a button in a browser’s toolbar. This API is used to track toolbar button click. A browser action popup can be defined in the manifest file too.

4. ContentScripts

This API is used to register (JS)scripts at runtime, which can also be achieved by ‘content_script’ key in the manifest.

5. ContextMenu

This API is for manipulating the right-click menu. With this API we can add right-click menu entry, get the right-click event, etc.
More APIs and details about them can be found on MDN

Excited?

Let’s get started. In this article, we will be developing cross-browser extensions that will run seamlessly on Firefox as well as Chrome.

What are we making?

In this demo, we will help you to create your own browser extensions that create a toolbar button entry with an icon and a tooltip. When the button is clicked a toolbar popup opens with a random fun fact that is fetched from a third party API.

                                                                                                       Fun Facts Extension

Structure    

- fun-facts
    - manifest.json
    - icons
        - icon_48.png
        - icon_64.png
    - popup
        - index.html
        - style.css
        - script.js
        - cn.gif

1. Manifest.json — This file is the entry point for extensions. It is the only file that every extension must contain. The Manifest file has metadata about the extension such as the name of the extension, description of the extension, version etc. This file also has details of the functional components such as content script, background scripts, browser actions etc. Moreover, it houses every permission that would be required by the extension.

'manifest_version', 'name', 'version' are the only mandatory keys.
'browser_action' will parse the HTML present at the address given in 'default_popup' and load it into the toolbar popup on click.

2. Popup — This directory is an individual HTML setup with HTML files, CSS, JS, images, etc. This will make the UI of the popup as well as the logic that’s being executed.

popup/index.html

popup/style.css

popup/script.js

For this example, I am consuming an open API from icndb.com, which gives free random facts about Chuck Norris on each request.

As soon as the toolbar button is clicked the Javascript will be executed and an HTTP request will be made to the icndb server, the response will be displayed as the text in the popup.

It’s just exactly the same thing as what we have been doing in web pages!

3. Icons — Lastly, we need to put the icons (in their required resolutions) that will be used as the toolbar button image, extension logo, extension listing image etc. in this folder.
We should be all set by now.

Installing and testing the extension

In your Firefox Browser do the following:

1. Type ‘about:debugging’ in the address bar
2. Click ‘Load Temporary Add-on’ button
3. Select the ‘manifest.json’ from the file select dialog

                                                                                        Adding unpacked Add-on to Firefox

That’s it, you will see a new toolbar button, click it and see your Add-on in action.

Wait, wasn’t this supposed to be Cross Browser?

Okay then,

In your Chrome Browser do the following:

1. Type ‘chrome://extensions’ in the address bar
2. Check ‘developer mode’, to enable loading unpacked extension
3. Click ‘Load unpacked extension’ button.
4. Select the complete folder from the file select dialog.

                                                                                            Adding unpacked extension to Chrome

You will see a new toolbar button, click it and see your Chrome extension in action.

Note —This is an unpacked extension and can not be distributed yet. If you want to make your extension public and be used by others, it must be submitted to Chrome store or Firefox AMO.

Security

The WebExtensions APIs require permissions(mentioned in manifest.json and shown to the user at the time of installing the cross-browser extension). In addition to this, the published extension is reviewed by designated reviewers (in case of Firefox) to avoid any malware extension.

Resources

If you want to learn more about how to make a cross-browser extension, the best resource to get started with extensions development is the Mozilla Developer Network.
Find the source code of this example here.