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.
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.
This API is used to register (JS)scripts at runtime, which can also be achieved by ‘content_script’ key in the manifest.
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
Let’s get started. In this article, we will be developing cross-browser extensions that will run seamlessly on Firefox as well as Chrome.
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
- 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.
For this example, I am consuming an open API from icndb.com, which gives free random facts about Chuck Norris on each request.
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.
In your Firefox Browser do the following:
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?
In your Chrome Browser do the following:
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.
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.
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.