Running WebExtension in Firefox

In this post we will be exploring more how to run an Firefox WebExtensions. In last post I was writing about Getting Started with WebExtension. Just read it before starting, so you can config your browser accordingly.

I will be showing this demo with the help of the small extension I have written before, feel free to download it from github, you can clone whole repo. I personally use web-ext tool for packing my extension, but for basic learning it is not mandatory.

Step1: Go to the directory which has contents of Extension

In my case it will look like the below. The content showed below is the contents of Extension, which the link is shared above.

Directory Image

Step 2: We have to compress all the contents into Zip

  • Select all the folders and files
  • Make it to a zip, anyname.zip

Directory Image

Step 3: Open about:addons

Directory Image

Step 4: Install Addons

  • Click on Tools for all add-ons (the icon – which is like Setting icon )
  • Select Install Add-on From File ..
  • Make sure you have set the file type to all files
  • Choose the Zip which you created in step 2

Choose the Zip file

  • You will get a pop-up notification after selecting at left croner

Choose the Zip file

  • In that pop-up click Install button
  • Now your Extension is installed.

Step 5: Run the Extension

For most of Extensions you will get the icon in the tool bar itself. So for this a page like icon will be coming at toolbar, if every code is run properly. Click on that icon.

Choose the Zip file

So on Selecting any one of the three websites, it will open a new tab and open the site. As of now it is in static mode.

In future, based on user usage we can show top 3 websites there.

Follow for more amazing extensions.

Advertisements

Exploring Notifications WebExtension API

Before reading this post setup your Firefox so you can run WebExtensions in your browser.

There are lot of time, we love notifications, say when a new message comes to whatsapp, new Post is written in the blogs and so on. These notifications are really great features both in web and mobile which will help us to save lot of time. Firefox Webextensions have one of the amazing API to create notifications, you can find more detail in the Mozilla Developer Network, some of the aspects of this API will be discussed below.

Creating Simple Notification

 chrome.notifications.create( "vp7",{

"type": "basic",

"iconUrl": chrome.extension.getURL("icons/chillout-32.png"),

"title": "Alert message",

"message": "Time to drink water"

});

In the above example vp7 is the notification id, and the remaining part is the options for that notification.

Generally Notification id is not mandatory it is optional, but it is good practice to give, so we can identify and easily update next time.

Notification Simple

In the options part we are having different parameters which will be defining the Notification. First one is type of the notification, currently Firefox (Firefox 48) is supporting only basic type, but we also have image, list and progress as types.

We can compare with the above image and understand the Simple notification easily, the Bold Letters – Alert message is the title of the notification, and the normal font face “Time to drink water” is the message of the notification. And in the left side you can see the small notification icon for this particular notification, usually company logos goes here.

Creating Image Notification

We all know, the WebExtensions is universal extensions, without changing any code I tried the same extension in the Google Chrome, just to check whether I can test image Notifications.

chrome.notifications.create( "vp7",{

  "type": "image",

  "iconUrl": chrome.extension.getURL("icons/chillout-32.png"),

"imageUrl": chrome.extension.getURL("icons/chillout-32.png"),

  "title": "Alert message",

  "message": "Time to drink water"

  });

It was very easy to test the Image notifications, we can use it in blogs generally, so we can drive traffic to other post. Take a look at the below image, you can clearly understand how useful it will be to use Image notifications in your blog.

The two main changes that have been introduced here is “type”: “image”, and additionally “imageUrl”: chrome.extension.getURL(“icons/chillout-32.png”)

Notification Image

In the upcoming posts we can discuss other two Notification types and also the different event listerners, clearing and updating the notifications and so on.