Creating Firefox browser extensions-14

Image for post
Image for post
Photo by Allie Smith on Unsplash

Welcome to part-14 of the series. You can find part-13 here.

In this part we will create a new addon called Top Sites. It will show a list of most visited sites, whenever you open a new tab. This way you can easily open your favourite site.

So, go ahead and create a folder TopSites 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 list items, which we are going to use later in the project.

Image for post
Image for post
icons

Now, create a file manifest.json inside the folder TopSites and put the below content in it. We have the permissions for topSites, which will be used to get the list of all sites which you visit more frequently.

We also have chrome_url_overrides which will show the sites.html file whenever a new tab is opened.

Image for post
Image for post
manifest.json

Next create a file sites.html inside the folder. Put the below content in it. It is a simple html file, which have link to the css and js files.

One of the main thing is the id site-list, which we are going to target from the javascript file.

Image for post
Image for post
sites.html

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

Image for post
Image for post
sites.css

Next, we will put the logic in the javascript sites.js file. We are using topSites.get(), which gives us an array of all sites frequently visited. After that we are looping through the sites array, and add the url to an anchor element.

We are also creating an ul and li element. All of these we are appending to site-list div in the html file.

Image for post
Image for post
sites.js

I had checked it by testing the temporary addon and it works perfectly. On opening a new tab, it shows below web-page.

Image for post
Image for post
Web-page

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.

I had submitted the addon, but i had to change the addon name a bit to Top Visited Sites, as Top Sites was already taken.

Image for post
Image for post
Top Sites

This complete part-14 of the series. You can find part-15 here.

You can find the code for the same in my github account here.

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