Click here to Skip to main content
Click here to Skip to main content

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

, 8 Jun 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
How to create cross-browser extensions with few lines in JavaScript

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  

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

andrej33@yandex.ru

Russian Federation Russian Federation
No Biography provided

Comments and Discussions

 
GeneralMy vote of 3 Pinmemberpmhsilva7-Jun-12 5:09 
Nice and nifty
QuestionCool thing to try... Pinmemberpmhsilva7-Jun-12 5:08 
AnswerRe: Cool thing to try... Pinmemberandrej33@yandex.ru8-Jun-12 1:11 
GeneralMy vote of 5 PinmemberKAdot17-Jan-12 19:59 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.141022.2 | Last Updated 8 Jun 2012
Article Copyright 2012 by andrej33@yandex.ru
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid