Creating Firefox browser extensions -10

Welcome to part-10 of the series. You can find part-9 here.

We will continue building extensions, which show some type of image when we open a new tab.

The third tab extension will be called Motivational Tab. So, go ahead and create a folder MotivationalTab and inside it another folder icons. Inside that folder place two icons. You can get them from the github link at the end of this post.

Image for post
Image for post
icon

Now, create a file manifest.json inside the folder MotivationalTab and put the below content in it. It is quite similar to the file in previous extension and contains the parameter chrome_url_overides.

Image for post
Image for post
manifest.json

Now, this extension is exactly similar to the extension we made in part-9 and is based on my learning from the awesome free course JavaScript 30 from Wes Bos.

Go ahead and put the below in a file tabs.html in the same folder.

Next, let’s create the style file. Place a file tabs.css in the same folder and the below content in it.

We are taking five motivational random images from unsplash.com, as background for panel1, panel2, panel3, panel4 and panel5.

Create a new file tabs.js in the same directory. This is for the click animation as in previous version.

Image for post
Image for post
tabs.js

I had checked it by testing the temporary addon and it works perfectly.

Image for post
Image for post
Works Perfectly

So, it’s time to publish it in the mozilla addon store. I will follow the procedure from another of my blog in the series. The link is here.

I had submitted the addon and it is Awaiting Review from mozilla reviewers.

Image for post
Image for post
Submitted

Now, i want to make another similar addon called Simple Motivational Tab. The only thing different in it is, that it loads images from local and not unsplash.com. The benefit is the decrease in 1 seconds to load the tab.

The only difference from tabs.css is below. Rest of the code is same to the earlier two addons and can be taken from my github account.

Image for post
Image for post
tabs.css

Finally both of the addons were approved.

Image for post
Image for post
Both Approved

You can find both of these addons in this part and other addons, in the link https://addons.mozilla.org/en-US/firefox/user/15774633/

Please download them and tell me about the experience.

Image for post
Image for post
All addons

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