|
Gtalk 软件的最下方有个很好又很实用的功能，就是 Gmail 邮件提醒功能。会定时更新你 Gmail 中未读新邮件的数量。
试想如果我们将此功能移植到 Firefox 上一定有趣！
第一步，在状态栏中显示图标和数据。
通过 《如何创建 Firefox 的 Jetpack 扩展》 这篇文章，我们可以轻易的创建：
jetpack.statusBar.append({
html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Gmail邮件图标和未读新邮件数
width: 55, //状态栏上的宽度为55
onReady: function(widget) {
$("#count", widget).css({ //给未读新邮件数添加样式
cursor: "pointer",
paddingLeft:"4px",
fontFamily: "Tahoma, Arial, sans-serif",
verticalAlign: "top",
fontSize: "10px",
lineHeight:"18px",
});
}
});
第二步，获取 Gmail 的数据，更新未读新邮件数。
可以通过 Gmail 邮件的 Feed 获得（需登录）：https://mail.google.com/mail/feed/atom
Feed 源码中的 fullcount 标签是用来记录当前的未读新邮件数。
OK，首先数据源有了。接着，我们使用再熟悉不过的 Ajax 技术，获取到数据并赋给指定的元素。
function update(widget) {
var widget = $(widget)；
$.get("https://mail.google.com/mail/feed/atom", function(xml) {
var el = $(xml).find("fullcount"); // 记录未读新邮件数的节点
if(el){
var newcount = parseInt(el.get(0).textContent);
widget.find("#count").text(newcount); //赋给指定的元素
} else { //如果未登录，显示“Login”
widget.find("#count").text( "Login" );
}
});
}
我们还可以通过进行一些优化：比如当未读新邮件数大于原来的邮件数时，增加提示信息等。
提示信息这里使用 jetpack.notifications.show(options) 方法，options 参数有三个属性：title (String)：通知的标题；icon (URL)：通知 icon 的 URL；body (String)：通知的主题内容。
优化后的代码如下：
var count = 0;
function update(widget) {
var widget = $(widget),
notify = function(msg) { // 定义通知的公用方法
jetpack.notifications.show({
title: "Gmail",
body: msg,
icon: "http://mail.google.com/mail/images/favicon.ico"
});
};
$.get("https://mail.google.com/mail/feed/atom", function(xml) {
var el = $(xml).find("fullcount"); // 记录未读新邮件数的节点
if(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // 如果未读新邮件数大于原来的邮件数，则提示来自哪里
var sender = $(xml).find("name").get(0).textContent;
notify("New message from "+sender);
}
count = newcount;
widget.find("#count").text(count); //赋给指定的元素
} else { //如果未登录，提示登录
widget.find("#count").text( "Login" );
notify("Please login to Gmail");
}
});
}
出处：蓝色理想
责任编辑：bluehearts
上一页 下一页 Firefox的Jetpack扩展案例分析 [2]
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|