使用 Kango - 跨浏览器扩展框架创建 GMail 检查器扩展

引言

Kango 允许仅使用 JavaScript 为流行的浏览器创建扩展，代码对于所有浏览器都是相同的。 目前支持 Chrome、Firefox、Internet Explorer、Safari、Opera。 下面介绍如何创建一个简单的跨浏览器 Gmail Checker。

最终你会得到这样的东西

使用 Kango 工作的环境准备

在开始使用 Kango 之前，您应该执行以下几个步骤

1. 安装 Python 2.7 (https://pythonlang.cn/download/)
2. 从这里下载，并将框架的压缩包解压到任何文件夹。

创建新项目

在磁盘上为项目创建一个文件夹，然后从框架文件夹运行 kango.py。

d:\dev\kango\kango.py create  

在请求项目名称时，输入 Gmail Checker。 现在您可以开始编写扩展的代码了。
稍后，您可以使用文件 common\extension_info.json 设置扩展的名称和版本。

编写 Gmail Checker

该扩展程序会不时地检查 Gmail 上的未读邮件数量，并在浏览器按钮上显示该数字。

创建项目后，打开文件夹 src\common，查看模板是否已在文件 main.js 中创建。

扩展的初始化

让我们订阅 UI 模块准备就绪的事件。 您应该使用它，因为我们的扩展程序具有可视化组件，即浏览器中的按钮。

var extension = new GmailChecker(); 

获取未读邮件数量

可以从 https://mail.google.com/mail/feed/atom 以 Atom 0.3 格式获取未读邮件的数量（为了正确工作，用户必须在当前浏览器中授权 Gmail）。

方法 kango.xhr.send 用于 AJAX 查询。

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

将所有内容整合在一起

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

总而言之，您的扩展只有 50 行代码，它可以与所有流行的浏览器一起使用。

图标

您应该将 PNG 格式的图标放在名为 icon16.png、icon32.png、icon48.png、icon128.png 的文件中，尺寸分别为 16×16、32×32、48×48、128×128 像素，放入文件夹 common/icons 中，以及图标 icon16_gray.png，以便显示非活动状态。

项目构建

为了构建项目，请运行带有参数 build 和项目文件夹路径的 kango.py

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

应该安装适用于 Windows 的 Google Chrome 或适用于 Linux 的 Chromium，这样你才能为 Chrome 构建扩展。

在输出中，您应该得到 gmailchecker_0.1.0.xpi 和 gmailchecker_0.1.0.crx，它们是已准备好的扩展文件。 如果是 Chrome，还会生成一个文件 gmailchecker.pem，以便以后可以更新扩展。

参考  

• Gmail Checker 示例的完整源代码
• 框架本身
• 框架文档