浏览器扩展开发上(Firefox) 主讲：赵先烈

Presentation on theme: "浏览器扩展开发上(Firefox) 主讲：赵先烈"— Presentation transcript:

1 浏览器扩展开发上(Firefox) 主讲：赵先烈 Email：zhaoxianlie@baidu.com 2011-03-17
关于浏览器扩展开发，打算分两期来跟大家一起讨论 第一期：Firefox扩展开发 第二期：Chrome扩展开发 内容比较多，挤到一块儿来讨论，效果怕不咋地。 我觉得，只有真正的经历一遍整个开发过程，我们才能对“Firefox扩展”有一个更加深入的认识。 我今天主要跟大家一起来讨论的是“如何自己动手去开发一个Firefox扩展”， 原理或者理论性的东西，我就不跟大家一起来讨论了，网上很多这方面的信息。

2 目录 一、关于扩展与插件 二、关于Firefox 三、Firefox扩展 3.1、常用的Firefox扩展

3 一、关于扩展与插件 1.1、扩展的定义 它通常是扩展开发者为了修改或者增强浏览器本身的功能而提供的一种打包格式。它通常由包含功能代码的js脚本、包含界面的xul文件（Chrome扩展中为html文件）以及包含皮肤的css文件和各种图像文件组成。 插件（plugins）、扩展（extensions）与主题（themes）和语言包（languages）都是附加组件（Add-ons）不同种类。 两种扩展的文件结构比较起来，Firefox扩展要比Chrome扩展要负责的多。扩展的格式都是xpi/crx后缀的，其实是zip格式打包的。

4 一、关于扩展与插件 1.2、插件的定义 它通常是第三方应用程序提供给浏览器使用的二进制文件，即第三方应用程序把相关功能编译成了二进制的机器指令提供给各类浏览器，方便它们调用。通常用NPAPI实现（Firefox里还可以用XPCOM）。 浏览器需要显示某些自身并不能显示的特定文件类型的时候，就会调用与之相关的第三方应用程序提供给浏览器的插件来显示它。 例如，Adobe提供给firefox的插件“Adobe reader”使其能直接在浏览器里显示网络上的pdf文档，而Adobe提供给firefox的另一个插件“Adobe shockwave flash”则使其能显示网页中嵌入的flash。Microsoft提供的“Windows media player firefox plugin”使firefox能播放网页中嵌入的windows媒体（wmv、wma、asf以及对应的播放列表格式）。 从形式上讲：插件是已经将代码编译成了机器指令的二进制文件，而扩展是一个源码包。 从作用上讲：插件是为了让firefox能够显示特殊格式的文件而由相应的第三方应用程序（如 windows media player 和 Adobe reader）提供的；而扩展是为了修改或增强firefox本身的功能而由扩展开发者提供的。 从字面意思上讲：插件（plug-ins）的plug是插的意思，一个由外至内的动作；扩展（extensions）的extension是延伸、扩充的意思，一个由内而外的动作。 也就是说：插件是“外部”的，而扩展是“内部”的。

5 一、关于扩展与插件 1.3、扩展和插件的文件类型
windows下，Firefox扩展的文件类型为*.xpi，Chrome扩展的文件的文件类型为*.crx，但通常还会附带一个 类型为*.pem的文件。而浏览器插件的类型多为*.exe、*.dll等。 Firefox扩展的文件后缀为xpi（Cross Platform Installer） Chrome扩展在第一次打包时，会同时成才*.crx和*.pem两个文件，前者为扩展文件，共用户使用，后者则为私钥文件。 在后续升级*.crx文件时，开发者都需要提供原版的*.pem文件，用以生成和第一次打包相同的扩展ID。 因为chrome扩展的升级是根据ID自动完成的。

6 一、关于扩展与插件 1.3、自己开发的一些小工具 1）、LocalAlbum（Firefox扩展）
2）、LocalAlbum（Chrome扩展） 3）、EncoderDecoder（Chrome扩展） 4）、FDPHelper（Chrome扩展） 5）、NPAPIHelper（Chrome插件） 这些小工具都很不起眼，但是对我自己来说，比较实用。 1、LocalAlbum：个人而言，比较喜欢看一些网上别人收藏的图片，但是每次登陆空间去看，会觉得非常麻烦，而且还有一些额外的东西我根本不关注。所以做了这么一个小工具，不用登陆百度空间，直接就能浏览别人收藏的图片。而且现在支持配置，可以看自己的相册，也可以看别人的相册。非常方便，目前做了Firefox核Chrome的两个版本。 2、EncoderDecoder：用来对文字串进行编解码。我自己在做扩展开发的过程中，常常会遇到中文乱码输出的问题，这个时候我就需要用到自己开发的这个工具，将中文转换为Unicode码。现在支持Unicode编码、Base64编码和解码 3、FDPHelper：在FDP上写文档，有时候会在哪儿写HTML代码，但是在textarea里面写代码比较费劲儿，所以我弄了这个东西，快捷写HTML/CSS代码。

