Creating Firefox browser extensions for covid-19–11

Image for post
Image for post
Photo by Victor He on Unsplash

Welcome to part-11 of the series. You can find part-10 here.

I often go to unsplash.com 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.

Image for post
Image for post
SocialDistancing

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

Image for post
Image for post
manifest.json

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.

Image for post
Image for post
images

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

Image for post
Image for post
tabs.html

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

Image for post
Image for post
tabs.css

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

Image for post
Image for post
Social Distancing

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

Image for post
Image for post
tabs.html

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

Image for post
Image for post
tabs.css

Now, it is showing more perfectly in our tab.

Image for post
Image for post
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.

Image for post
Image for post
tabs.js

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

Image for post
Image for post
Extension

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.

Image for post
Image for post
Awaiting approval

The addon is finally approved and available in mozilla addon store at https://addons.mozilla.org/en-US/firefox/addon/social-distancing/

Please use it and spread the message of Social distancing.

Image for post
Image for post
Social Distancing

This complete part-11 of the series. You can find part-12 here.

You can find the code for the same in my github account 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