Mozilla, WebExtensions

Create cross browser extensions

0 44

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, developing a browser extension is a piece of cake, all it needs is 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 create, tab activate etc events.

2. Notification API

This API is used for creating browser notifications. It accepts 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 button click. A browser action popup can be defined by 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 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 thme can be found on MDN

Excited?

Let’s get started. In this article we will be developing a simple cross browser extension that will run seamlessly on Firefox as well as Chrome.

What are we making?

In this demo we are creating an extension, that creates 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.

Structure

1. Manifest.json – this file is the entry point of 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 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 a http request will be made to 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 webpages!

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 address bar
  2. Click ‘Load Temporary Add-on’ button
  3. Select the ‘manifest.json’ from the file select dialog

Screen Shot 2018-02-28 at 7.49.11 AM

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

Wait, wasn’t this suppose 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.

Screen Shot 2018-02-28 at 7.50.23 AM

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 user at time of installing 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, the best resource to get started with extensions development is the Mozilla Developer Network.

Find the source code of this example here.

 

About the author / 

trishul

Related Posts

Leave a reply

Your email address will not be published. Required fields are marked *