Creating Firefox browser extensions for covid-19–6
Tags: javascript, webdev, showdev, beginners
Published: 2020-04-04 06:33:59

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

Welcome to part-6 of the series. As in the previous two parts, i will make one more firefox extensions to help us in this covid-19 crisis situation.

This firefox extension is India specific. One of the best source to track covid-19 situation in India, is the **Covid-19 Tracker **site [https://www.covid19india.org/](https://www.covid19india.org/)

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

This extension will have the same code structure as the extension, which i created in part-5. It will also show this site in tab on clicking on the button.

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

I am getting these awesome free icons from this site [https://www.flaticon.com/](https://www.flaticon.com/home) and the icons in this extension by this Icons made by this [author](https://www.flaticon.com/authors/freepik).

![icons](https://cdn-images-1.medium.com/max/2880/1*G7hMmCzy9FiUuLlvsclbsQ.png)*icons*

Now, create a file **manifest.json** inside the folder **CovidIndiaTracker** and put the below content in it. It will be similar to our earlier extension and on clicking the icon we will open an html file **main.html**

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

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

In this file the main part is the iframe tag, which will load the **Covid-19 India tracker** site by default. There are no button, so it’s a simple html file.

![main.html](https://cdn-images-1.medium.com/max/2880/1*Hy8v8r7ldr6OzSBjoFykgw.png)*main.html*

Let’s also add the style by creating a file **main.css** inside the folder **CovidIndiaTracker** and put the below content in it.

![main.css](https://cdn-images-1.medium.com/max/2880/1*BeX_Mfg_41kfwu6jgnuiPA.png)*main.css*

Let’s test it first on our local environment, before publishing to mozilla addon site. In the web browser goto **about:debugging#/runtime/this-firefox** to check how our extension is working.

![debugger](https://cdn-images-1.medium.com/max/2880/1*Lf2jgrNBWQkfABYnUPP14Q.png)*debugger*

After going to the above url click on **Load Temporary Add-on..** button. It will open the pop-up window to select the file. In that select the **manifest.json** file for this extension.

![debugger](https://cdn-images-1.medium.com/max/2880/1*iGI4YtPm5WUeppVMJuz1pg.png)*debugger*

Now, the extension will be loaded temporarily to test.

![Testing](https://cdn-images-1.medium.com/max/2880/1*fvPYpuCI27ZnVQSdOQfbxw.png)*Testing*

On clicking the icon, we can see our extension working properly.

![Working](https://cdn-images-1.medium.com/max/2880/1*w_8nmCQ83tAJkga9dmpRjg.png)*Working*

It is working perfectly, so it’s time to publish it in the mozilla addon store. I will show the procedure this time.

We need to go to our folder, where all of code and other files are and select all of them, and click on **Compress**.

![Compress](https://cdn-images-1.medium.com/max/2880/1*u6cCnKBOPLW8-SESZOounA.png)*Compress*

It was compresses as **Archives.zip**, which i had changed to **CovidIndiaTracker.zip**. Now, time to goto the addon submission page at [https://addons.mozilla.org/en-US/developers/addons](https://addons.mozilla.org/en-US/developers/addons)

![Submit](https://cdn-images-1.medium.com/max/2878/1*td-nf7DwscTjUuuVsvNpqQ.png)*Submit*

After clicking on **Submit a New Add-on** button on the above screen, we will be taken to below screen. Once you click on **Continue**, it will take to the next screen

![Submit](https://cdn-images-1.medium.com/max/2880/1*h44C92Uc0H1nbSZLuS5BZQ.png)*Submit*

In this screen first select both the checkboxes to submit on both **Firefox** and **Firefox for Android**. After that click on **Select a file…** button and it will, open the explorer to select the file. Select the zip file we had created some steps back and then click on **Open** button.

![Upload](https://cdn-images-1.medium.com/max/2880/1*uUM_f7ThEAd6hxJFcLuG_w.png)*Upload*

On uploading, it was error free but contained 3 warning. I can go froward with the warning, but wanted to check them. So, i clicked on **See full validation report** link

![Completed](https://cdn-images-1.medium.com/max/2880/1*0Sk5ZegfGEevla6ngCYFcA.png)*Completed*

It will open the warning in a new tab. These warnings are due to some hidden not necessary files created by MacOS. I can close this tab and live with them.

![Warning](https://cdn-images-1.medium.com/max/2880/1*XQpBv3kOGl3v3LHcbEipGA.png)*Warning*

On clicking on the Continue button in the previous screen, we will get the below screen. Here select **No** in radio button and then **Continue** button.

![No](https://cdn-images-1.medium.com/max/2880/1*frPiZDe3N6e4Yp8CReRhvA.png)*No*

After that in the next page, we need to fill some information about the addon.

![Info](https://cdn-images-1.medium.com/max/2880/1*FbNQoBpe1L-2QKBHhAFkZA.png)*Info*

And then some more information and click on **Submit Version** button.

![More info](https://cdn-images-1.medium.com/max/2880/1*_q6-kvfMhFnstToHnTWewQ.png)*More info*

Click on the **Manage Listing** button in this screen.

![Manage Listing](https://cdn-images-1.medium.com/max/2880/1*mSROmHQLRIUzCumP0esRZA.png)*Manage Listing*

We need to add **icon** and **screenshot** of our addon, so once we click on **Edit** button next to the Images.

![Images](https://cdn-images-1.medium.com/max/2880/1*fPBBAyGvWPNKkbnzvO5onw.png)*Images*

You will get the below to add both.

![Icon and screenshot](https://cdn-images-1.medium.com/max/2880/1*TZTbK18mvCfIRMwLlei-tw.png)*Icon and screenshot*

Upload the icon from the icons folder in your project and upload a nice screenshot from the testing.

It will now show as below. Click on the **Save Changes** button.

![Uploaded](https://cdn-images-1.medium.com/max/2880/1*KD9AgdQs7XlCT2uk7PxSiQ.png)*Uploaded*

I also need to add some tags. So, i had clicked on the **Edit** next to **Additional Details** section and filled the tags. After that click on the **Save Changes** button.

![tags](https://cdn-images-1.medium.com/max/2880/1*zXV2_BqpnOjcNuciU1BlpQ.png)*tags*

Now, we are done so click on the **MY ADD-ONS** link on the menu.

![My addon](https://cdn-images-1.medium.com/max/2880/1*u1_Cdc0kMvGaa4KyrfCGxg.png)*My addon*

It will take us back to the page from where we had started. We can see our Addon is in **Awaiting Review** phase.

![Awaiting Review](https://cdn-images-1.medium.com/max/2880/1*JKB3hOZ5mlGP7kRgERa8hA.png)*Awaiting Review*

This complete part-6 of the series. You can find the code for the same in my github account [here](https://github.com/nabendu82/Addons).