Kango - framework for creating cross-browser extensions

Introduction

Kango allows you to create extensions for popular browsers using only JavaScript, and the code is the same for all browsers. Currently, Chrome, Firefox, Internet Explorer are supported (only the version with Chrome and Firefox support is publicly available), and work is underway on Opera and Safari support. Below we will discuss how to quickly create a simple cross-browser Gmail Checker.

What should be the result:

Preparing the environment for working with Kango

To get started with Kango, you need to complete a couple of actions:

Install Python version 2.7 ( http://www.python.org/download/ )
Download the link and unpack the archive with the framework into any folder.

Creating a new project

Create a folder for the project on the disk and launch it from the kango.py framework folder.

d:\dev\kango\kango.py create

At the request of the project name, enter Gmail Checker.
Now you can proceed to writing the code for your extension.
In the future, the name and version of the extension can be set using the file common \ extension_info.json.

Writing Gmail Checker

The extension will periodically check the number of unread messages on Gmail and display this number on a button in the browser.

After creating the project, go to the src \ common folder and see that the original template has already been created for us in the main.js file.

Initialization extension

Subscribe to the UI module readiness event. You need to use it because Our extension has visual components, namely a button in the browser.

 kango.ui.addEventListener(kango.ui.event.Ready, function() { return new MyExtension(); });

We get the number of unread letters

The number of unread messages can be obtained via the link https://mail.google.com/mail/feed/atom in Atom 0.3 format (for correct work, the user must be logged in to Gmail in the current browser).

For AJAX requests, use the kango.xhr.send method.

 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; } });

Display the number of messages on the button

Button properties are controlled using the kango.ui.browserButton object.

 _setUnreadCount: function(count) { kango.ui.browserButton.setTooltipText('Unread count: ' + count); kango.ui.browserButton.setIcon('icons/icon16.png'); kango.ui.browserButton.setBadge((count != 0) ? {text: count} : null); }

Putting it all together

Add a timer, which will check the number of new messages and error handling with a given frequency, in the end you will get something like this code:

 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.setBadge(null); }, _setUnreadCount: function(count) { kango.ui.browserButton.setTooltipText('Unread count: ' + count); kango.ui.browserButton.setIcon('icons/icon16.png'); kango.ui.browserButton.setBadge((count != 0) ? {text: count} : null); }, 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(); } }); } }; kango.ui.addEventListener(kango.ui.event.Ready, function() { return new GmailChecker(); });

A total of 50 lines of code for the extension, which will work under all popular browsers.

Icons

In the common / icons folder, you need to put icons in PNG format under the names of icon16.png, icon32.png, icon48.png, icon128.png 16x16, 32x32, 48x48, 128x128 pixels respectively, as well as the icon16_gray.png icon to display inactive status .

Build project

To build the project, run kango.py with the build argument and the path to the project folder

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

To build the Chromov extension, you need Google Chrome installed on Windows or Chromium on Linux.

The output should be gmailchecker_0.1.0.xpi and gmailchecker_0.1.0.crx, which are ready-made extension files. For Chrome, the gmailchecker.pem file will also be generated so that the extension can be updated later.

Further prospects

Most of the API is in the closed beta testing phase and soon a version with the ability to modify the content of the pages (full access to the DOM) and the ability to open HTML pop-up windows by clicking on the button will be available for public access.