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



相关阅读:
备份压缩--gzexe
javascript获得光标所在的文本框(text/textarea)中的位置
开源多重触摸桌面:比微软Surface还炫
escape、encodeURI、encodeURIComponent等方法的区别比较
XHTML三种文件类型声明
JavaScript EasyPager 分页函数
link-view.vbs 页面链接查看
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
网络通讯--netstat
告诉你html的几个小技巧
RFC821-简单邮件传输协议(SMTP)中文版三
Linux 快捷键使用
mysql5写入和读出乱码解决
常用的CSS命名规则 web标准化设计
快速导航

Copyright © 2016 phpStudy |