Firefox插件/擴展開發之Hello World無廢話版

有一點你要明白，你要開發的其實是擴展（extension），而不是插件(plugin)。我們的目標在FireFox的狀態欄顯示Hello World，如下圖所示：

1. 準備工作
下載FireFox，我使用的版本是3.1b1
2. 創建存放擴展的目錄結構
進到目錄“%HOMEPATH%/Application Data/Mozilla/Firefox/Profiles”，再進入一個default結尾的目錄，然後再進入extensions目錄。這個目錄就是FireFox默認用戶存放所有擴展的地方。在我的機器上，這個目錄全稱是：C:/Documents and Settings/Administrator/Application Data/Mozilla/Firefox/Profiles/g0xoke2u.default/extensions
在這個目錄下創建一個新的目錄用來存放待開發的擴展，目錄名爲[email protected]。名字是隨便取的，大概像一個郵件地址即可，後面會用到。
進入剛建的目錄，再創建目錄chrome目錄。進入chrome目錄，再創建一個content目錄。

3. 添加Hello World到狀態欄
在content目錄下，創建一個ui.xul文本文件，輸入以下內容並保存：

1. <?xml version="1.0"?>
2. <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
3.   <statusbar id="status-bar">
4.     <statusbarpanel id="my-panel" label="Hello world"  />
5.   </statusbar>
6. </overlay>

到此，核心的工作已經完成。你可能奇怪爲什麼沒有編寫任何代碼。是的，FireFox的界面是由一系列的xml格式的xul文件定義的。如果你在瀏覽器的地址欄輸入chrome://browser/content/browser.xul，你能看到頁面內置了另外一個FireFox。其中browser.xul定義了FireFox的主界面，你要做的就是找到browser.xul中定義的狀態欄，並在其上增加文本“Hello World”。ui.xul正是完成了這樣的工作。其中statusbar id="status-bar"就是狀態欄，而statusbarpanel id="my-panel" label="Hello world"就是你在狀態欄中新增的子面板，裏面包含了你要顯示的文字。

4. 告訴FireFox你添加的內容
接下來的工作和Hello World功能的實現無關。進入到本擴展的根目錄，也就是[email protected]，新建一個文本文件chrome.manifest。內容如下：
overlay    chrome://browser/content/browser.xul    chrome://sample/content/ui.xul
content    sample    chrome/content/
這個文件告訴FireFox關於ui.xul文件的信息。其中第二行定義了一個名字爲sample的content，它的路徑是chrome/content/。第一行引用了這個content，並告訴FireFox這個content目錄下有個叫ui.xul的文件，它應該被用來和主界面文件browser.xul一起定義整個瀏覽器的界面。

5. 添加安裝信息
最後一步是定義關於這個擴展的信息，還是進入[email protected]目錄，新建一個install.rdf文本文件。內容如下：

1. <?xml version="1.0"?>
3. <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
4.   <Description about="urn:mozilla:install-manifest">
5.     <em:id>[email protected]</em:id>
6.     <em:version>1.00</em:version>
7.     <em:type>2</em:type><!--2 means this is an extension-->
8.    
9.     <!-- Target Application this extension can install into, with minimum and maximum supported versions. --> 
10.     <em:targetApplication>
11.       <Description>
12.         <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id><!--ID of firefox-->
13.         <em:minVersion>2.0</em:minVersion>
14.         <em:maxVersion>3.9</em:maxVersion>
15.       </Description>
16.     </em:targetApplication>
17.    
18.     <!-- Front End MetaData -->
19.     <em:name>Hello World</em:name>
20.     <em:description>Hello World</em:description>
21.     <em:creator>Xu Huanze(Wayne)</em:creator>
22.     <em:homepageURL>http://blog.csdn.net/ZJXHZ</em:homepageURL>
23.   </Description>      
24. </RDF>

可以看到，裏面定義了版本，描述，兼容的FireFox版本等等。其中<em:id>[email protected]</em:id>定義了本擴展的ID，注意這裏的名字要和目錄名相同。其中“{ec8030f7-c20a-464f-9b0e-13a3a9e97384}”是FireFox的程序ID，緊接着的2.0和3.9表示本擴展兼容於2.0到3.9之間的FireFox版本。

6. 打包
你完全可以將剛纔創建的文件和目錄拷貝到另一臺機器上以完成安裝，但是也有其他的方法。這裏介紹一種比較簡單的，進入helloworld插件根目錄，將其打包成zip文件。注意：chrome.manifest和install.rdf必須在zip文件的根目錄下。重命名該文件，擴展名修改爲xpi。在另外一個FireFox上安裝時，可以打開“工具->附加組件”，然後將xpi文件拖放到這個窗口即可完成安裝。

7. 參考
https://developer.mozilla.org/en/Building_an_Extension
http://www.ibm.com/developerworks/cn/web/wa-lo-firefox-ext/#xpcom-sidebar