火狐扩展插件学习笔记2

转自：http://blog.csdn.net/zhaozheng7758/article/details/6307839

Mozilla官方教程开发的，有兴趣的朋友可以自己去看看：https://developer.mozilla.org/en/Building_an_Extension。


按照一般的教程，第一个程序都是使用最简单的Hello World，现在我们就制作一个Firefox的Hello World扩展。



开发Firefox插件并没有看上去的那样复杂，仅仅使用XML和JavaScript就可以完成。当然，这个意思是Firefox插件开发使用的 技术是XML和JavaScript，要做出一个完善的插件涉及到很多方面。但是对于我们的Hello World就不需要那么多东西啦！



1. 准备目录结构



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

extension

|--install.rdf

|--chrome.manifest

|--chrome

    |--content



2. 编写install.rdf



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

<?xml version="1.0"?>



<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

         xmlns:em="http://www.mozilla.org/2004/em-rdf#">



    <Description about="urn:mozilla:install-manifest">

        <!-- 指出扩展的ID。该ID应该是一个Email格式的字符串，或者是一个GUID。注意，使用Email的作用是保证该ID的唯一性，并不要求这个Email地址是有效的。必填-->

        <em:id>sample@example.net</em:id>

        <!-- 指出插件的版本号。必填 -->

        <em:version>1.0</em:version>

        <!-- 在这里的值必须是2。该标签说明该应用的Firefox扩展，而不是其他XUL应用程序。Firefox插件的代码是2，如果是Firefox主题则会是4。必填 -->

        <em:type>2</em:type>



        <!-- 安装扩展的目标应用程序以及最高版本和最低版本。必填 -->

        <em:targetApplication>

            <Description>

                <!-- Firefox的ID，这个值不能改变。必填-->

                <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>

  <!-- 指明能使用该扩展的Firefox最低版本。这里是指1.5。必填 -->

                <em:minVersion>1.5</em:minVersion>

  <!-- 指明能使用该扩展的Firefox最高版本。这里是指4.0.x。结合minVersion，即是说本扩展只适用于1.5和4.0.x之间的版本。必填-->

                <em:maxVersion>4.0.*</em:maxVersion>

            </Description>

        </em:targetApplication>



        <!-- 扩展的元数据。 -->

        <!-- 扩展名字。必填 -->

        <em:name>sample</em:name>

        <!-- 扩展的描述。这里的描述将出现在Firefox的工具-附加组件的描述栏。选填 -->

        <em:description>A test extension</em:description>

        <!-- 扩展作者。选填 -->

        <em:creator>zaniel</em:creator>

        <!-- 扩展主页的URL。选填 -->

        <em:homepageURL>http://www.china.alibaba.com/</em:homepageURL>

    </Description>            

</RDF>



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



<?xml version="1.0"?>



<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

         xmlns:em="http://www.mozilla.org/2004/em-rdf#">

    <Description about="urn:mozilla:install-manifest">

        <!-- properties -->

    </Description>

</RDF>



上面的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文件中有这么一段：



<statusbar id="status-bar">

<!-- ... <statusbarpanel>s ... -->

</statusbar>



这里的这个<statusbar id="status-bar">称为Overlay。所谓Overlay，就是在运行一个XUL文档的时候可以附加其他的XUL文件的方式。就是 说，原来有一个XUL是a.xul，里面有一个Overlay定义为overlay-point，如果我们可以在另一个b.xul中对这个Overlay 进行追加，在执行a.xul的时候可以自动的把b.xul的内容附加到overlay-point并运行出来。如下的代码所示：



<?xml version="1.0"?>

<overlay id="sample"   

                 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<statusbar id="status-bar">

    <statusbarpanel id="my-panel" label="Hello, World"    />

</statusbar>

</overlay>



刚刚说了，<statusbar id="status-bar">就是一个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，将这个xpi拖到窗口 中，Firefox将提示安装扩展，按照一般的过程安装之后，重启Firefox有时候在安装扩展时会有找不到安装脚本的错误，就是因为在压缩时根下面没 有install.rdf那一层导致的。



当我们在重启Firefox之后，右下角出现Hello, Word字样时，说明我们的扩展已经安装成功了！



6、导常排查

在安装时，FireFox总是报不是合法的安装包，具体的报错及解决方案如下所示：

Firefox 无法将文件安装至

file:///C:/extension/extension.xpi



，原因为: 不是合法的安装包

-207



解决方案：在生成extension压缩包的时候，采用zip的方式，而不是rar的方式。