Creating Firefox browser extensions-22

Image for post
Image for post
Photo by Jon Tyson on Unsplash

Welcome to part-22 of the series. You can find part-21 here.

In this part we will create a new addon called Search Tabs. This addon allows the user to search any word across all your open tabs.

So, go ahead and create a folder SearchTabs and inside it another folder icons. Inside that folder place three icons. You can get them from the github link at the end of this post.

Image for post
Image for post
SearchTabs

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

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

Image for post
Image for post
manifest.json

Next, we will create the background.js file. Here, we will open the file find.html in a new tab, once we click the icon. This is been done through the browserAction.onClicked listener at Line 25.

Rest of the code we will understand soon, after the find.html and other files are created.

Image for post
Image for post
background.js

Let’s now create find.html file in the same folder and put the below content in it.

It is a simple html file, with a search bar and a button. It also have an id result-list, where we are going to list all the result.

Image for post
Image for post
find.html

Let’s now create the styles for this html file. Create a file find.css in the same folder and put the below content in it.

To check the styles , i had loaded the addon temporarily and after clicking on the addon icon the new tab, looks like below.

Image for post
Image for post
Search Tabs

Now, create the file find.js in the same folder and add the below content in it. Now at Line 1, we are getting the access to the background page by extension.getBackgroundPage().

After that in Line 3, we are adding an event listener for the Submit button. So, when we type something in the search bar and click on Submit button, Line 5 fires the find() method in background.js file. It passes the search item as a parameter for the find() method.

Image for post
Image for post
find.js

Let’s again go back to the background.js file and understand the working of the find() method.

Now, in Line 3 we are finding the url for the find.html file by runtime.getURL(). After that in Line 4 we are finding details of all of the tabs by tabs.query({}).

Then we are looping through all tabs, but but excluding the current tab in Line 7.

Now, we call the find API on each tab. We’ll wait for the results for each, tab before progressing onto the next one by using await.

After getting the results, send a message back to the find.html page using runtime.sendMessage() in Line 12.

We are also sending a runtime.sendMessage() in Line 1, when the find() is executed.

Also, we are also highlighting the text in each tab by find.highlightResults().

Image for post
Image for post
background.js

Back to find.js the runtime.onMessage event listener, fires first when we receive clear-results from background.js file. It will run the if statement at line 13 and make the result-list id as blank.

After that we will receive found-result, from background.js file. It will run the if statement in Line 16 and add the url and the count to the result-list id. It will fire several time for each tab.

Image for post
Image for post
find.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-22 of the series. You can install the addon in your firefox browser from here.

You can find part-23 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