Creating Firefox browser extensions -8
Tags: javascript, webdev, showdev, beginners
Published: 2020-04-07 13:11:03

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

Welcome to part-8 of the series. In this part we will make some more firefox extensions. We will create some tab addons. These addons shows some predefined pages when the user opens a new tab.

The first extension will be called **Blurred Tab**. So, go ahead and create a folder **BlurredTab** and inside it another folder **icons**. Inside that folder place two icons. You can get them from the github link at the end of this post.

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

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

Notice, the new parameter **chrome_url_overides**. It contains **newtab**, which will override the content of the new tab and replace with a file **tabs.html**.

You can read more about it this mdn doc [here](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/chrome_url_overrides).

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

Next, let’s create the file **tabs.html**. It is a simple html file and contains a random image generated from unsplash and also a range input.

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

Next, let’s give some styles to this html. Create a file **tabs.css** in the same folder and put the below content in it. As, you can see we are making the image blur by default.

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

Now, if we load the extension in firefox and then open a new tab, we can see the below.

You can learn how to open an extension for testing in my previous post [here](https://medium.com/@nabendu82/creating-firefox-browser-extensions-for-covid-19-6-1d43998b42c3).

![Blurred Tab](https://cdn-images-1.medium.com/max/2880/1*cYik2f_-wZ0qRQW2x7ggvg.png)*Blurred Tab*

Next, we will add the javascript file to control the input type range. Create a new file **tabs.js** in the same directory.

Now, here we are first selection the **input** which is inside the **controls** div. Now, we add the **event listener** to fire when we move the range input. It runs the function **handleUpate()**.

Inside the function **handleUpdate( )** we are using the data-sizing , name and the value property, from our html input tag.

The **this.dataset.sizing** is equal to **px** and **this.name** is equal to blur. The **this.value** is initially 10 and gets changed, to the value from the slider.
```
    <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
```
Now, we are using **setProperty** to change **` — ${this.name}`** ,which is the variable **— blur** from the css file. We are changing it to a value an px like **5px**.

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

Now, reload the extension to test the changes and again open, a new tab. This time move the slider to the left to reveal the image. If you move the slider to the right, it will blur the image more.

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

It is working perfectly, 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://medium.com/@nabendu82/creating-firefox-browser-extensions-2-ddf1f236f401).

I had submitted the addon and it is Awaiting Review from mozilla reviewers.

![Blurred Tab](https://cdn-images-1.medium.com/max/2880/1*7HqUR1tY23gByJa3nD9AYg.png)*Blurred Tab*

This complete part-8 of the series. 

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