Creating GMail Checker extension with Kango - cross-browser extension framework

Introduction

Kango allows creating extensions for popular browsers using JavaScript only, the code being single for all browsers. Chrome, Firefox, Internet Explorer, Safari, Opera are supported currently. The way to create a simple cross browser Gmail Checker is represented below.

You will eventually get this:

Preparation of environment to work with Kango

Before you begin working with Kango you should make a few steps:

1. Install Python 2.7 (http://www.python.org/download/)
2. Download here and extract the archive with framework to any folder.

Creation of new project

Create a folder for the project on disc and run kango.py from the framework folder.

d:\dev\kango\kango.py create  

On request for project name enter Gmail Checker.Now you may start writing code of your extension.
Later on you can set name and version of your extension using file common\extension_info.json.

Writing Gmail Checker

The extension will check number of unread messages on Gmail from time to time and show such number on a browser button.

After creation of project open folder src\common to see that template is already created in the file main.js.

Initialization of extension

Let us subscribe to event of readiness of UI module. You should use it because our extension has visual components, that is – button in browser.

var extension = new GmailChecker(); 

Obtain number of unread messages

Number of unread messages can be obtained on https://mail.google.com/mail/feed/atom in Atom 0.3 format (for correct work it is necessary that user is authorized in Gmail in the current browser).

Method kango.xhr.send is used for AJAX queries.

var details = {
    url:'https://mail.google.com/mail/feed/atom',
    method:'GET',
    async:true,
    contentType:'xml'
};
kango.xhr.send(details, function(data) {
    if(data.status == 200) {
        var doc = data.response;
        var count = doc.getElementsByTagName('fullcount')[0].childNodes[0].nodeValue;
    }
}) 

Displaying of message number on the button

Adjustment of button properties can be carried out using object kango.ui.browserButton.

_setUnreadCount: function(count) {
    kango.ui.browserButton.setTooltipText('Unread count: ' + count);
    kango.ui.browserButton.setIcon('icons/icon16.png');
    kango.ui.browserButton.setBadgeValue(count);
}; 

Getting everything together

 function GmailChecker() {
    var self = this;
    self.refresh();
    kango.ui.browserButton.addEventListener(kango.ui.browserButton.event.Command, function() {
        self.refresh();
    });
    window.setInterval(function(){self.refresh()}, self._refreshTimeout);
}

GmailChecker.prototype = {

    _refreshTimeout: 60*1000*15,    // 15 minutes
    _feedUrl: 'https://mail.google.com/mail/feed/atom',

    _setOffline: function() {
        kango.ui.browserButton.setTooltipText('Offline');
        kango.ui.browserButton.setIcon('icons/icon16_gray.png');
        kango.ui.browserButton.setBadgeValue(0);
    },

    _setUnreadCount: function(count) {
        kango.ui.browserButton.setTooltipText('Unread count: ' + count);
        kango.ui.browserButton.setIcon('icons/icon16.png');
        kango.ui.browserButton.setBadgeValue(count);
    },

    refresh: function() {
        var details = {
            url: this._feedUrl,
            method: 'GET',
            async: true,
            contentType: 'xml'
        };
        var self = this;
        kango.xhr.send(details, function(data) {
            if(data.status == 200) {
                var doc = data.response;
                var count = doc.getElementsByTagName('fullcount')[0].childNodes[0].nodeValue;
                self._setUnreadCount(count);
            }
            else { // something went wrong
                self._setOffline();
            }
        });
    }
};

var extension = new GmailChecker(); 

All in all you have just 50 lines of code for you extension, which works with all popular browsers.

Icons 

You should place icons in PNG format with names icon16.png, icon32.png, icon48.png, icon128.png with dimensions 16×16, 32×32, 48×48, 128×128 pixels respectively into folder common/icons, as well as icon icon16_gray.png in order to display inactive state.  

Project building

In order to build the project run kango.py with argument build and path to the project folder

d:\dev\kango\kango.py build ./ 

Google Chrome for Windows or Chromium for Linux should be installed so that you could build an extension for Chrome.

In output you are supposed to get gmailchecker_0.1.0.xpi and gmailchecker_0.1.0.crx, which are the ready extension files. In case of Chrome a file gmailchecker.pem will also be generated so that the extension could be updated later.

Reference  

• Full source of the Gmail Checker sample 
• Framework itself 
• Framework documentation