7 二、关于Firefox 2.1、关于Firefox 传送门：维基百科
关于Firefox的“发展历程”、“未来发展”、“版本历史”、“特色”、“便携式版本”、“推广活动”、“市场接纳度”、“评价”等相关信息，在维基百科都有相关的记录和总结。 我们下面来看看Firefox的发展历程。

8 二、关于Firefox

9 三、Firefox扩展 3.1、常见的Firefox扩展
Firebug 、 Web Developer 、HttpFox、Mouse Gesture、 Greasemonkey 、 Gmail Manager 、 Google Toolbar、 Adblock Plus 、 FoxyProxy、FireFTP… Firebug - 一个开发编程使用的扩展，在编辑和调试CSS、HTML、JavaScript的时候使用。 Web Developer - 编程开发使用一个扩展，可以实现很多有用的功能，例如我在研发网中就是用其中的POST-GET转换来绕过内部的防火墙。 HttpFox - 和 IE下的 httpwatch 很相似 Mouse Gesture – 鼠标手势 Greasemonkey - 可以让用户自定义运行一些小JavaScript程序代码，很多小扩展都是基于Greasemonkey的。 Google Toolbar - Google工具栏具有拦截广告、自定义按钮、建立书签、网页翻译等多项功能，使得搜索和浏览更为方便，非常好用。 Adblock Plus - 使用Adblock Plus可以摆脱包括Google Adsense在内的大部分广告和横幅，但大部分网站管理员都不喜欢这个扩展，因为其屏蔽广告会减少网站广告收入。 Video DownloadHelper - 这是一个从Youtube和其他类似网站下载视频文件的最简单的方法。 Gmail Manager - 管理多个Gmail账户的扩展，可以方便的在不同的Gmail账户中切换。 Access Flickr - 可以访问Flickr相册的所有照片。 FoxyProxy - 强大的代理服务器扩展，功能很多很全，也很好用。 FireFTP Firefox上的一个免费、安全、跨平台的FTP客户端，提供目录对比，目录同步，SSL加密，文件hash等高级功能。 Firefox支持以Netscape Plugin Application Program Interface（NPAPI）应用程序接口为基础的插件，这是早期浏览器共同支持的外挂标准，从Opera和Internet Explorer 3.0至5.0都支持NPAPI。目前较为常见的插件包括Flash Player、Acrobat Reader、Java、Quicktime、RealPlayer、Shockwave及Windows Media Player。

10 三、Firefox扩展 3.2、Firefox扩展开发的常用工具 浏览器：Firefox
开发工具：Spket、Aptana、notepad++、 DOM Inspector、 Developer Helper … 打包工具：Extension Developer Firefox浏览器是必备的 至于开发编辑工具，就用普通的记事本也可以完成，但是Spket编辑器能够自动建立Firefox扩展的文件目录结构，能够提高开发效率。 我个人用的是Aptana & ZenCoding，用ZenCoding可以配置很多的快捷代码片段，也能提高开发效率。 如果大家不习惯使用Apatna，但是又想用ZenCoding的话，也可以用我做的Chrome扩展FDPHelper 来勉强替代 打包工具就用普通的文件压缩工具winrar即可，但是官方提供了一个更加实用的扩展Extension Developer，能实现一键打包 Developer Helper能帮助我们在开发的过程中直接载入“正在开发中的扩展”（就像Chrome扩展开发一样）

