DEV Community

Cover image for Creating Firefox browser extensions-22
Nabendu
Nabendu

Posted on • Originally published at nabendu.blog

Creating Firefox browser extensions-22

Alt Text

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.

SearchTabsSearchTabs

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.jsonmanifest.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.jsbackground.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.htmlfind.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.

    html {
        background:#018DED url([http://unsplash.it/1500/1000?image=881](http://unsplash.it/1500/1000?image=881));
        background-size:cover;
        font-family:'helvetica neue';
        text-align: center;
    }

    legend {
        background-color: #000;
        color: #fff;
        padding: 3px 6px;
    }

    input {
        margin: .5rem 0;
        padding: .5rem;
        border-radius: 4px;
        border: 1px solid #ddd;
        width:22%;
    }

    input:invalid + span:after {
        content: '✖';
        color: #f00;
        padding-left: 5px;
    }

    input:valid + span:after {
        content: '✓';
        color: #26b72b;
        padding-left: 5px;
    }

    #result-list{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        list-style: none;
    }

    .listyle{
        color: white;
    }

    .count__text {
        font-size: 26px;
    }
    .submit {
     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;
    }
    .submit:hover {
     background:linear-gradient(to bottom, #a20dbd 5%, #c123de 100%);
     background-color:#a20dbd;
    }
    .submit:active {
     position:relative;
     top:1px;
    }

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

Search TabsSearch 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.jsfind.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.jsbackground.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.jsfind.js

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

GifGif

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.

AwaitingAwaiting

This complete part-22 of the series. You can install the addon in your firefox browser from here

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

Top comments (4)

Collapse
 
maxdevjs profile image
maxdevjs

Interesting enough... I am starting from the end: this is the first post about this series that I find in my feed :O

Very timely, I am building a few simple extensions for personal use and I am sure your articles will help me a lot.

Collapse
 
nabendu82 profile image
Nabendu

Thanks for the motivating word. Always love when my series help someone.

Collapse
 
maxdevjs profile image
maxdevjs

I saw you have several series... going to have fun with them, thank you :)

Thread Thread
 
nabendu82 profile image
Nabendu

I hope you enjoy them also. Thank you :)