How to create your first Firefox add-on?

Firefox is one of the most popular web browser in the market with million of downloads around the world and from the Firefox development blog we know that there are many new features waiting to be added into the new version of the Firefox browser in the future.

If you are a Firefox browser user then you might want to create a Firefox add-on to add in your own custom made function to this belove web browser so in this article I will show you how to write a simple Firefox’s webextensions which you can later share it with the rest of the world or just use it by yourself. If you have created extension for chrome and opera browser before then it will be so easy for you to create your first Firefox extension because Firefox is actually using the same system just like chrome and opera to create the browser add-on!

In this tutorial we are going to create a browser action’s extension with a clickable icon inside the browser’s tool bar. This fairly simple extension will serve as a guild for you to create your own Firefox extension in the future.

Before we start to create any file we will create an empty folder which will be used to keep all our Firefox add-on files, we will also create an empty icon folder inside the main folder which will be used to keep all the icons for the add-on.

Next lets create the manifest.json file of this extension and then save it in the main folder.

{
  "manifest_version": 2,
  "name": "awesome game",
  "version": "1.0",

  "description": "a simple game for eveyone!",

  "icons": {
    "48": "icons/48.png",
    "96": "icons/96.png"
  },

  "browser_action": {
  
    "default_icon": {
      "16": "icons/16.png",
      "32": "icons/32.png"
    },
    "default_title": "play game"
  },

  "background": {
      "scripts": [ "background.js" ]
   }

}

Every Firefox extension needs a manifest.json file like above, in the first three lines of that file we will specify the version of the manifest which is a standard one, the name of the extension which will show up under the Add-ons manager and the version of our extension which is 1.0 at the moment and we will need to increase it to 1.1 if we have created a new version of that extension later on.

The next two lines include a short description of the extension which will display in the browser’s user interface of the extension and the path to the icons that will be used to represent the extension in the components such as the Add-ons Manager. You will need to create two icons for the different computer screen resolution (48px x 48px and 96px x 96px accordingly) and keep them both in the icons folder you have just created a moment ago.

Next is the browser_action key which contains the path to the extension’s icons under the icons folder that will be shown on the browser toolbar (again you need two icons for different screen resolution (16px x 16px and 32px x 32px)). Within the browser_action key is the default_title key which contains the helper text that will appear if a user hover the extension icon on the browser toolbar.

The background key contains the javascript file which will run on the background of the web browser which is the file we will look at next.

browser.browserAction.onClicked.addListener(function (tab) { // Start when User Clicks ICON
    browser.tabs.create({url: "http://gamingdirectional.com/application/MechanikalReptile/index.html"});
});

The background.js file will run on the background of the web browser, if you clicked on the extension icon on the toolbar of the Firefox browser then the browser.tabs.create method will launch the website with that url specified within that method.

Now the main folder should include all the files and a subfolder as shown below.

The icons folder will include those icons specify in the manifest
The icons folder will include those icons specify in the manifest.json file

Now we are ready to load the extension into the Firefox browser, type in the below line of text to the address bar of your Firefox browser.

about:debugging

Next click on the Load Temporary Add-on button and select any file within the extension main folder.

Load the Firefox extension
Load the Firefox extension

We have now temporary installed our add-on on Firefox and we can click on the add-on icon on the toolbar to launch the website!

extension icon
extension icon

One thing you need to take note of is that after you have closed the Firefox browser the extension will be removed as well, therefore if you want to use the add-on you have created then you will need to upload it to the Firefox add-on portal by zipping up your extension and then uploaded it to the Firefox AMO, if you just want to use that extension alone then you can choose not to publish the extension on AMO but you still need to download the signed add-on so you can install it in your Firefox browser or even share it with your friend online. Firefox is flexible when it comes to self publishing our own add-on which means it allows the other users to download your add-on directly from your website if you choose to self publishing your own Firefox extension instead of publish it on the Firefox AMO which will take some times for the Firefox stuffs to review and approve your add-on.

Like this post? Kindly share!