Firefox的Jetpack擴展案例分析:Gmail郵件提醒

2024-07-21 02:04:39

字體：大中小

來源：轉載

供稿：網友

gtalk 軟件的最下方有個很好又很實用的功能，就是 gmail 郵件提醒功能。會定時更新你 gmail 中未讀新郵件的數量。

gtalk

試想如果我們將此功能移植到 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 );
    }
});