loading...
Cover image for Creating Firefox browser extensions for covid-19–4

Creating Firefox browser extensions for covid-19–4

nabendu82 profile image Nabendu Originally published at nabendu.blog ・3 min read

firefox-addons (26 Part Series)

1) Creating Firefox browser extensions -1 2) Creating Firefox browser extensions -2 3 ... 24 3) Creating Firefox browser extensions -3 4) Creating Firefox browser extensions for covid-19–4 5) Creating Firefox browser extensions for covid-19–5 6) Creating Firefox browser extensions for covid-19–6 7) Creating Firefox browser extensions -7 8) Creating Firefox browser extensions -8 9) Creating Firefox browser extensions -9 10) Creating Firefox browser extensions -10 11) Creating Firefox browser extensions for covid-19–11 12) Creating Firefox browser extensions- 12 13) Creating Firefox browser extensions-13 14) Creating Firefox browser extensions-14 15) Creating Firefox browser extensions-15 16) Creating Firefox browser extensions-16 17) Creating Firefox browser extensions-17 18) Creating Firefox browser extensions-18 19) Creating Firefox browser extensions-19 20) Creating Firefox browser extensions-20 21) Creating Firefox browser extensions-21 22) Creating Firefox browser extensions-22 23) Creating Firefox browser extensions-23 24) Creating Firefox browser extensions-24 25) Creating Firefox browser extensions-25 26) Creating Firefox browser extensions-26

Alt Text

Welcome to part-4 of the series. As, the title tells i will be creating some firefox extensions to help in the covid-19 crisis. Since, there are already some good sites which are helping us to track the infection, i decided to build some extensions.

As all of us know that how important to wash our hands in this crisis, but we all forget to do the same when busy working from home.

This extension will be called Wash Your hands and will be similar to the 3 extensions, created in part-3.

So, go ahead and create a folder WashYourhands and inside it another folder icons. Inside that folder place an icon and name it icon.png

icon.pngicon.png

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

manifest.jsonmanifest.json

Next, create a file background.js and put the below content in it.

background.jsbackground.js

Again will to publish this addon to the mozilla addon store and 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.

AddonAddon

The next extension which i want to create is Covid-19 Advices. These are the advice given on WHO site https://www.who.int/emergencies/diseases/novel-coronavirus-2019/advice-for-public

So, these advices will be shown randomly in browser notification.

So, go ahead and create a folder Covid-19Advices and inside it another folder icons. Inside that folder place an icon and name it icon.png

Covid-19AdvicesCovid-19Advices

Now, create a file manifest.json inside the folder Covid-19Advices and put the below content in it.

manifest.jsonmanifest.json

Next, create a file background.js and put the below content in it. The getRandom() is a bit different then earlier function, as it’s an array of object. When we are calling it in onAlarm.addListener, we are getting both title and message.

background.jsbackground.js

It’s time to publish this covid-19 addon to the mozilla addon store and 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.

Covid-19 AdvicesCovid-19 Advices

Finally, both of my Covid-19 addons are approved and you can add it to firefox from https://addons.mozilla.org/en-US/firefox/user/15774633/

So, go ahead and share these covid-19 addons.

Covid-19 addonsCovid-19 addons

This complete part-4 of the series. You can find the code for the same in my github account here.

firefox-addons (26 Part Series)

1) Creating Firefox browser extensions -1 2) Creating Firefox browser extensions -2 3 ... 24 3) Creating Firefox browser extensions -3 4) Creating Firefox browser extensions for covid-19–4 5) Creating Firefox browser extensions for covid-19–5 6) Creating Firefox browser extensions for covid-19–6 7) Creating Firefox browser extensions -7 8) Creating Firefox browser extensions -8 9) Creating Firefox browser extensions -9 10) Creating Firefox browser extensions -10 11) Creating Firefox browser extensions for covid-19–11 12) Creating Firefox browser extensions- 12 13) Creating Firefox browser extensions-13 14) Creating Firefox browser extensions-14 15) Creating Firefox browser extensions-15 16) Creating Firefox browser extensions-16 17) Creating Firefox browser extensions-17 18) Creating Firefox browser extensions-18 19) Creating Firefox browser extensions-19 20) Creating Firefox browser extensions-20 21) Creating Firefox browser extensions-21 22) Creating Firefox browser extensions-22 23) Creating Firefox browser extensions-23 24) Creating Firefox browser extensions-24 25) Creating Firefox browser extensions-25 26) Creating Firefox browser extensions-26

Posted on May 14 by:

nabendu82 profile

Nabendu

@nabendu82

Fullstack JS dev, Upcoming Author "Gatsby Cookbook"

Discussion

markdown guide