Creating Firefox browser extensions-18

Welcome to part-18 of the series. You can find part-17 here.

We will complete our addon Tab Utility, which we had started building in part-17.

Let’s add functionality to other buttons now. Add the highlighted lines in tabs.js file. All of them are self-explanatory and using various browser functions, where we are only passing the unique id of the tab.

The only difference is the tabs-alertinfo, where we are looping through the tab and displaying it in an alert.

Image for post
Image for post
tabs.js

I wanted to add another feature in the Tab Utility addon and that is the zoom features. Let’s first add the html in tabs.html file.

Image for post
Image for post
tabs.html

Next, let’s add code for the same in tabs.js file. We will first add the constants at the top of the file.

Image for post
Image for post
tabs.js

Then we will add the code for all three new buttons. The code is quite simple and we are using two browser functions — tabs.getZoom() and tabs.setZoom()

Image for post
Image for post
tabs.js

One last thing to do in this file, is to add logic for switch-tabs. We had added logic to show the links for each tab, but we need the code to go to the tab on click on the link.

In this highlighted code, we are first getting the tabId from the clicked link. After that we are looping through all the tabs, and going to the tab whose id is equal to tabId.

Image for post
Image for post
tabs.js

Now, all the features are complete but i want to add a feature, to show the number of tabs opened above the icon. We will add the code for the same in a new file background.js.

The updateCount() functions runs first time from line 29, when the browser is opened. After that there are two event listener — one is fired when a new tab is added, other is fired when a tab is closed.

Both of them update the tab count number, and we update it by browserAction.setBadgeText() and browserAction.setBadgeBackgroundColor()

Also, notice that there is a bug in mozilla code, which is not yet resolved. So, we are using a work-around in line 8.

Image for post
Image for post
background.js

So, our code is complete. I had checked it by testing the temporary addon and it works perfectly.

Image for post
Image for post
Gif

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.

Image for post
Image for post
Awaiting

This complete part-18 of the series. You can find part-19 here.

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

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