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 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
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.
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.
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?
Okay then,
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.
Leave a Reply
Your email address will not be published. Required fields are marked *