Creating Firefox browser extensions for covid-19–11

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.

SocialDistancing

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

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.

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.

tabs.html

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

tabs.css

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

Social Distancing

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

tabs.html

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

tabs.css

Now, it is showing more perfectly in our tab.

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.

tabs.js

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

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.

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.

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.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

JavaScript Loops: How they can save time!

Immutable data structures in games

Building a live clock wallpaper using Node.js

In 2020, go bundler-free

Image Slider with React Slick

Build Super Fast Apps in Node.js using Redis Cache

React in a Junior Developers perspective

Unit Testing Essentials for Express API: A Step-by-Step Guide

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
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

REST Full API

JavaScript Basics #1: Syntax and Program Structure

Express Server Setup for Beginners

How to Use Fusioncharts to Create Charts in ReactJS