|
Firefox 的 Jetpack 可以讓我們很輕松地創(chuàng)建 Firefox 插件，僅通過已掌握的前端技能（HTML/CSS/JS），估計(jì)讓人更興奮的一點(diǎn)—— Jetpack 還集成了 jQuery 框架。
Adobe Air 也好，Web OS 也好， Jetpack 也好，至少讓我們肯定一點(diǎn)，前端的價(jià)值將會(huì)在機(jī)遇中越來越大的被展現(xiàn)。
下面讓我們一起來看看如何一步步創(chuàng)建你的第一個(gè) Firefox 的 Jetpack 擴(kuò)展：
第一步：安裝 Jetpack 插件
Jetpack 插件地址：https://jetpack.mozillalabs.com/install.html
安裝完成 Jetpack 插件后，你就可以通過在地址欄中輸入 about:jetpack 來訪問 Jetpack 本地界面了。
第二步：創(chuàng)建 planabc.js 文件。
planabc.js 的詳細(xì)代碼為： jetpack.statusBar.append({
html: '<img src="http://www.planabc.net/favicon.ico"/>',
width: 16,
onReady: function(widget){
$(widget).click(function(){
jetpack.tabs.focused.contentWindow.location = "http://www.planabc.net/";
});
}
});
jetpack.statusBar.append 將執(zhí)行 JavaScript 對(duì)象（該JavaScript 對(duì)象有四個(gè)屬性：html、url、width 和 onReady）。
- html 屬性：定義初始的 HTML，將顯示在狀態(tài)欄。此樣例中，將顯示一個(gè)簡(jiǎn)單的 IMG 元素。
- url 屬性：定義將在狀態(tài)欄上顯示的外部 HTML 內(nèi)容的 URL。此樣例中，未使用該屬性。
- width 屬性：定義內(nèi)容在狀態(tài)欄上的寬度（單位：像素）。此樣例中，定義為 16 像素，也就是 IMG 元素本身的寬度。
- onReady 屬性：定義被調(diào)用的函數(shù)（一旦狀態(tài)欄被創(chuàng)建，此函數(shù)將會(huì)被調(diào)用）。由于 Jetpack 集成了 jQuery 框架，所以可以直接使用 jQuery 的屬性和方法。在此樣例中定義了這樣一個(gè)函數(shù)，當(dāng)點(diǎn)擊該 Jetpack 擴(kuò)展時(shí)，我們將修改 jetpack.tabs.focused.contentWindow.location 屬性為 http://www.planabc.net/。jetpack.tabs.focused.contentWindow.location 對(duì)象相當(dāng)于 window 對(duì)象，你可以訪問通過 JavaScript 訪問網(wǎng)頁(yè)。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 下一頁(yè) 如何創(chuàng)建Firefox的Jetpack擴(kuò)展 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 如何創(chuàng)建Firefox的Jetpack擴(kuò)展 [1]
第 2 頁(yè) 
