Kango — фреймворк для создания кроссбраузерных расширений

Вступление

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
• Сам фреймоврк
• Документация по фреймворку