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>[email protected]</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>[email protected]</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信息。