Creating Firefox browser extensions-17

Image for post
Image for post
Photo by Prateek Katyal from Pexels

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

In this part we will create a new addon called Tab Utility. This addon will allow us to do a list of useful operations, like moving, closing, duplicate on a tab.

So, go ahead and create a folder TabUtility 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
TabUtility

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

It is using the permissions for tabs, which we are going to use soon.

Image for post
Image for post
manifest.json

Now, create a file tabs.html inside the same folder and put the below content in it.

Now, this file contains many different buttons which will do different tasks. Beside this in a div there is an id tabs-list, in which we are going to show list of all tabs.

Next, let’s style the html. Create a file tabs.css in the same directory.

a {
margin: 10px;
display: inline-block;
}
.switch-tabs {
padding-left: 10px;
}
.switch-tabs a {
display: block;
}
.panel {
margin: 5px;
}
.text-section-header{
font-size:25px;
font-weight: bold;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.flex__box{
display: flex;
flex-direction: column;
margin-top: 10px;
}
.info__text{
color: blue;
font-size: 20px;
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
}
.flex__item{
margin-bottom: 5px;
}
button {
box-shadow:inset 0px 1px 0px 0px #e184f3;
background:linear-gradient(to bottom, #c123de 5%, #a20dbd 100%);
background-color:#c123de;
border-radius:6px;
border:1px solid #a511c0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:15px;
font-weight:bold;
padding:9px 23px;
text-decoration:none;
text-shadow:0px 1px 0px #9b14b3;
}
button:hover {
background:linear-gradient(to bottom, #a20dbd 5%, #c123de 100%);
background-color:#a20dbd;
}
button:active {
position:relative;
top:1px;
}

To check the styles, i had loaded the addon temporarily and it looks like below.

Image for post
Image for post
Tab Utility

Now, we will start creating the logic in tabs.js file. The first thing we will develop is to show the links to all open tabs, in Switch to tab section.

Here, the program will run from line 22, which gets fire when the DOM is parsed. The details of DOMContentLoaded can be found here.

It will run the function listTabs(), which will first run the function getCurrentWindowTabs(). Now, this function uses tabs.query({ currentWindow: true }) to get list of all active tabs. The details can be found here.

After that we are just getting the div tabs-list, and appending all the tabs to it in an anchor tag. We have a limit of 10 tabs only.

Image for post
Image for post
tabs.js

Now, if we reload our temporary extension, we can find all tabs list in Switch to tab section.

Image for post
Image for post
Switch to tab

Next, we will write the logic for the buttons starting with Move active tab section.

We have an event-listener on the click event. If the button for Beginning will be clicked, the the if statement at line 38 will be run. Here, we are first calling a function callOnActiveTab(), which will return the detail of the tab from tabs array.

In browsers we have a feature of Pin. We can right-click any tab and click on Pin. It put the tab to the beginning. So, we are first checking if the tab is not pinned, then we are calling a function firstUnpinnedTab(). It returns the index of the tab.

After that we are using tabs.move() to move the tab to beginning by assing it’s id and index.

The logic of moving tab to the end is also almost same and we are moving it to index -1, if normal tab. If it is from a series of pinned tab, we are moving it to end of it in line 50.

Image for post
Image for post
tabs.js

The function for firstUnpinnedTab() and the listener which fires on moving the tab is below.

Image for post
Image for post
tabs.js

This addon have many other features left, which i will complete in part-18. You can find part-18 here.

This complete part-17 of the series.

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