火狐浏览器插件开发之“hello Word！”简易教程

2021-12-01 07:40:13

阅读 12369次标签： word基础教程作者： chyp

　　1. 准备目录结构

　　首先在硬盘上建立一个目录，名为extension。这个名字是随意取的。然后在里面建立chrome文件夹，再在chrome里面建立content文件夹。注意这两个文件夹的名字都是固定的，不能随意改动。然后在extension里面新建两个文本文件，并且取名为chrome.manifest和install.rdf。这样，就建立起如下的目录结构：

　　extension
　　|--install.rdf
　　|--chrome.manifest
　　|--chrome

　　|--content

　　2. 编写install.rdf

　　用文本编辑器打开install.rdf文件，输入以下内容：

　　Xml代码

火狐浏览器插件开发之“hello Word！”简易教程

　　install.rdf文件是供具有插件管理功能的XUL应用程序使用的，XUL应用程序可以使用该文件识别正在安装的插件的信息。install.rdf文件具有下面的格式：

　　Xml代码

火狐浏览器插件开发之“hello Word！”简易教程

　　上面的install.rdf的注释很多，实际应用中就不需要那么多注释了。

　　3. 编写XUL文件

　　Firefox的界面使用XUL和JavaScript进行描述。XUL即XML User Interface Language，是Mozilla开发的一种使用XML进行用户界面描述的语言。XUL只用来定义用户界面，其组件的功能由JavaScript进行定义。

　　Firefox的整个界面都使用XUL进行定义。可以在%FIREFOX_INSTALL_DIR%/chrome/browser.jar里面找到content/browser/browser.xul文件。（说明一下，jar文件可以用WinRAR或其他一些压缩工具解压缩，这是一个使用zip算法压缩的压缩包）在这个XUL文件中有这么一段：

　　Xml代码

　　这里的这个称为“覆盖点(Overlay，我不知道官方的翻译是什么，自己把它翻译成了这个词，想想还算是准确，不过为了不引起混淆，下面还是使用Overlay这个单词吧 :-) )”。所谓Overlay，就是在运行一个XUL文档的时候可以附加其他的XUL文件的方式。就是说，我们本来的XUL是a.xul，这里面有一个Overlay定义为overlay-point，那么我们可以在另外一个b.xul中对这个Overlay进行追加，从而在执行a.xul的时候可以自动的把b.xul的内容附加到overlay-point并运行出来。这么说有些抽象，来看我们的代码：

　　Xml代码

火狐浏览器插件开发之“hello Word！”简易教程

　　刚刚说了，就是一个Overlay，那么在我们的插件的XUL文档就是基于这个Overlay进行扩展。在这里，我们在statusbar上面定义了一个statusbarpanel，它的id是my-panel，label是Hello, World。这段代码比较清晰，就是在原有的statusbar上追加一个statusbarpanel，这个statusbarpanel显示Hello, World。

　　明白了这段代码之后，我们把这个文件定义成sample.xul，保存在chrome/content下面。可以看到这个文件夹结构和Firefox自有的那个结构是一致的。

　　在写完了XUL文件之后，我们要定义其chrome.manifest。XUL文档需要通过chrome://协议进行请求。chrome://类似http://协议，只不过是用来请求XUL文档的。在Firefox的地址栏中输入chrome://browser/content/browser.xul，看看有什么反应，就会知道XUL文档的作用了。

　　这个URL包括四部分：

　　1) chrome:// - 即协议名，就像http://一样；
　　2) browser/ - 包名，即插件的包的ID；
　　3) content/ - 请求内容的类型；

　　4) browser.xul - 请求的文件名。

　　所以，chrome://foo/skin/bar.png就是请求一个在foo包下面的skin里面的bar.png文件。

　　4. 编写chrome.manifest

　　在chrome.manifest中添加下面一句：

　　content sample chrome/content/

　　这里指明，请求类型时content，包名是sample，位置是相对于chrome.manifest文件的chrome/content/。注意，这里的最后面一个/是不能缺少的！

　　然后需要告诉Firefox我们的扩展Overlay，在chrome.manifest里面再添加一句：

　　overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

　　这句是告诉Firefox，需要在chrome://browser/content/browser.xul加载的时候将chrome://sample/content/sample.xul扩展进来。

　　5. 测试

　　至此，我们已经完成了这个Hello World的插件。下面我们测试一下。

　　使用压缩工具将extension文件夹压缩成zip文件，注意有些工具会将本文件夹加入压缩包，这里要求压缩包解开之后应该是extension下面的两个文件和一个文件夹，而不是extension文件夹。然后将后缀名改为xpi。然后打开Firefox（我测试的版本是3.0.10），将这个xpi拖到窗口中，Firefox将提示安装插件，按照一般的过程安装之后，重启Firefox有时候在安装插件时会有找不到安装脚本的错误，就是因为在压缩时根下面没有install.rdf那一层导致的。

　　当我们在重启Firefox之后，右下角出现Hello, Word字样时，说明我们的插件已经安装成功了！其实网络上有许多关于小程序小插件的设计制作过程，许多有兴趣或者有能力的朋友可以自网络上查找信息，自己就能够把它做出来！

下一篇：绚丽墙绘颜料搭配有选择，手绘墙用什... 企业如何提高产品质量，从供应商着手... 上一篇：