Creating Firefox browser extensions-16
Tags: javascript, showdev, webdev, beginners
Published: 2020-04-29 10:13:29

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9mppm0f82uciuydyx8rx.jpeg)

Welcome to part-16 of the series. In this part we will create a new addon called **Domain Blocker**. This addon will blocks requests to any website that are in the user-defined list.

So, go ahead and create a folder **DomainBlocker** 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.

![DomainBlocker](https://cdn-images-1.medium.com/max/2880/1*dNTb4aS_TBMhgulSgxRH7Q.png)*DomainBlocker*

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

It is using the permissions for **proxy, storage** and **all urls**, which we are going to use soon.

![manifest.json](https://cdn-images-1.medium.com/max/2880/1*_4K0gTd5MtrbeCaziBWHbQ.png)*manifest.json*

Create a new folder **options** inside, the folder **DomainBlocker** and create a file **options.html** inside it.

In this html file, we have link to the css and js files and two span and a textarea to enter the hosts.

![options.html](https://cdn-images-1.medium.com/max/2880/1*Xw9_NiKYy1j2SZ0JP0YrHA.png)*options.html*

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

![options.css](https://cdn-images-1.medium.com/max/2880/1*y_Gxlfvkdnt_cMld2EG6ew.png)*options.css*

Now, we will create the logic for this options file. So, create a file **options.js** in the same folder and put the below content in it.

In this we are first selecting the textarea id **blocked-hosts** at Line 1. After that at Line 25, we have an event-listener which fires on any change in the textarea and runs a function **storeSettings**(). In this function, we are using split to change the newline string, into an array of string. After that we are setting it to the local storage.

We also have an **browser.storage.local.get()** on line 22, fired when the options page is opened. It runs a function **updateUI**(), which sets the textarea value from **blockedHosts** value. The **blockedHosts** is an array of strings, so we change it to string separated by newline.

![options.js](https://cdn-images-1.medium.com/max/2880/1*o92Ms0gZGSBVBpMG3q9sJA.png)*options.js*

Now, it’s time to make the main background script. Create a new folder **background** inside, the folder **DomainBlocker** and create a file **proxy-handler.js** inside it.

First the [runtime.onInstalled](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onInstalled) is executed when the extension is installed and it sets the **blockedHosts** array with **[“example.com”, “example.org”]**, in the local storage.

Next, at line 9 the local storage is fetched into **blockedHosts** array. After that at line 15 we have a local storage onChanged event-listener, which changes the blockedHosts array with the new value.

On Line 19 , we listen for a request to open a webpage and call the **handleProxyRequest**(). Inside this function we are first extracting the url the user is attempting to go. After that we are checking whether it is in **blockedHosts** array. If it is there we are blocking it, other-wise passing it.

![proxy-handler.js](https://cdn-images-1.medium.com/max/2880/1*z-lY1cLQGBikE_YwvQCGcA.png)*proxy-handler.js*

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

![Working](https://cdn-images-1.medium.com/max/2000/1*9qd82jiGSqdvLYTet02WCA.gif)*Working*

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](https://dev.to/nabendu82/creating-firefox-browser-extensions-2-3gpn).

As Domain Blocker name was already taken, i had to change the name of the addon to **List Domain Blocker**.

![List Domain Blocker](https://cdn-images-1.medium.com/max/2880/1*vJmNRA2kWG3wRm6-M1x4vQ.png)*List Domain Blocker*

This complete part-16 of the series. You can add this addon to firefox from [here](https://addons.mozilla.org/en-US/firefox/addon/list-domain-blocker/).

You can find the code for the same in my github account [here](https://github.com/nabendu82/Addons).