11 三、Firefox扩展 3.3、Firefox扩展的结构 上图“demo03”是精简程度最细的Firefox扩展，只包含核心的三个文件。
左图“zxl”则是一个目录结构比较完整的Firefox扩展。 Chrome 指的是应用程序窗口的内容区域之外的用户界面元素的集合，这些用户界面元素包括工具条，菜单，进度条和窗口的标题栏等。 Chrome 包含的内容： Content 这个是最主要的目录，下面存放的是扩展的描述界面的 XUL 文件和增加行为的 JavaScript 文件。 locale 目录存放的是本地化相关的文件。如果需要支持英文和中文，就可以在 locale 目录下面新建 en-US 和 zh-CN 目录来存放相应的本地化字符串。如果想让组件能够在不同语言的firefox里显示正确的文本，则将不用的语言列表放到此目录，firefox会自动加载合适的语言文件。 skin存放CSS样式表文件及资源位图，css是用来控制组件界面外观的。 install.rdf：描述该组件的安装信息，例如组件的名称、版本、作者等信息，XML格式； chrome.manifest：是用于描述该组件由哪些文件组成的，即一个资源列表； Firefox中，要获取扩展的独立文件，可以通过chrome://extensionName/filepath获取 Chrome中，要获取扩展的独立文件，可以通过chrome-extensions://extensionID/filepath获取

12 三、Firefox扩展 3.4、Firefox扩展安装及运行的简单原理图 XUL overlay Firefox主界面容器
XULRunnder install.rdf 内核 用这个图来简单描述Firefox扩展的安装及运行原理： 1、安装：扩展的安装由install.rdf负责，里面会描述此扩展的id,名称，目标载体（firefox或其他Mozilla程序）名称和版本号等信息。Firefox根据这些描述信息将扩展注册到其扩展管理器中 2、运行：扩展的运行主要由chrome.manifest文件来负责。扩展管理器或根据清单文件来加载相应的xul资源，去overlay（融合）到Firefox主界面容器中，最终运行。 chrome.manifest

13 三、Firefox扩展 3.5、认识Firefox扩展中的几个重要文件 1）、install.rdf 2）、chrome.manifest
3）、overlay.xul install.rdf：描述该组件的安装信息，例如组件的名称、版本、作者等信息，XML格式； chrome.manifest：是用于描述该组件由哪些文件组成的，即一个资源列表； Overlay.xul：描述Firefox扩展的用户界面的 下面我们分别来看一下每个文件里面都该写些什么内容。

14 三、Firefox扩展 1）、install.rdf 这就是一个比较完整的install.rdf文件的内容，下面分别介绍一下：
Em:name表示扩展的名称，这个地方需要和扩展包package的名称区别开来 Em:version表示当前扩展的版本数字字符串，具体的格式，在官方文档里有详细介绍。 Em:id表示当前扩展的唯一标识，每个Firefox的profile都是通过扩展id来加载响应的扩展的，这个值得注意。 有两种写法，一种是以邮件格式（但可以是一个无效的邮件地址）；一种是通过微软guidgen.exe工具来自动生成。 Em:type是一个非常重要的值，Firefox规定只能出现4个值： 2：扩展Extensions 4：主题Themes 8：本地化、皮肤Locale、Skin 16：插件Plugins 我们这个地方开发的是Firefox的扩展安装包，因此，类型为2 Em:targetApplication也是一个非常重要的配置项，用来指明当前开发的扩展所适用的Mozilla平台，以及其版本号。 大家都知道，Mozilla是一个大家族，包含了我们最为熟知的Firefox，还有Thunderbird、SeaMonkey、Sunbird、还有Nvu、Netscape Browser、Flock Browser、Mozilla Suite等。 每个Mozilla平台都有与其对应的<em:id>。这些id都是可以从Mozilla官网查询到的。 Em:minVersion和em:maxVersion分别表示当前扩展所能适应的Firefox浏览器版本，如果要将扩展发布到AMO上，那么这个数值也不能随便填写，要遵循一定的原则（小的不能太小，大的不能太大）。 如下为 Em:description是开发者对扩展的描述 Em:creator表示扩展开发者 Em:contributor表示扩展的贡献者（合作者） Em:iconURL表示当前扩展在扩展管理器中显示的图标，同样可以通过chrome://iconPath方式获取 Em:updateURL可以使得Firefox自动检测该扩展的更新。因为基于Mozilla的扩展有一个特点，就是可以自动检测版本进行提示升级，而em:updateURL就是做这个用的。（一般不写，否则上传到AMO会报错） Em:optionURL为用户提供一个选项页面，供用户进行扩展属性的配置，通过chrome://进行指定。一个功能完善的扩展，都有必要设计一个这样的页面。 Em:aboutURL就是一个普通的“about窗口”，指定方式和optionURL一样 Em:homepageURL表示该扩展或者该开发者的主页 Em:targetPlatform用来限制扩展所实用的操作系统，没有特殊的要求，一般都不填

