Creating Firefox browser extensions-21

Welcome to part-21 of the series. You can find part-20 here.

In this part we will create a new addon called Delete Everything. This addon allows the user to delete all type of browsing data, including history, passwords, downloads and service workers.

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

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

It is using the permissions for browsingData, notification and storage which we are going to use soon.

Image for post
Image for post
manifest.json

Since, we are creating an Option UI, create an options folder and add a file options.html inside it.

For the styles, create a file options.css in the same folder and add the below content in it.

To check the styles , i had loaded the addon temporarily and the options page looks like below.

Image for post
Image for post
Options Page

Before creating the options.js file, we will create the background.js file. Create the file background.js in the root directory and put the below content in it.

Now the script starts from Line 16, where it get the data from local storage. With that it calls the function checkStoredSettings(), where we check whether we have stored settings. If we don’t, then store the default settings.

Image for post
Image for post
background.js

Now, create the file options.js inside the options folder and put the below content in it.

On opening the options page, we are fetched stored settings and called the function updateUI() in Line 20. Inside the function, we are selecting the id for option in Line 2 and restoring it with restoredSettings.

After that we are selecting all the checkboxes and restoring them with restoredSettings.

Image for post
Image for post
options.js

After that let’s add the logic for click on the Save preferences button. Here, when we click on the button then the function storeSettings() will be called. Here at line 34 and 35 we are calling function getSince() and getTypes() respectively.

After that we are setting the values to local storage in line 36.

Image for post
Image for post
options.js

Now, we will go back to background.js and add the final logic to clear the browsing data.

When we click the icon to delete the data, it will get the local storage data and call the function forget(). The function run the browsingData.remove() from line 50, which is used to remove the options from the time, which we pass to it.

We take the time from getSince() and options from getTypes(). Once the data is removed, we call the function notify() to display an alert box confirming the delete.

Image for post
Image for post
background.js

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

Image for post
Image for post
Gif

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

This complete part-21 of the series. You can find part-22 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