Creating Firefox browser extensions -3

Welcome to part-3 of the series. You can find part-2 here.

This part we will start by creating a simple firefox extension, which will show a browser notification every one hour. We are calling it Please Stand Up.

So, go ahead and open your code editor and inside a folder create a manifest.json file.

Write the below content inside the file. You might have noticed that it is quite similar to the manifest.json file, which we had created in part-1. The only difference is that we have browser_action also, which we are going to use soon in background.js file.

Image for post
Image for post
manifest.json

Also, create a folder icons and place a file icon.png inside it.

Image for post
Image for post
icon.png

Create a new file background.js and add the below content in it. Now, this is a quite familiar code. We are first creating an alarm, which fires every 60 minutes. There is a listener code, which shows the notification and get’s the random quote from getRandom().

Also, there is a listener to clear the notification by clicking on it.

Image for post
Image for post
background.js

The simple extension is complete, so it’s time to publish it in the mozilla addon store. I will follow the procedure, which i had explained in part-2 of this series.

My addon was finally approved and made it to the addon store.

Image for post
Image for post
Addon store

Next, we will start another mozilla extension called Dev Quotes. As the name suggests, it will send motivating quotes to developers every 60 minutes.

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

Image for post
Image for post
icon

Now, create a file manifest.json inside the folder DevQuotes and put the below content in it. The code is exactly similar to the one Please Stand Up as we will be using the same mechanism.

Image for post
Image for post
manifest.json

Next, create a file background.js and put the below content in it. Notice, that it is exactly the same code as in Please Stand Up , only the quotes changed.

Again it the time to publish this simple addon to the mozilla addon store. I will follow the procedure, which i had explained in part-2 of this series.

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

Image for post
Image for post
Awaiting Review

And the firefox addon was approved and made it way to the mozilla addons site https://addons.mozilla.org/en-US/firefox/user/15774633/

Image for post
Image for post
Dev Quotes

Next, we will create another similar mozilla extension called Drink Some Water. As the name suggests, it will send remainder to drink some water every 2 hours.

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

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

Image for post
Image for post
manifest.json

Next, create a file background.js and put the below content in it. It is more simpler than the earlier addons, as it shows only one quote.

Image for post
Image for post
background.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.

Image for post
Image for post
Drink Some Water

This complete part-3 of the series. You can find part-4 here.

You can find the code for the same in my github account here.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

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