FireFox Extension 开发 Helloworld

FireFox有很好的扩展性。用户可以编写简单的编写FireFox的插件。本文介绍如何写一个插件的helloworld

1.extension的文件结构
下载其他的插件，比如firebug。会是一个xpi文件。其实这就是zip格式压缩的文件。修改后缀名解压后。发现里面有
install.rdf
chrome.manifest
chrome文件夹
chrome/content
chrome/skin
....

其中install.rdf定义了插件的基本信息和安装需要的版本等等。
chrome.manifest里面则指定了ui，skin，local文件的位置等等，这里不详细讲解，可以访问mozilla网站了解详细内容。

2.建立文件结构
接下来，我们就模仿这个结构来创建自己的extension
首先建立一个文件夹，取名myExtension
在myExtension中创建install.rdf,chrome.manifest这两个空的文本文件。
创建一个文件夹，取名chrome
打开chrome文件夹，创建一个文件夹，取名content
因为本文目的是写一个helloworld，所以不准备local和skin，所以这里只建立的content文件夹。
打开content文件夹，创建一个overlay.xul文件和style.css文件
xul文件是xml格式的文件，作用是描述界面。

3.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">
    <em:id>aaa@bbb.com</em:id>
    <em:version>1.0</em:version>
    <em:type>2</em:type>
  
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.0</em:minVersion>
        <em:maxVersion>3.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  
    <!-- Front End MetaData -->
    <em:name>sample</em:name>
    <em:description>Your Description</em:description>
    <em:creator>Your Name</em:creator>
    <em:homepageURL>http://www.csdn.com/</em:homepageURL>
  </Description>     
</RDF>

其中<em:id>aaa@bbb.com</em:id>是这个extension的id，注意格式为url，可以使用自己的邮箱作为id。
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>这个值是firefox的id，必须为这个值
其他tag的含义很明显的，这里不一一介绍。

4.chrome.manifest
打开chrome.manifest，输入一下内容：
content     sample    chrome/content/

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

第一行指明了content的位置
第二行指明了界面的入口。

5.overlay.xul
打开overlay.xul 输入一下内容：

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<overlay id="sample"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
    xmlns:html="http://www.w3.org/1999/xhtml" >
  <statusbar id="status-bar">
   <statusbarpanel id="statusbar_fs_sz" insertafter="statusbar-display" style="color:blue" label="helloworld" warning="true"/>
</statusbar>

</overlay>

在打开style.css文件输入一下内容：
/*** XUL demonstration ***/

/* the status bar */
statusbar {
    width: 100%;
    border: 1px inset -moz-dialog;
    margin: 4px;
    padding: 0px 4px;
}

#status {
   
}

#status[warning] {
    color: red;
}

6.将这些文件打包，压缩为zip文件。注意，不是压缩myextension文件夹，而是压缩myextension文件夹下的文件和文件夹。
将文件的扩展名改为xpi，拖入firefox就可以安装了。再次启动后，就可以看到右下角的statusbar显示helloworld信息。