Jetpack擴充案例分析:Gmail郵件提醒

Firefox 的Jetpack 擴充案例分析：Gmail 郵件提醒

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

試想如果我們將此功能移植到Firefox 上一定有趣！

第一步，在狀態列中顯示圖示和數據

透過《如何創建Firefox 的Jetpack 擴充功能》 這篇文章，我們可以輕易的創建：

jetpack.statusBar.append({
html: '', //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)：通知的主題內容。

優化後的程式碼如下：

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: 'http://mail.google.com/mail/images/favicon.ico"/> id="count">', //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