back to all posts

Build a Covid-19 Firefox extension step-by-step-11

by Nabendu Biswas / April 5th, 2020

#javascript #beginners #webdev
Series: Firefox-addons

Welcome to part-11 of the series. I often go to for using royalty free images in all by blog posts. During this covid-19 situation, they had updated their site to tell us the necessity of social distancing.

I got the idea to create a social distancing firefox extension from that only. This will also be a tab extension will be called Social Distancing. So, go ahead and create a folder SocialDistancing and inside it another folder icons. Inside that folder place three icons. You can get them from the github link at the end of this post.


Now, create a file manifest.json inside the folder SocialDistancing and put the below content in it.


Now, i will be again using local images in this extension because they get loaded quicker.

We need to place 16 images in the project, which we will be soon displaying in a gallery.


Go ahead and create a file tabs.html in the same folder. We will use the below code to display these images as gallery.


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


Let’s load our extension temporarily for test and open a new tab. It is showing perfectly.

Social DistancingSocial Distancing

But i want to add some covid-19 social distancing message. So, let’s add the same in tabs.html file.


Let’s also add some styles for this message in file tabs.css


Now, it is showing more perfectly in our tab.


Now, it’s time to put the Social distancing animation in the extension. The animation is that, when we move the mouse cursor inside the page the images moves away. It conveys the message of social distancing.

So, create a file tabs.js in the same folder and put the below code in it. The code is simple, which increase the grid-gap on detecting a mouseenter event. Does the opposite when receives a mouseleave event.


Now, our extension is complete and it behaves like below.


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.

Awaiting approvalAwaiting approval

The addon is finally approved and available in mozilla addon store at

Please use it and spread the message of Social distancing.

Social DistancingSocial Distancing

This complete part-11 of the series. You can find the code for the same in my github account here.

Nabendu Biswas