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

Creating Firefox browser extensions-24

nabendu82 profile image Nabendu Originally published at nabendu.blog ・2 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-24 of the series. In this part we will create a new addon called Read Mode. This addon allows the user to change, the currently opened tab to reader mode if available.

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

ReadModeReadMode

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

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

manifest.jsonmanifest.json

We only have another file ie background.js in this addon. So, go ahead and create it in the same folder and put the below content in it.

Now, our program starts from Line 10 where we have an event listener for browserAction.onClicked(). This event will fire when the browser icon is clicked.

Inside the listener, we are passing the tab to tabs.toggleReaderMode(), which toggles reader mode for the current tab.

Now, some of the web-pages don’t have reader mode and the promise will fire the catch block. For such tabs, we are calling a function failureCallback(). The function shows an browser notification that the reader mode is not available.

background.jsbackground.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.

Since, the name Read Mode was not available, i had to change the name of the addon to My Read Mode.

My Read ModeMy Read Mode

This complete part-24 of the series. You can install the addon to your firefox 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 15 by:

nabendu82 profile

Nabendu

@nabendu82

Fullstack JS dev, Upcoming Author "Gatsby Cookbook"

Discussion

markdown guide
 

An idea for future extensions - Roomy Bookmarks.
Shown right under URL bar horizontally across full user view width. Only favicons are shown of bookmarks, with more info on hover. So user can have instant access to like 100 bookmarks or so - instantly, at all times.

There was extension like that ages ago, but they removed it. Hate the default (built-in) bookmarking solution, where you have to sort them, open new modal, browse across folders, yelp!