Building your first browser addon for Firefox using WebExtension

Firefox Browser has been an incredible browser with thousands of add-ons in its marketplace. Performance of the browser has been greatly improved with e10s. With WebExtensions support from the recent releases it was made possible to develop cross platform add-ons and run across Firefox, Chrome, IE etc. with just a few tweaks.

I joined as a AMO’s ( addons.mozilla.org ) Feature Board member in November-2016 where I would help the Add-ons’ team in selecting the best add-ons to feature every month on the AMO website ( https://addons.mozilla.org/en-US/firefox/ ). I then came to know about WebExtensions. WebExtensions enable you to develop Cross-browser supporting add-ons which works on most of the latest browsers including Firefox, Chrome, IE etc. I thought to explore around a bit about WebExtensions and in the process I developed my first Browser add-on. \o/ You can find my extension here.

I love inShorts. It helps you to with the news around the world and puts it in 60 words. But it doesn’t have a dark theme and I don’t want the light to flash on my face every night. Add-ons are meant to improve your browsing experience and change how a particular website should work for you. Hence I thought to build an add-on which adds a dark theme to the inShorts website. I spent a weekend and finished my add-on. It is very easy to develop a WebExtension and you fill find a lot of amazing resources to learn. You can find it here.

I thought to share my experience of building my first Browser addon in this post.

{
 "manifest_version": 2,
 "name": "inShorts in dark",
 "version": "2.0.0",
 "homepage_url": "https://github.com/viswanathamsantosh/inshorts",
 "description": "Read your favourite news on inShorts by dimming the light right away on your browser.",

 "icons": {
 "48": "icons/icon-48.png",
 "96": "icons/icon-96.png"
 },
 "permissions": [
 "activeTab",
 "tabs"
 ],
 "browser_action": {
 "browser_style": true,
 "default_icon": {
 "19": "icons/icon-19.png",
 "38": "icons/icon-38.png"
 },
 "default_title": "Turn on or off"
 },
 "background": {
 "scripts": ["background.js"]
 }
}

Most of the contents in the manifest file are optional. depending on the usage you should include them in your manifest. For example, I need an icon on the browser toolbar for my addon, Hence I included the ‘browser_action’ in my manifest file. If you don’t need it then you can remove the section. More info on manifest.json is here.

Here I included a name, description, url of the github repo I’m using for the addon, browser action, default icons and a background script in this manifest.json file.

  • Next I have to write my javascript code. Depending on the usage you can either choose between content script or backgroup script. Since I m using browser actions in my addon, I use background scripts. Create a file named ‘background.js’ in the same folder as manifest.json file and included it in my manifest.json.
  • I studied the DOM structure of inShorts and wrote the required CSS to enable night mode where I would change the color of the background from white to black, change the text color of news from grey to white and the ‘Load More’ button color from white to Red.
var CSS='body{background-color: black;}span[itemprop="headline"]{color:white;}div[itemprop="articleBody"]{color:white;} #load-more-btn{background-color:red;color:white;}'

If I have to  include this style in the beginning and make no changes later on then I can use content script to make it possible. However  I will display an icon on the toolbar to enable and disable the night mode on the website.

  • I wrote my jscode to insert and remove the CSS in the present tab selected.
//method to enable nightmode
function enableNightMode() {
 browser.tabs.insertCSS({code: CSS});
}

//method to disable nightmode
function disableNightMode(){
 browser.tabs.removeCSS({code: CSS});
}
  • Then a toggle function and browser action to toggle the dark theme when you click on the button in the toolbar.

toolbar

//method to toggle mode
function toggleNightMode(tab){
 if(tab.url.indexOf("www.inshorts.com/en/read")!=-1){
 if(enable){
 enableNightMode();
 }else{
 disableNightMode();
 }
 }
}

//event handler when you click the button in the toolbar
browser.browserAction.onClicked.addListener(toggleNightMode);
  • And finally another event handler to reset the mode when the tab is refreshed.
//when the browser tab is refreshed
browser.tabs.onUpdated.addListener((id, changeInfo, tab) => {
 if(tab.url.indexOf("www.inshorts.com/en/read")!=-1){
 disableNightMode();
 }
});
  • Finally this is how my ‘background.js’ looks like after adding few flags

https://github.com/viswanathamsantosh/inshorts/blob/2.0.1/background.js

  • At last add the icons required for your addon and browser action button and mention the related paths in the ‘manifest.json’ file.
  • You can find information about Installing and debugging your addon here.

Hope this helps in getting started with the development of your first add-on! Happy Coding.

Advertisements

3 thoughts on “Building your first browser addon for Firefox using WebExtension

    1. Yes! That is in my next update. since people generally notice add-on icon on their browser toolbars, i gave an example of browser actions. I m writing another blogpost on page actions vs browser actions. it will be out soon. 🙂

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s