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对象相当于 window 对象，你可以访问通过 JavaScript 访问网页。
第三步：测试 planabc.js 代码。
通过在地址栏中输入 about:jetpack 访问到 Jetpack 本地界面，点击 Develop 标签，然后将 planabc.js 文件中的代码拷贝到页面上的输入框中。点击 “try out this code” 按钮，你将会看到一个新的 icon 出现在 Firefox 窗口的右下角。
Develop 非常方便在代码部署前，在 Firefox 中测试你的代码。
第四步：部署 Jetpack 扩展。
创建一个简单的页面，在页面的 HEAD 元素内添加如下的 LINK 元素：
<link rel="jetpack" href="planabc.js" name="怿飞的博客"/>HTML 文件源码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mozilla Jetpack 案例</title>
<link rel="jetpack" href="planabc.js" name="怿飞的博客"/>
</head>
<body>
<a href="http://www.planabc.net/2009/10/13/build_firefox_extensions_with_jetpack/">《如何创建 Firefox 的 Jetpack 扩展》 </a>
</body>
</html>最后，将 HTML 文件和 planabc.js 文件都上传到服务器。
第五步：安装 Jetpack 扩展。
在 Firefox 中浏览该 HTML 页面时，Jetpack 插件将会在屏幕的最上方显示一个安装条，点击 “install” 按钮。将会提示安装不受信任的特性，点击 “I know what I’m doing. Install It!” 按钮。
安装完成和第三步测试一样，将会看到一个新的 icon 出现在 Firefox 窗口的右下角。如果此时你发现状态栏有2个相同的新 icon，那意味着原先的测试代码依然还在 about:jetpack 页面的 Develop 标签页中，清空输入框的代码即可消除。
返回到 about:jetpack 页面，点击 Installed Features 标签，将在列表中显示有新安装的 Jetpack 扩展。
：
witter：
共有15 条评论
第一个来顶，回头试试~~
以后每天讲解一个Jetpack 扩展案例，作为推广^^
顶，板凳，每天一个啊，期待～～俺监督你！
” jetpack.tabs.focused.contentWindow.location 对象相当于 window 对象 ” 这句应该是 “jetpack.tabs.focused.contentWindow 对象相当于 window 对象”吧。
试了一下貌似挺简单呀，看看api能做出什么玩意来。谢谢怿飞的教程呀
@Robin 是的，笔误，已经更正，谢谢提醒。
Jetpack和Chrome的扩展开发差不多，感觉是在仿效Chrome。Firefox的扩展，还是用XUL+JavaScript功能更强大。
如何开发扩展给公众安装呢？
ff扩展传统的开发大概是怎么个路线呢,我只大概了解访问xpcom的
[...] Bespin ，它的图标很明确的描述了它的功能：云代码。说到这里不得不提，很多地方将云的概念喊得震天动地，可是否做出过几例真正贴近用户并且成功云应用呢？Bespin旨在开发一个基于web的代码编写平台，从而提高开发者效率。 Bespin目前提供了文件管理，代码编辑器，命令行控制台和代码预览等功能。现在Bespin还不能用于生产环境，但这只是时间问题。 Bespin 界面 Jetpack ，想当年我想给Firefox写一个饭否的小插件，问了几个同事，说除了我现在掌握的前端技术外还得学习XUL语言，我当时哪个蒙呀。虽说有个FF扩展的生成向导的eclipse插件，但是想做出我哪个小玩意还是要费一番周折的，最后还是放弃了。直到出现了Jetpack，真有相见恨晚的感觉。它可以像写web应用那样简单的开发出像模像样的FF扩展，怿飞这里已经有了详尽的描述和代码示范，大家可前去围观。 现在该这只可爱的小狐狸Personas了，我着实不知道这个扩展的功能和它的logo有什么联系，如果非要找共同点的话，那就是“可爱”。如果还有人把Firefox样子丑陋作为不去使用它的借口，那么Personas就是最好的武器。如果你还在羡慕Chrome绚丽的皮肤，那么有了Personas就可以让他们羡慕你，Personas不但提供了上百种已有皮肤，而且你还可以定制自己的皮肤，并且分享给大家使用，做法只是简单的提供一张头部和一张底部的图片而已。赶快给自己的FF穿上漂亮的衣服吧。 秀一下我FF的皮肤 下来该Prism了，它算是我使用最早的Mozilla labs里的应用了，大概是在06年吧。它的功能很简单，就是将你的web app拿出来变成一个desktop app。不用打开浏览器，其它它就是一个微型的FF。它可以使你的web app支持拖拽，离线浏览等功能。比如你可以将你的gmail用Prism变成一个桌面应用。 第五个来介绍一下Ubiquity这个小家伙，它的口号是“不要光在网上冲浪，去命令它！”。 Ubiquity是这样个东西：你不用打开你的电子邮件网站去发送email，你不用打开翻译软件就能进行文字翻译，你不用打开任何twitter客户端或者网站就可以发牢骚，你不用。。。 这一切只要你摁下你设定的快捷键，并输入简单的几个字母命令就可以轻松完成。这有点类似于我们所谓的“框计算”，得，还是别玩概念了。大家看看我以前改造的一个用Ubiquity发饭否(期待饭否的回归)的小命令就明白了。下面截图是我用Ubiquity翻译文字的实况： [...]
秀一下我FF的皮肤 下来该Prism了，它算是我使用最早的Mozilla labs里的应用了，大概是在06年吧。它的功能很简单，就是将你的
[...] 《如何创建 Firefox 的 Jetpack 扩展》 [...]
受教了。人生也有涯，知也无涯啊。。
学习了，感谢分享！
[...] 《如何创建 Firefox 的 Jetpack 扩展》 [...]
[...] Bespin 界面 Jetpack ，想当年我想给Firefox写一个饭否的小插件，问了几个同事，说除了我现在掌握的前端技术外还得学习XUL语言，我当时哪个蒙呀。虽说有个FF扩展的生成向导的eclipse插件，但是想做出我哪个小玩意还是要费一番周折的，最后还是放弃了。直到出现了Jetpack，真有相见恨晚的感觉。它可以像写web应用那样简单的开发出像模像样的FF扩展，怿飞这里已经有了详尽的描述和代码示范，大家可前去围观。 现在该这只可爱的小狐狸Personas了，我着实不知道这个扩展的功能和它的logo有什么联系，如果非要找共同点的话，那就是“可爱”。如果还有人把Firefox样子丑陋作为不去使用它的借口，那么Personas就是最好的武器。如果你还在羡慕Chrome绚丽的皮肤，那么有了Personas就可以让他们羡慕你，Personas不但提供了上百种已有皮肤，而且你还可以定制自己的皮肤，并且分享给大家使用，做法只是简单的提供一张头部和一张底部的图片而已。赶快给自己的FF穿上漂亮的衣服吧。 [...]