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:
- Install Python 2.7 (http://www.python.org/download/)
- 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,
_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 {
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