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

【 tulaoshi.com - Web开发 】

Gtalk 软件的最下方有个很好又很实用的功能，就是 Gmail 邮件提醒功能。会定时更新你 Gmail 中未读新邮件的数量。

试想如果我们将此功能移植到 Firefox 上一定有趣！

第一步，在状态栏中显示图标和数据。

通过 这篇文章，我们可以轻易的创建：

jetpackstatusBarappend
    html  
    width  
    onReady widget 
        $ widgetcss 
            cursor 
            paddingLeft
            fontFamily 
            verticalAlign 
            fontSize 
            lineHeight
        
    

第二步，获取 Gmail 的数据，更新未读新邮件数。

可以通过 Gmail 邮件的 Feed 获得（需登录）：

Feed 源码中的 fullcount 标签是用来记录当前的未读新邮件数。

OK，首先数据源有了。接着，我们使用再熟悉不过的 Ajax 技术，获取到数据并赋给指定的元素。

 updatewidget 
     widget  $widget

    $get xml 
         el  $xmlfind 
        el
             newcount  parseIntelgettextContent
            widgetfindtextnewcount 
       
            widgetfindtext  
        
    

我们还可以通过进行一些优化：比如当未读新邮件数大于原来的邮件数时，增加提示信息等。
提示信息这里使用 jetpacknotificationsshowoptions 方法，options 参数有三个属性：title (String)：通知的标题；icon (URL)：通知 icon 的 URL；body (String)：通知的主题内容。

优化后的代码如下：

 count  

 updatewidget 
     widget  $widget
        notify  msg  
            jetpacknotificationsshow
                title 
                body msg
                icon 
            
        

    $get xml 
         el  $xmlfind 
        el
             newcount  parseIntelgettextContent
            newcount  count  
                 sender  $xmlfindgettextContent
                notifysender
            
            count  newcount
            widgetfindtextcount 

       
            widgetfindtext  
            notify
        
    

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

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

setInterval   updatewidget   

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

$widgetclick  
    jetpacktabsopen
    jetpacktabs jetpacktabslength focus

jetpacktabs 为浏览器窗口的标签对象，openurl 为新打开浏览器窗口标签的方法，focus为选中此标签为当前标签的方法。

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

全部代码如下：

 count  

 updatewidget 
     widget  $widget
        notify  msg  
            jetpacknotificationsshow
                title 
                body msg
                icon 
            
        

    $get xml 
         el  $xmlfind 
        el
             newcount  parseIntelgettextContent
            newcount  count  
                 sender  $xmlfindgettextContent
                notifysender
            
            count  newcount
            widgetfindtextcount 

       
            widgetfindtext  
            notify
        
    


jetpackstatusBarappend
    html  
    width  
    onReady widget 
        $ widgetcss 
            cursor 
            paddingLeft
            fontFamily 
            verticalAlign 
            fontSize 
            lineHeight
        

        $widgetclick  
            jetpacktabsopen
            jetpacktabs jetpacktabslength focus
        

        updatewidget
        setInterval  updatewidget   
    

测试Demo：

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

案例源码来自：