Creating Firefox browser extensions-13
Tags: javascript, showdev, webdev, beginners
Published: 2020-04-23 10:01:07

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

Welcome to part-13 of the series. In this part we will create a new addon called **Website Stats**. It will show statistics about the web-pages, which you had visited. It will also save the data in local storage, so that it is saved. This extension in useful for people, who want to find out how many time they visited social network like facebook or other addictive sites like netflix. It can help them to get out of the addiction.

So, go ahead and create a folder **WebsiteStats** 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. We also have an icon for arrow, which we are going to use later in the project.

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

Now, create a file **manifest.json** inside the folder **WebsiteStats** and put the below content in it. It is having a permission for **storage** and also **webNavigation**.

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

Next create a file **popup.html** inside the folder. Put the below content in it. It is a simple html file, in which the id will be replaced by our javascript code to display the statistics.

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

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

The html elements for **theCount**, **hostName** and **typeName** will be generated from javascript.

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

Now, it time to add the javascript files. We will first add **background.js** file, which will run in the background and collect the data about the web-pages visited by the user.

We are first checking whether we have any local storage data. If we don’t have any, we are making the **results.host** and **results.type** as empty.

We are then using two method provided by firefox to keep a track of transaction type and url. These methods are [webNavigation.onCommitted](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webNavigation/onCommitted) and [webNavigation.onCompleted](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webNavigation/onCompleted).

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

Now, we will create the **popup.js** file in the same folder. We are writing code for two function **sorter()** and **addElements()** here. They will help us to sort and add elements.

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

After that we are adding the main code of **gettingStoredStats** in **popup.js** file.

We are first checking whether any result is there and returning if none.

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

Now, to understand how the main function of **addElements** works, i had added some more console logs.

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

I had loaded the temporary addon and visited two sides. After that open the log and click on the addon icon.

![The log](https://cdn-images-1.medium.com/max/2880/1*1Puwh9nrJ3d8Hq9jGPQ8Rw.png)*The log*

The **result** is an object, which in turn contains two more objects — **host** and **type**. Now, **sorter**() first make results.host as an array and also sort it, before returning. So, the **sortedHosts** is an array containing only the web-page names.

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

Back to the **addElements**(), in which we pass two parameters -**hostElement** and **sortedHosts**.

Inside the function we loop through the array **sortedHosts** and create a new element li. Then we are passing a single element ie **array[i]** like mail.yandex.com, by the callback function. From there we are returning the below.

    <span id="hostName">**mail.yandex.com**</span>: <span class="theCount">1</span> visit(s)

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

So, back in the function this will be our innerHTML for li. After that we are appending it to the function.

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.

![Web stats](https://cdn-images-1.medium.com/max/2876/1*0hQgQeNbcyZov5gB5TYPgg.png)*Web stats*

You can install this addon in your firefox browser from [here](https://addons.mozilla.org/en-US/firefox/addon/website-stats/).

This complete part-13 of the series. 

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