Firefox 的 Jetpack 扩展案例分析：Gmail 邮件提醒

 

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

 

第三步：设置定时更新数据。

我们设置每 1 分钟更新一次数据：

setInterval( function() { update(widget) }, 60*1000 );

第四步：设置点击扩展后的链接窗口。

$(widget).click(function() { //设置点击扩展后的链接窗口    jetpack.tabs.open("http://mail.google.com");    jetpack.tabs[ jetpack.tabs.length-1 ].focus();});

 

jetpack.tabs 为浏览器窗口的标签对象，.open(url) 为新打开浏览器窗口标签的方法，.focus()为选中此标签为当前标签的方法。

OK，Firefox 的 Jetpack 扩展——Gmail 邮件提醒，经过简单的四步轻松完成。

全部代码如下：

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");        }    });}jetpack.statusBar.append({    html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Gmail邮件图标和未读新邮件数    width: 40, //状态栏上的宽度为40，预留3位数的宽度    onReady: function(widget) {        $("#count", widget).css({ //给未读新邮件数添加样式            cursor: "pointer",            paddingLeft:"4px",            fontFamily: "Tahoma, Arial, sans-serif",            verticalAlign: "top",            fontSize: "10px",            lineHeight:"18px",        });        $(widget).click(function() { //设置点击扩展后的链接窗口            jetpack.tabs.open("http://mail.google.com");            jetpack.tabs[ jetpack.tabs.length-1 ].focus();        });        update(widget);        setInterval( function() {update(widget) }, 60*1000 );    }});

 

测试Demo：http://www.planabc.net/lab/jetpack/gmail/

对于 Jetpack 详细的 API，可以阅读 about:jetpack 页面的 API Reference 标签部分。

案例源码来自：https://jetpack.mozillalabs.com/demos/gmail-checker.js