First Web Extension

What is Web Extension?

Web extensions are powerful tool to develop browser add-ons. There are several tools to develop a browser add-on, but web extension is one of the best tool to develop, because this is designed to be cross browser compatible. Web extensions are written for Firefox but can run on chrome, edge and opera.

First web extension

Here you can start developing the first web extension; the following files are needed –

1. Route directory with the required name of your extension.
2. Manifest.json file.
3. Icon directory.
4. JS file of your extension.
5. Popup directory – which should contain required Html / CSS / JS for the popup.

Manifest.json keys

Manifest.json is a json formatted file, which contains the necessary information of the web extension and configuration settings of the extension. It is the only file any web extension should contain. It mainly contains the metadata such as name and version and can also specify the extension aspects.

Here are the major keys –

1. Manifest_version – version of your manifest file. – ex – 1 – mandatory
2. Name – name of your add-on. – ex – “Debug It” – mandatory
3. Version – version of your add-on. – ex – “1.0” – mandatory
4. description – short description of your add-on – optional
5. icons – Object with specified version of icons – need 48×48 and 96×96 version icons – should be png images – optional
6. Content_scripts – This is the most interesting key which tells the add-on to load the specified scripts into web pages which matches the specified pattern of the url.
7. Browser_action – If need to show the toolbar icon. It contains three keys
   1. 1. 1. 1. 1. 1. 1. • Default_icon – specify the icon to be appears on toolbar.
                        • Default_title – to show tooltip when mouse over the toolbar button.
                        • default_popup – the html file to show as popup when toolbar button is clicked.

Create extension directories

• Create route directory under any of the drive. You can create it via command prompt.
• Open command prompt and enter –

Mkdir DebugIt

Cd DebugIt

• Create a new file called “manifest.json” directly under the route directory. And configure it as per above keys.
• Create the “icons” directory directly under the route directory. Save an icon there. The icon is very necessary as it appears next to the add-on’s listing add-on manager.
• Create the required js file directly under DebugIt directory.
• Create directory “popup” under route directory.
• Add the required HTML, CSS, JS files under popup directory.

Test your Extension

• On the address bar type – about:debugging. This will open the add-on manager window.
• Click on Load Temporary add on button.
• Choose the js file or manifest file to load the extension.
• Now it is ready to test/use.