Creating Firefox browser extensions-22

#javascript #webdev #showdev #beginners

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.

    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 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