Creating Firefox browser extensions-22

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.

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.

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.

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.

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.

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.

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().

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.

find.js

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

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.

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.

--

--

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