Creating Firefox browser extensions -1

Two years back i created a lot of firefox extensions(23 in total), also known as add-ons. Slowly, i moved to other side projects and forgot about them. Recently, i got some positive reviews of some of the extensions and received email notifications.

I wanted to practice some Vanilla JS next and as always i do, i want to make some projects in it. Since, the firefox extensions are created using HTML, CSS and Vanilla JS they are awesome way to practice Vanilla JS.

You can find all of my firefox extension here. So, go ahead and install them.

Image for post
Image for post
My Extensions

One more thing before we dig into coding, which i had to confess. I lost access to my mozilla account, in which two step authentication was enabled. I lost the authenticator app on my old phone and also the recovery keys.

So, i cannot update by existing extensions. I will add all of them again with some updates and blog the whole process.

The best place to learn about creating firefox extension is this link from mdn. Also, there is this awesome youtube series from The Coding Train.

We are going to create a Dynamic Travel Theme and publish it to Mozilla addons site. The entry point and the most important file in any extension is the mainfest.json file. You can read more about it here. It mainly contains metadata about the extension and also provide pointers to other files in the extension.

So, open your code editor and create the mainfest.json file. Put the below content in it.

Image for post
Image for post
mainfest.json

The most important thing in the mainfest.json file, is the background script. This script is very important for this plugin, as we need to run it forever in the background to check the user time and change the theme. You can read more about background scripts here.

So, create a file background.js in the folder. First just add some console log in it, as we need to check whether it is working.

Image for post
Image for post
background.js

Next, open your firefox browser and go to type the below url. After that click on Load Temporary Add-on… button

Image for post
Image for post
debugger

After that navigate to your folder and click on mainfest.json file.

Image for post
Image for post
mainfest.json

Next, our extension is loaded so click on the Inspect button.

Image for post
Image for post
Travel Theme

And we will get the console log in the new tab. Note, that the background script doesn’t show the log in browser console.

Image for post
Image for post
log

Let’s update the background.js to add an eventlistener. We will do this by browser.alarms.onAlarm. You can read more about it here.

Now, we are firing the function checkTime() every 5 minutes with the help of browser.alarms.create. You can read more about it here.

We are also calling the function checkTime() initially once, as we need to show our theme when the extension starts for the first time.

Image for post
Image for post
background.js

Head over to the extension again and press the Reload button, for the new changes to update.

Image for post
Image for post
Reload

Now, click on Load Temporary Add-on… button and the Inside checkTime log will keep on increasing every 5 minutes.

Image for post
Image for post
Log

Next, let’s update our function checkTime() to get the hours, and then pass the hours to the new setTheme() function.

Now, the setTheme() function uses browser.theme to update the theme. You can read more about it here.

Image for post
Image for post
setTheme()

Next, we need to create the themes object, in which each theme will get passed.

Next, add all the images to the folder.

Image for post
Image for post
Images added

Now, when you reload the extension the theme gets loaded depending on the hour.

Image for post
Image for post
Theme loaded

We are done with the extension, but let’s add some icons before publishing to mozilla addons site. Update the below in manifest.json file and also add a folder icons containing those icons.

Image for post
Image for post
manifest.json

We need to publish this extension, but as this post is getting longer will do that in the next post.

You can find the code for this extension here. The part-2 of the series can be found here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store