Creating Firefox browser extensions-20

Image for post
Image for post
Photo by Fab Lentz on Unsplash

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

In this part we will create a new addon called Website History Delete. This addon allows the user to delete history of a particular website, which will include all it’s links.

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

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

It is using the permissions for activeTab, history and tabs, which we are going to use soon.

We are also using page_action here instead of the usual browser_action. Now, the difference is that it will create the icon inside the browser’s URL bar, instead of a general icon.

Image for post
Image for post
manifest.json

Next create a file history.html inside the same folder. It is a simple html file, in which we will show the last 15 visits to the website and sub-domain. We will be showing it with id=”history”.

Image for post
Image for post
history.html

Next, let’s add some styles for the above html file in history.css file.

html, body {
margin: 0.3em;
width: auto;
min-width: 250px;
max-width: 500px;
background: linear-gradient(90deg, #FFFFE0 0%,#FFFACD 48%,#FFFF00 100%);
}

Before creating the history.js file, we will create the background.js file.

We are first using tabs.onUpdated listener, which will fire when the user navigates to a new URL in a tab.

After that we are matching every tab except the about: pages, which are used for debugging. We are then using pageAction.show() to show the addon.

Image for post
Image for post
background.js

To check the styles and background script, i had loaded the addon temporarily and it looks like below.

Image for post
Image for post
History Delete

Now, we will create the main logic in history.js file. First we will add three helper functions in it.

Image for post
Image for post
history.js

Next, we will write the code to show the links. When the page is loaded we are finding the current tab, by using tabs.query().

Image for post
Image for post
history.js

We are calling get_hostname() at line 28 above. To check exactly what it sends and receives, i had added some console.log()

Image for post
Image for post
history.js

After that gone to a site and clicked on the History delete icon.

Image for post
Image for post
History Delete

Now, in the log it shows as below. As it is clear from the log, we pass the url https://addons.mozilla.org/en-US/firefox/addon/domain-history-delete/ to the function get_hostname(). It also calls another function set_domain(), and we get addons.mozilla.org in the hostname.

Image for post
Image for post
log

We are then using history.search() to get all the domains, matching our hostname. We are limiting it to 15, as the list can be very long. After that we are looping through results array and adding each link to an li tag.

Image for post
Image for post
history.js

Next, we will add the code which will trigger when we hit the clear link. The clearAll(), is quite similar to the getActiveTab() and uses get_hostname and searchingHistory.

After getting the results array, it loop through it and get the individual url and delete it from browser history with history.deleteUrl().

Image for post
Image for post
history.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

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