A Step-by-Step Guide to Coding a Simple Extension on Firefox!

If you're interested in developing a Firefox extension but don't know where to start, you've come to the right place! In this post, we will guide you through the process of coding a simple Firefox extension step-by-step!

What exactly are we making?

We will be making a simple temporary extension - an extension that only you have access to e.g. end-users will not be able to use the extension. This is a way to test if your extension works and find issues. I might make another post on how to actually upload it for other people to use, but for now, this method is for you to use the extension.

The link to the official Mozilla Firefox 'Temporary installation Guide for extensions!

Now, for the steps into making the extension:

1. Setting up the development environment
2. Creating a manifest file
3. Adding a pop-up window
4. Attaching JavaScript functionality to a button
5. Load your extension in Firefox

Lets get started~!

Step 1 - Setting up the development environment

Obviously, you will need to have Firefox installed on your computer. You will also need a code editor, such as Visual Studio Code or Sublime Text, to write your code. Im going to use VS Code.

In your code editor, create a new folder where you will store your extension files. You can name this folder whatever you like. For this example, I will call it 'Firefox Extension. I also recommend adding the following files in the folder:

1. index.html (or in this case popup.html file)
2. icon image in .png or .jpg or similar formats
3. manifest.json - talked about in the next step
4. script.js

Step 2 - Creating a manifest file

The most important file I believe when creating an extension is the manifest JSON file. This file will contain metadata about your extension, including its name, version, and permissions. In your new folder, create a new file called manifest.json.

This is the general structure of the file. The icon size you need to have is 48x48 pixel size image and then you can have others to be responsive to screensizes, I just added one extra. The browser_action part includes the default icon image that will display an icon in the Firefox toolbar and the popup html file. In scripts, that is where we will add the JavaScript code to run.

Step 3 - Adding a pop-up window

The code simply displays the text Hello World and a button in the center of the window. I assume youre good at your HTML and CSS so I wont go into too much detail here but the CSS is in the style tags within the head tags and what we can see also is what is between the body tags - the 'Hello World and the 'Click me! button.

Dont forget to include the script tag at the end of the body tag so itll link to the script.js file in your folder AND include scripts: [script.js] in the manifest.json for the javascript code.

Step 4 - Attaching JavaScript functionality to a button

Again, I hope you very basic JavaScript. This code basically adds an event listener to the button with the ID myBtn (which is the button with 'Click me! on it). When the button is clicked, it changes the heading 1 text from 'Hello World to 'The button was clicked!.

And that it! Done with all the coding part and now to upload it for you to use~!

Step 5 - Load your extension in Firefox

Open Firefox and type about:debugging in the address bar. This will open the Firefox Developer Tools page. Click the This Firefox section to the left of the page, then click Load Temporary Add-on. Navigate to your extension folder and select the manifest.json file.

The extension is now loaded in Firefox! Click the icon in the toolbar to see your pop-up window!

Whenever you make changes to the extension, back on the Firefox Developer Tools page, click the 'Reload button on your extension section and changes should show up!

I hope that this post has been helpful to you and that it has inspired you to create your own Firefox extension!

Remember, the most important thing is to have fun and experiment with different ideas - play with the colours or sizes or the javascript code! Dont be afraid to try new things and explore!!

Extra links that helped me learn:

• How to build an extension for Firefox in less than 5 minutes
• Temporary installation in Firefox

Thanks for reading!