15 三、Firefox扩展 2）、chrome.manifest 写法一：目录形式 写法二：jar包形式
这是一个完整的扩展清单文件，图中demo02是扩展的包名 Chrome.manifest中的配置可以有两种形式，目录形式和jar包形式 第一行表示扩展的内容在chrome/content目录下 第二行指定扩展的默认本地化为英文 第三行表示扩展的皮肤所在目录，主要是一些css文件 第四行尤为重要，这一行告诉Firefox，扩展的界面描述文件是ff-1.xul

16 二、Firefox扩展 3）、overlay.xul 这是一个简单的overlay.xul文件，是扩展界面描述的核心。
Xul=XML User Interface Language 关于xul的语法，可以从官网上查询：

17 三、Firefox扩展 3.6、实战Firefox扩展开发 1）、准备 2）、开发 3）、测试&打包&安装
4）、发布到AMO（ 实例：以HelloWorld为例，分别在状态栏和鼠标右键上加入HelloWorld，点击时弹框显示“Hello World”。 接下来就是今天的重点： 用几分钟的时间，现场演示一下一个Firefox扩展的前期准备、开发、测试、再到发布的完整过程。 接下来要演示的实例： 以HelloWorld为例吧，分别在状态栏和鼠标右键上加入HelloWorld，点击时弹框显示“Hello World” Install.rdf中firefox的版本范围不是乱写的，要想将你开发的扩展提交到官网去，就必须遵循下面的约定： 1）、准备 a、工具的准备（Firefox、Extension Developer、Aptana、 ） b、profile的准备（正常情况下用：firefox –profilemanager；最靠谱的方法：更改启动参数：-p devprofile） 2）、开发（搭建扩展目录结构、写代码，开发工具采用Aptana&ZenCoding） 3）、测试&打包&安装 a、用Extension Helper进行开发过程中的测试 b、用Extension Developer来打包扩展 c、拖到Firefox应用模式下的profile中进行安装 4）、提交到AMO（ a、（需要先注册一个Mozilla的账号，然后经过几个比较繁琐的过程才能将扩展传到官网上，全流程免费）

18 三、Firefox扩展 3.7、深入Firefox扩展 官方基础教程：
官方开发网： 在线创建扩展： 官方的一个基础教程，通过此篇文章而入门； 官方开发网，类似MSDN，是开发时的主要参考资料； 一个在线的创建扩展的向导，如果你想立即创建一个属于自己的扩展，可以试试用这个向导制作一个雏形，然后再自己慢慢添砖添瓦。 Firefox扩展中文社区

19 三、Firefox扩展 3.8、Firefox扩展开发总结 优点： 1）、对开发工具没有要求 2）、开发与测试环境很方便
3）、有很多其他扩展可以辅助开发 4）、免费发布到AMO 1）、需要提前准备的开发工具不多（Firefox、Extension Helper、Extension Developer、Aptana） 2）、开发环境和测试环境，都是我们非常熟悉的，Firefox 3）、开发过程中，有Extension Helper、Extension Developer、DOM Inspector等这样的扩展来辅助我们完成扩展的开发 4）、提交到AMO很方便（只要注册一个Mozilla账号，通过简单的几个步骤，就可以免费的将我们自己开发完成的扩展上传到官网）

20 三、Firefox扩展 缺点： 1）、扩展的目录结构比较固定、复杂 2）、需要开发者具备一定的XUL知识
4）、扩展相关的API文档不易查询 1）、目录结构很复杂，需要建立很多文件夹和独立文件 2）、要开发一个较好的Firefox扩展，需要具备一定的XUL基础知识，用于页面布局（还有JS、XUL/XML、CSS） 3）、如果不借助Extension Helper扩展，那么每次修改以后必然需打包、安装、再重启Firefox来看到效果，非常繁琐 而在扩展打包的时候，虽然说Firefox的扩展就是一个zip包，但是如果用普通的压缩工具来打包我们的扩展，然后再修改后缀为.xpi，不同的压缩工具对文件列表的排序也不一样，最终有可能导致扩展不能安装或安装后无法使用，所以还是需要使用其他工具：Extension Developer 4）、官方也提供了MDN，但是查询起来不是太方便（和Google Chrome Extension的API比起来说） 其实和Chrome扩展开发比起来，单是上面几点，就已经让一个新手有放弃Firefox扩展开发的念头了 关于Chrome扩展开发到底有多容易，我下次例会再来跟大家一起来讨论。

21 没有了，谢谢！