在这个数字化时代，电子邮件成为了日常生活和工作中不可或缺的一部分。Gmail作为最受欢迎的电子邮件服务之一，提供了许多便捷的功能。但是，经常需要检查是否有新的邮件到来，这可能会分散注意力。为了解决这个问题，可以开发一个跨浏览器的Gmail检查器插件，它可以自动检查Gmail中的未读邮件数量，并在浏览器按钮上显示这个数字。本文将详细介绍如何使用Kango框架开发这样一个插件，支持Chrome、Firefox、Internet Explorer、Safari和Opera等主流浏览器。
在开始使用Kango框架之前，需要完成以下步骤：
1. 安装Python2.7。请访问下载并安装。
2. 下载Kango框架，并将其解压到任意文件夹。
3. 在磁盘上创建一个项目文件夹，并在框架文件夹中运行kango.py文件创建新项目。
d:\dev\kango\kango.py create
4. 在请求输入项目名称时，输入“Gmail Checker”。
5. 接下来，可以开始编写扩展程序的代码了。稍后，可以通过文件common\extension_info.json设置扩展程序的名称和版本。
这个扩展程序将定期检查Gmail中的未读邮件数量，并在浏览器按钮上显示这个数字。
创建项目后，打开src\common文件夹，会看到main.js文件中已经创建了模板。
1. 初始化扩展程序。需要订阅UI模块的准备就绪事件，因为扩展程序具有视觉组件，即浏览器中的按钮。
var extension = new GmailChecker();
2. 获取未读邮件数量。未读邮件数量可以通过访问https://mail.google.com/mail/feed/atom获取，格式为Atom 0.3。为了正确工作，用户需要在当前浏览器中登录Gmail。
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;
}
});
3. 在按钮上显示消息数量。可以使用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);
};
4. 将所有内容整合在一起。
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格式放置在common/icons文件夹中，图标名称分别为icon16.png、icon32.png、icon48.png、icon128.png，尺寸分别为16×16、32×32、48×48、128×128像素。此外，还需要放置一个名为icon16_gray.png的图标，以显示非活动状态。
要构建项目，请使用kango.py并带上构建参数和项目文件夹路径。
d:\dev\kango\kango.py build ./