Creating Firefox browser extensions for covid-19–5
Tags: javascript, showdev, webdev, beginners
Published: 2020-04-03 13:23:19

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/34pl9qg4ayvcs5vxykbp.jpeg)

Welcome to part-5 of the series. 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/](https://www.worldometers.info/coronavirus/)

![Worldometers](https://cdn-images-1.medium.com/max/2880/1*CykCHuxZB2e_UlhHodVHEA.png)*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](https://cdn-images-1.medium.com/max/2880/1*pb6vzRrNb5Ob3zk5IpgBog.png)*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](https://cdn-images-1.medium.com/max/2880/1*W4dFdJoliUrJX2ecAhlQgw.png)*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](https://cdn-images-1.medium.com/max/2880/1*8RkJXI55z1NXL6X0yJbnsw.png)*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](https://cdn-images-1.medium.com/max/2880/1*UH2b4hnoLbaE9mQ5JY9BDg.png)*debugger*

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

![manifest.json](https://cdn-images-1.medium.com/max/2880/1*eBnAeppqBoauDGrRx5GRpw.png)*manifest.json*

Now, the extension will be loaded temporarily to test.

![extension](https://cdn-images-1.medium.com/max/2880/1*GxY-xSyp-Z--8asbA9AWEw.png)*extension*

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

![Style problem](https://cdn-images-1.medium.com/max/2880/1*yIlS5Yb135YVj50U3ioLng.png)*Style problem*

Let’s fix it my adding a **main.css** file in the folder **CovidWorldTracker** and put the below content in it.
```
    html, body {
     background: #ffc600;
    }

    iframe {
     width: 750px;
     height: 450px;
    }

    .panel {
     margin: 5px;
    }

    .text-section-header{
        font-size:25px;
        font-weight: bold;
        text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
        0px 8px 13px rgba(0,0,0,0.1),
        0px 18px 23px rgba(0,0,0,0.1);
    }

    .flex__box{
        display: flex;
        flex-direction: column;
        margin-top: 10px;
    }

    .info__text{
        color: blue;
        font-size: 20px;
        text-shadow:  0px 4px 3px rgba(0,0,0,0.4),
                        0px 8px 13px rgba(0,0,0,0.1),
                        0px 18px 23px rgba(0,0,0,0.1);
    }

    .flex__item{
        margin-bottom: 5px;
    }
    a {
     -moz-box-shadow:inset 0px 1px 0px 0px #e184f3;
     -webkit-box-shadow:inset 0px 1px 0px 0px #e184f3;
     box-shadow:inset 0px 1px 0px 0px #e184f3;
     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c123de), color-stop(1, #a20dbd));
     background:-moz-linear-gradient(top, #c123de 5%, #a20dbd 100%);
     background:-webkit-linear-gradient(top, #c123de 5%, #a20dbd 100%);
     background:-o-linear-gradient(top, #c123de 5%, #a20dbd 100%);
     background:-ms-linear-gradient(top, #c123de 5%, #a20dbd 100%);
     background:linear-gradient(to bottom, #c123de 5%, #a20dbd 100%);
     background-color:#c123de;
     -moz-border-radius:6px;
     -webkit-border-radius:6px;
     border-radius:6px;
     border:1px solid #a511c0;
     display:inline-block;
     cursor:pointer;
     color:#ffffff;
     font-family:Arial;
     font-size:15px;
     font-weight:bold;
     padding:9px 23px;
     text-decoration:none;
     text-shadow:0px 1px 0px #9b14b3;
    }

    a:hover {
     background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #a20dbd), color-stop(1, #c123de));
     background:-moz-linear-gradient(top, #a20dbd 5%, #c123de 100%);
     background:-webkit-linear-gradient(top, #a20dbd 5%, #c123de 100%);
     background:-o-linear-gradient(top, #a20dbd 5%, #c123de 100%);
     background:-ms-linear-gradient(top, #a20dbd 5%, #c123de 100%);
     background:linear-gradient(to bottom, #a20dbd 5%, #c123de 100%);
     background-color:#a20dbd;
    }
```
It will now show our extension with the perfect look.

![Worldometer](https://cdn-images-1.medium.com/max/2880/1*u9Uh74szpc38IhHE1nmrsA.png)*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](https://dev.to/nabendu82/creating-firefox-browser-extensions-2-3gpn) of this series.

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

![Awaiting Review](https://cdn-images-1.medium.com/max/2880/1*3GJAar1bRcK8zh49FIdygA.png)*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/](https://addons.mozilla.org/en-US/firefox/addon/covid-19-world-tracker/)

![Covid-19 World Tracker](https://cdn-images-1.medium.com/max/2880/1*zJyFjDywIc3uQFK4tbVbdQ.png)*Covid-19 World Tracker*

This complete part-5 of the series. 

You can find the code for the same in my github account [here](https://github.com/nabendu82/Addons).