Creating Firefox browser extensions for covid-19–5

Photo by John Cameron on Unsplash

Welcome to part-5 of the series. You can find part-4 here.

As in the previous part, i will make two more firefox extensions to help us in this covid-19 crisis situation.

One of the best source to track covid-19 situation, is the Worldometers site https://www.worldometers.info/coronavirus/

Worldometers

So, the firefox extension which i am going to create will give an icon on firefox. On clicking various button, we can get various worldometer data regarding the country.

This extension will be called Covid-19 World Tracker. So, go ahead and create a folder CovidWorldTracker 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.

logo

Now, create a file manifest.json inside the folder CovidWorldTracker and put the below content in it. We are not using any background script here, but a browser action. On clicking the icon we will open an html file main.html

manifest.json

Next, create a file main.html inside the folder CovidWorldTracker and put the below content in it.

In this file the main part is the iframe tag, which will load different part of the worldometer site on clicking of the anchor tag. On loading it will show the main site or the world data.

Also, we have a css file which will load the styles.

main.html

But first load this much in the debugger at about:debugging#/runtime/this-firefox to check how our extension is working.

After going to the above url click on Load Temporary Add-on.. button

debugger

It will open the pop-up window to select the file. In that select the manifest.json file for this extension.

manifest.json

Now, the extension will be loaded temporarily to test.

extension

On clicking the icon, we can see the style problem.

Style problem

Let’s fix it my adding a main.css file in the folder CovidWorldTracker and put the below content in it.

It will now show our extension with the perfect look.

Worldometer

It is working perfectly, so it’s time to publish it in the mozilla addon store. We will follow the procedure explained in part-2 of this series.

I had followed the procedure and submitted the firefox extension and it is Awaiting Review now.

Awaiting Review

Finally, this Covid-19 firefox addon got approved. You can add it to firefox from https://addons.mozilla.org/en-US/firefox/addon/covid-19-world-tracker/

Covid-19 World Tracker

This complete part-5 of the series. You can find part-6 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