|
Firefox 的 Jetpack 擴展案例分析：Gmail 郵件提醒
Gtalk 軟件的最下方有個很好又很實用的功能，就是 Gmail 郵件提醒功能。會定時更新你 Gmail 中未讀新郵件的數(shù)量。
試想如果我們將此功能移植到 Firefox 上一定有趣！
第一步，在狀態(tài)欄中顯示圖標和數(shù)據(jù)
通過 《如何創(chuàng)建 Firefox 的 Jetpack 擴展》 這篇文章，我們可以輕易的創(chuàng)建：
jetpack.statusBar.append({
html: '<img src="http://mail.google.com/mail/images/favicon.ico"/><span id="count"></span>', //Gmail郵件圖標和未讀新郵件數(shù)
width: 55, //狀態(tài)欄上的寬度為55
onReady: function(widget) {
$("#count", widget).css({ //給未讀新郵件數(shù)添加樣式
cursor: "pointer",
paddingLeft:"4px",
fontFamily: "Tahoma, Arial, sans-serif",
verticalAlign: "top",
fontSize: "10px",
lineHeight:"18px",
});
}
});
第二步，獲取 Gmail 的數(shù)據(jù)，更新未讀新郵件數(shù)
可以通過 Gmail 郵件的 Feed 獲得（需登錄）：https://mail.google.com/mail/feed/atom
Feed 源碼中的 fullcount 標簽是用來記錄當前的未讀新郵件數(shù)。
OK，首先數(shù)據(jù)源有了。接著，我們使用再熟悉不過的 Ajax 技術(shù)，獲取到數(shù)據(jù)并賦給指定的元素。
function update(widget) {
var widget = $(widget)；
$.get(" var el = $(xml).find("fullcount"); // 記錄未讀新郵件數(shù)的節(jié)點
if(el){
var newcount = parseInt(el.get(0).textContent);
widget.find("#count").text(newcount); //賦給指定的元素
} else { //如果未登錄，顯示“Login”
widget.find("#count").text( "Login" );
}
});
}
我們還可以通過進行一些優(yōu)化：比如當未讀新郵件數(shù)大于原來的郵件數(shù)時，增加提示信息等。
提示信息這里使用 jetpack.notifications.show(options) 方法，options 參數(shù)有三個屬性：title (String)：通知的標題；icon (URL)：通知 icon 的 URL；body (String)：通知的主題內(nèi)容。
優(yōu)化后的代碼如下：
function update(widget) {
var widget = $(widget),
notify = function(msg) { // 定義通知的公用方法
jetpack.notifications.show({
title: "Gmail",
body: msg,
icon: " });
};
$.get(" var el = $(xml).find("fullcount"); // 記錄未讀新郵件數(shù)的節(jié)點
if(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // 如果未讀新郵件數(shù)大于原來的郵件數(shù)，則提示來自哪里
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");
}
});
}
第三步：設(shè)置定時更新數(shù)據(jù)
我們設(shè)置每 1 分鐘更新一次數(shù)據(jù)：
setInterval( function() { update(widget) }, 60*1000 );
第四步：設(shè)置點擊擴展后的鏈接窗口
$(widget).click(function() { //設(shè)置點擊擴展后的鏈接窗口
jetpack.tabs.open(" jetpack.tabs[ jetpack.tabs.length-1 ].focus();
});
jetpack.tabs 為瀏覽器窗口的標簽對象，.open(url) 為新打開瀏覽器窗口標簽的方法，.focus()為選中此標簽為當前標簽的方法。
OK，F(xiàn)irefox 的 Jetpack 擴展——Gmail 郵件提醒，經(jīng)過簡單的四步輕松完成。
全部代碼如下：
var count = 0;
function update(widget) {
var widget = $(widget),
notify = function(msg) { // 定義通知的公用方法
jetpack.notifications.show({
title: "Gmail",
body: msg,
icon: " });
};
$.get(" var el = $(xml).find("fullcount"); // 記錄未讀新郵件數(shù)的節(jié)點
if(el){
var newcount = parseInt(el.get(0).textContent);
if(newcount > count) { // 如果未讀新郵件數(shù)大于原來的郵件數(shù)，則提示來自哪里
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郵件圖標和未讀新郵件數(shù)
width: 40, //狀態(tài)欄上的寬度為40，預(yù)留3位數(shù)的寬度
onReady: function(widget) {
$("#count", widget).css({ //給未讀新郵件數(shù)添加樣式
cursor: "pointer",
paddingLeft:"4px",
fontFamily: "Tahoma, Arial, sans-serif",
verticalAlign: "top",
fontSize: "10px",
lineHeight:"18px",
}); $(widget).click(function() { //設(shè)置點擊擴展后的鏈接窗口
jetpack.tabs.open(" 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
本文鏈接：http://www.95time.cn/tech/web/2010/7408.asp 
出處：藍色理想
責任編輯：bluehearts
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
