loading...
Cover image for Creating Firefox browser extensions-19

Creating Firefox browser extensions-19

nabendu82 profile image Nabendu Originally published at nabendu.blog ・3 min read

firefox-addons (26 Part Series)

1) Creating Firefox browser extensions -1 2) Creating Firefox browser extensions -2 3 ... 24 3) Creating Firefox browser extensions -3 4) Creating Firefox browser extensions for covid-19–4 5) Creating Firefox browser extensions for covid-19–5 6) Creating Firefox browser extensions for covid-19–6 7) Creating Firefox browser extensions -7 8) Creating Firefox browser extensions -8 9) Creating Firefox browser extensions -9 10) Creating Firefox browser extensions -10 11) Creating Firefox browser extensions for covid-19–11 12) Creating Firefox browser extensions- 12 13) Creating Firefox browser extensions-13 14) Creating Firefox browser extensions-14 15) Creating Firefox browser extensions-15 16) Creating Firefox browser extensions-16 17) Creating Firefox browser extensions-17 18) Creating Firefox browser extensions-18 19) Creating Firefox browser extensions-19 20) Creating Firefox browser extensions-20 21) Creating Firefox browser extensions-21 22) Creating Firefox browser extensions-22 23) Creating Firefox browser extensions-23 24) Creating Firefox browser extensions-24 25) Creating Firefox browser extensions-25 26) Creating Firefox browser extensions-26

Alt Text

Welcome to part-19 of the series. In this part we will create a new addon called Delete Last Download. This addon shows the last downloaded item, and lets you open or delete it. If the user presses delete, the file is removed from disk and from the browser’s downloads history.

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

DeleteLastDownloadDeleteLastDownload

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

It is using the permissions for downloads and downloads.open, which we are going to use soon.

manifest.jsonmanifest.json

Now, create a folder popup and a file download.html inside it. It is a simple html file, which will show an image and url of the last download. It will also have an Open and Remove clickable divs.

download.htmldownload.html

To create the styles, create a file download.css in the same folder.

download.cssdownload.css

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

CurrentCurrent

Let’s add some logic now. Create a file download.js in the same folder, and add below code in it.

Now, the program starts from line 26 where it is using downloads.search(), to get the most recent download.

After that it runs the function initializeLatestDownload(). Here, we will add the download link to the div with id url. Inside the if statement at line 14, we are using another firefox function downloads.getFileIcon() to get the file icon.

At line 15, we are using a helper function updateIconUrl(), to set the icon to the div with id icon.

Inside the if statement, which runs when some download is there, we are removing the disabled class from open and remove divs.

In the else part, we are adding the disabled class from open and remove divs.

download.jsdownload.js

Next, let’s put logic to the open and remove divs. We are adding two event-listener for open and remove divs, with there respective functions.

In the openItem(), we are using downloads.open() to open the downloaded file.

Similarly in removeItem(), we are first using downloads.removeFile() removes a downloaded file from disk. Then downloads.erase() removes the file from browser’s download history.

download.jsdownload.js

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

GifGif

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.

Awaiting ReviewAwaiting Review

This complete part-19 of the series. You can install the addon in this part in your firefox browser from here.

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

firefox-addons (26 Part Series)

1) Creating Firefox browser extensions -1 2) Creating Firefox browser extensions -2 3 ... 24 3) Creating Firefox browser extensions -3 4) Creating Firefox browser extensions for covid-19–4 5) Creating Firefox browser extensions for covid-19–5 6) Creating Firefox browser extensions for covid-19–6 7) Creating Firefox browser extensions -7 8) Creating Firefox browser extensions -8 9) Creating Firefox browser extensions -9 10) Creating Firefox browser extensions -10 11) Creating Firefox browser extensions for covid-19–11 12) Creating Firefox browser extensions- 12 13) Creating Firefox browser extensions-13 14) Creating Firefox browser extensions-14 15) Creating Firefox browser extensions-15 16) Creating Firefox browser extensions-16 17) Creating Firefox browser extensions-17 18) Creating Firefox browser extensions-18 19) Creating Firefox browser extensions-19 20) Creating Firefox browser extensions-20 21) Creating Firefox browser extensions-21 22) Creating Firefox browser extensions-22 23) Creating Firefox browser extensions-23 24) Creating Firefox browser extensions-24 25) Creating Firefox browser extensions-25 26) Creating Firefox browser extensions-26

Posted on May 5 by:

nabendu82 profile

Nabendu

@nabendu82

Fullstack JS dev, Upcoming Author "Gatsby Cookbook"

Discussion

markdown guide