Creating Firefox browser extensions -9

Photo by Sigmund on Unsplash

Welcome to part-9 of the series. You can find part-8 here.

We will continue building extensions, which show some type of image when we open a new tab.

The second tab extension will be called Developer Tab. So, go ahead and create a folder DeveloperTab and inside it another folder icons. Inside that folder place two icons. You can get them from the github link at the end of this post.


Now, create a file manifest.json inside the folder DeveloperTab and put the below content in it. It is quite similar to the file in previous extension and contains the parameter chrome_url_overides.


Now, this extension contains a cool trick with images. I had learned it from the awesome free course JavaScript 30 from Wes Bos. The link for the course is and i made it with, the marked tutorial.

JavaScript 30

So, not much explanation here. Please follow the above tutorial for the working. Go ahead and put the below in a file tabs.html in the same folder.

Here, we have three different set of texts, which we are going to choose randomly and display within images.

Next, let’s create the style file. Place a file tabs.css in the same folder and the below content in it.

We are taking four developer random images from, as background for panel1, panel2, panel3 and panel4.

Now, if we load the extension in firefox and then open a new tab, we can see a big blank page with yellow background. All the panels are display: none in html, so nothing is shown.

You can learn how to open an extension for testing in my previous post here.

Yellow background

Let’s add to logic to show the images and also the click animation. Create a new file tabs.js in the same directory.

Now, in this file the anonymous function runs on page load and the Math.random, chooses any one of the three panels. After that we show them by flex.


The below is what we get from the code.


Now, when we click on any of the tab, it calls the functions toggleOpen() and toggleActive(), which sets the properties in CSS and open the complete text.


We can click on all of the tabs and it will distribute the space between them.

Code long

So, it’s time to publish it in the mozilla addon store. I will follow the procedure from another of my blog in the series. The link is here.

I had submitted the addon and it is Awaiting Review from mozilla reviewers.

Developer Tab

This complete part-9 of the series. You can find part-10 here.

You can find the code for the same in my github account here.



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