Chrome extension to display desktop notification

Have you ever thought about writing extension for web browsers so that we can complete some tasks easily. Do you think writing extension for browsers is very difficult? You have no clue where to begin? On Chrome, this isn't any problem now as long as you know how to write HTML,CSS and JavaScript.

We will show one example of Chrome extension today. The extension will display a desktop notification on your desktop. You need to create two files here, one is the notification.json which is the configuration file for the extension, it contains the name and version and some initialization information about the extension, the other one is the notification.js file which to be executed when the extension is loaded.

Below is the code for manifest.json:

{
    "name":"PixelsTech Website Statsitic Viewer",
    "manifest_version":2,
    "version":"1.0",
    "background":{
        "scripts":["notification.js"]
    },
    "browser_action":{
        "default_icon":"pixelstech.gif"
    },
    "permissions":[
        "notifications"
    ],
    "web_accessible_resources":[
        "pixelstech.gif"
    ]
}

Here the most important configurations are the script to run in the background when the extension is loaded and the permission of the extension, it should be able to display notification.

Next is the notification.js:

var Notification=(function(){
    var notification=null;

    return {
        displayContent:function(icon,title,content){
            notification=webkitNotifications.createNotification(icon,title,content);
            notification.show();
        },
        displayURL:function(url){
            notification=webkitNotifications.createHTMLNotification(url);
            notification.show();
        },
        hide:function(){
            notification.close();
        }
    };
})();

chrome.browserAction.onClicked.addListener(function(windowId){
    var icon="pixelstech.gif",title="PixelsTech Website Statistic Viewer",content="1,000,000";
    Notification.displayContent(icon,title,content);
});

We create a helper class Notification to manage the notification instance, we can use webkitNotifications.createNotification() to create the notification object and call its show() method to display the notification. The parameters passed are fairly easy to understand, the first one is the icon to be shown on the notification. Then we will register the browser action to start the extension.

After 2013, the Legacy Notification API which contains webkitNotifications has been deprecated. Users should use Rich Notification instead now. Below is the new nptification.js.

var Notification=(function(){
    var notification=null;
 
    return {
        display:function(opt){
            notification=chrome.notifications.create(opt);
            notification.show();
        },
        hide:function(){
            notification.close();
        }
    };
})();
 
chrome.browserAction.onClicked.addListener(function(windowId){
	var opt = {
		type: "basic",
		title: "PixelsTech Website Statistic Viewer",
		message: "1,000,000",
		iconUrl: "pixelstech.gif"
	};
    Notification.display(opt);
});

After creating these two files, we put them in the same folder, and then we need to open Chrome and load the extension.Here are steps:

1. Visit chrome://extensions in your browser (or open up the Chrome menu by clicking the icon to the far right of the Omnibox:. and select Extensions under the Tools menu to get to the same place).

2. Ensure that the Developer mode checkbox in the top right-hand corner is checked.

3. Click Load unpacked extension… to pop up a file-selection dialog.

4. Navigate to the directory in which your extension files live, and select it.

For details about how to load extension in Chrome, please refer here.