Вступление

Kango позволяет создавать расширения для популярных браузеров используя только JavaScript, причем код един для всех браузеров. На данный момент поддерживается Chrome, Firefox, Internet Explorer (в публичном доступе только версия с поддержкой Chrome и Firefox) и ведется работа над поддержкой Opera и Safari. Ниже будет рассмотрено как можно быстро создать простой кроссбраузерный Gmail Checker

Что должно получиться в итоге:

Подготовка среды для работы с Kango

Для начала работы с Kango нужно выполнить всего пару действий:

1. Установить Python версии 2.7 (http://www.python.org/download/)
2. Скачать по ссылке и распаковать в любую папку архив с фреймворком.

Создание нового проекта

Создаем на диске папку для проекта и запускаем из папки фреймворка kango.py

d:\dev\kango\kango.py create

На запрос имени проекта вводим Gmail Checker.
Теперь можно переходить к написанию кода своего расширения.
В дальнейшем имя и версию расширения можно установить с помощью файла common\extension_info.json.

Пишем Gmail Checker

Расширение будет периодически проверять количество непрочитанных сообщений на Gmail и отображает это количество на кнопке в браузере.

После создания проекта заходим в папку src\common и видим что для нас уже создан исходный шаблон в файле main.js.

Инициализация расширения

Подпишемся на событие готовности модуля UI. Нужно использовать его т.к. в нашем расширении есть визуальные компоненты, а именно кнопка в браузере.

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

Получаем количество непрочитанных писем

Количество непрочитанных сообщений можно получить по ссылке https://mail.google.com/mail/feed/atom в формате Atom 0.3 (для корректной работы необходимо чтобы пользователь был авторизован в Gmail в текущем браузере).

Для AJAX запросов используется метод kango.xhr.send.

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

Отображение количества сообщений на кнопке

Управление свойствами кнопки осуществляется с помощью объекта kango.ui.browserButton.

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

Собираем все вместе

Добавим таймер, который будет с заданной периодичностью проверять количество новых сообщений и обработку ошибок, в итоге получится примерно такой код:

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

Итого всего 50 строк кода для расширения, которое будет работать под всеми популярными браузерами.

Иконки

В папку common/icons нужно положить иконки в формате PNG под именами icon16.png, icon32.png, icon48.png, icon128.png размерами 16x16, 32x32, 48x48, 128x128 пикселей соответственно, а так же иконку icon16_gray.png для отображения неактивного сотояния.

Сборка проекта

Для сборки проекта запускаем kango.py с аргументом build и путем до папки проекта

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

Для сборки хромовского расширения нужен установленный Google Chrome под Windows, либо Chromium под Linux.

На выходе должны получиться gmailchecker_0.1.0.xpi и gmailchecker_0.1.0.crx, которые являются готовыми файлами расширений. Для Chrome также будет сгенерирован файл gmailchecker.pem для того, чтобы расширение потом можно было обновлять.

Дальнейшие перспективы

Большая часть API находится в фазе закрытого бета тестирование и в скором времени для публичного доступа будет доступна версия с возможностью модификации содержимого страниц (полный доступ к DOM) и возможностью открывать всплывающие HTML окна по клику на кнопке.

Ссылки

• Полные исходники примера Gmail Checker
• Сам фреймоврк
• Документация по фреймворку