Creating Firefox browser extensions-15

Welcome to part-15 of the series. You can find part-14 here.

In this part we will create a new addon called Text Search. This addon will allow us to choose the search engine or platform of our choice. After that from within any page, select a word(s) and right-click and search. The word will be searched in the platform.

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

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

It is using the permissions for contextMenus and notifications, which we are going to use soon.

Image for post
Image for post
manifest.json

Next create a file index.html inside the folder. Put the below content in it. In this html file, we have link to the css and js files.

It is basically a form with different search engines having a radio button to select. It also have a button at the end to submit the selection.

Next, we will create the styles for this html file. So, create a file index.css in the same folder and the below content in it.

Next, we will create a file index.js in the same folder. Put the below content in it. This logic will run, when the user click on Submit button in the form.

Here, we are extracting out the name of the search engine from the form and then using sendMessage() to send it.

Image for post
Image for post
index.js

One of the important thing is that when the runtime.sendMessage() , the runtime.onMessage() will be fired on each page of the extension.

Image for post
Image for post
sendMessage

We will next create the background.js file. The event runtime.onMessage() will fire here by the runtime.sendMessage() event in index.js file.

Now in the function handleFormSelection we are first showing a notification with the new search engine, selected by the user. After that with the switch case, we are assigning the url with the selected search engine.

Image for post
Image for post
background.js

Now, we will add the other part of the logic. This is after the user had set the search engine, he will click on any text and right-click. Now, in the right click menu a new item Text Search will be created by contextMenus.create().

Now, the contextMenus.onClicked.addListener() will listen for the click and will run the function contextMenuAction(). We are making the urlWithText with the selected url, or default google. And also the text selected by the user.

After that we are opening a new tab with the urlWithText.

Image for post
Image for post
background.js

I had checked it by testing the temporary addon and it works perfectly.

Image for post
Image for post
Perfect

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

This complete part-15 of the series. You can add this addon to firefox from this link.

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