Exploring Notifications WebExtension API

August 8, 2016

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

  • Post about Getting Started with WebExtension. Just read it before starting, so you can config your browser accordingly.
  • Post about [Running the WebExtension in Firefox] (http://iamVP7.in/Running-WebExtension-in-Firefox/).

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.

Read Other Related Posts about : Add-ons

  • Simple Tab Closing Addon using WebExtension API
  • MozillaTN VIT Chennai WebExtension Workshop
  • My Firefox Add-on went live in less than 24 hours
  • Comments

    comments powered by Disqus