Firefox 的Jetpack可以讓我們很輕鬆地創建Firefox 插件，僅透過已掌握的前端技能（HTML/CSS/JS），估計讓人更興奮的一點—— Jetpack 還整合了jQuery 框架。
Adobe Air 也好，Web OS 也好， Jetpack 也好，至少讓我們肯定一點，前端的價值將會在機會中越來越大的被展現。
以下讓我們一起來看看如何一步一步創造你的第一個Firefox 的Jetpack 擴充：
第一步：安裝Jetpack 插件
Jetpack 外掛程式位址： https://jetpack.mozillalabs.com/install.html
安裝完成Jetpack 外掛後，就可以透過在網址列輸入about : jetpack來存取Jetpack 本機介面了。
第二步：建立planabc.js 檔案。
planabc.js的詳細程式碼為：
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將執行JavaScript 物件（此JavaScript 物件有四個屬性：html、url、width 和onReady）。
- html 屬性：定義初始的HTML，將顯示在狀態列。在此範例中，將顯示一個簡單的IMG 元素。
- url 屬性：定義將在狀態列上顯示的外部HTML 內容的URL。此範例中，未使用該屬性。
- width 屬性：定義內容在狀態列上的寬度（單位：像素）。此範例中，定義為16 像素，也就是IMG 元素本身的寬度。
- onReady 屬性：定義被呼叫的函數（一旦狀態列被創建，此函數將會被呼叫）。由於Jetpack 整合了jQuery 框架，所以可以直接使用jQuery 的屬性和方法。在此範例中定義了這樣一個函數，當點擊該Jetpack 擴充功能時，我們將修改jetpack . tabs . focused . contentWindow . location屬性為http : //www.planabc.net/ 。 jetpack . tabs . focused . contentWindow . location對象相當於window 對象，你可以訪問透過JavaScript 訪問網頁。
