作為一篇初學者教程，一般第一個擴展都是hello world擴展，我的例子也不例外，也是一個hello world擴展，但是本擴展要實現的功能不是彈出一個對話框顯示hello world。而是實現重啟Firefox這個功能。為什么要以這樣一個功能為例子呢？因為在開發擴展過程中，我們每次對擴展中的文件作出了修改之后，想看看效果都必須重啟Firefox。按照上一篇文章那樣建立一個bat文件雖然很方便，但是每次都需要先關閉用于調試的Firefox以及其打開的所有子窗口，然后再雙擊那個bat文件。有了這個重啟Firefox的功能，下次我們調試擴展的時候只需要簡單的點擊一下這個重啟的按鈕或者菜單項就OK了。雖然功能簡單，但對于擴展開發者非常實用。下面介紹如何一步一步的創建這個重啟擴展。

建立文件結構

建立一個名為restart的文件夾，其內建立一個文件夾chrome以及兩個文件：chrome.manifest和install.rdf；我們建立標準的文件結構，在chrome文件夾中新建三個文件夾：content、locale、skin。如下所示：

注意，在擴展開發中所有的文件盡量都保存為UTF-8編碼格式，特別是本地化所使用到的文件。

編輯配置文件

文件結構建立好之后，就要對配置文件進行編輯了，編輯之前請想好自己要使用的package名稱以及準備使用的ID，這里以package名稱restartfirefox和ID：restart@restartfirefox.org為例。我們先來看chrome.manifest文件該如何編輯。

chrome.manifest文件

chrome.manifest文件有兩個功能，一個功能是指定各種程序包的相對路徑，另一個功能是指定擴展中的XUL文件疊加到哪個已有的XUL上。我們建立標準的結構，因此首先指定三個程序包的路徑，內容如下：
content restartfirefox chrome/content/
skin restartfirefox classic/1.0 chrome/skin/
locale restartfirefox en-US chrome/locale/en-US/
這樣寫之后如果要引用content目錄下的a.xul文件則可以用：chrome://restartfirefox/content/a.xul；如果要引用skin目錄下的b.css則可以用：chrome://restartfirefox/skin/b.css。
注意skin和locale程序包都包含四個部分，而content包只有三個部分。locale程序包比較特殊，可以定義多個locale包，如在上述定義之后還可以加上如下內容：locale restartfirefox zh-CN chrome/locale/zh-CN/這樣如果locale/zh-CN/和locale/en-US/中都有一個c.dtd文件，我們只需要使用chrome://restartfirefox/locale/c.dtd，Firefox就會根據用戶的locale自動選擇使用en-US或者zh-CN中的c.dtd文件了。
第二個功能就是指定疊加目標，指令為overlay，示例如下：
overlay chrome://browser/content/browser.xul chrome://restartfirefox/content/restartOverlay.xul
overlay指令包括三個部分，第一部分是overlay指令，第二部分是目標XUL文件的chrome URL第三部分是我們創建的XUL文件的chrome URL。上述指令的意思是將我們在content目錄建立的restartOverlay.xul文件疊加到瀏覽器上。
chrome.manifest文件中還可以包含其他指令如：style、component等指令，我們這個例子不需要這些。
下面是本例的chrome.manifest文件的完整內容：
content restartfirefox chrome/content/ skin restartfirefox classic/1.0 chrome/skin/ locale restartfirefox en-US chrome/locale/en-US/ locale restartfirefox zh-CN chrome/locale/zh-CN/overlay chrome://browser/content/browser.xul chrome://restartfirefox/content/restartOverlay.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"></Description> </RDF> 在description之間定義所需要的屬性。必須要有的包括：id、version、type、targetApplication。必須屬性寫成這樣：
<em:id>restart@restartfirefox.org</em:id> <em:version>0.1 </em:version> <em:type>2</em:type><em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>4.0</em:minVersion> <em:maxVersion>13.0</em:maxVersion> </Description> </em:targetApplication> targetApplication包含三個內容，id表示目標應用程序的UUID，上面這個id就是Firefox的UUID。minVersion和maxVersion表示支持的目標應用程序的最小最大版本號，上面表示可以安裝到Firefox 4.0到Firefox 13.0這些版本，當然現在Firefox已經自動默認支持擴展了，因此maxVersion的意義不大，除非你指定：<em:strictCompatibility>true</em:strictCompatibility>，但這是gecko 10之后才有的一個屬性。
可選屬性中比較常用的包括name、description、creator、homepageURL、iconURL。根據需要可以選擇optionURL指定選項面板的xul文件和aboutURL指定關于面板的URL。
可以有本地化描述，使用localized屬性，注意如果使用localized請確保文件編碼為UTF-8。
本例的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>restart@restartfirefox.org</em:id> <em:version>0.1 </em:version> <em:type>2</em:type><em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>4.0</em:minVersion> <em:maxVersion>13.0</em:maxVersion> </Description> </em:targetApplication> <em:iconURL>chrome://restartfirefox/skin/icon.png</em:iconURL> <em:name>FireRestart(simplified)</em:name> <em:description>Restart Firefox quickly, for extension developers。 Added a toolbarbutton to the customize ToolbarPalette， you can drag it to anywhere you like in the toolbar or addon bar。there is also a full version which had added a menuitem to the file menu。</em:description> <em:creator>JumuFENG</em:creator> <em:homepageURL>http://blog.csdn.net/z6482</em:homepageURL> <em:localized> <Description> <em:locale>zh-CN</em:locale> <em:name>FireRestart(精簡版)</em:name> <em:description>快速重啟firefox，定制工具欄中添加了一個按鈕，可手動移動到任何地方。完整版在文件菜單中增加了重新啟動菜單項。</em:description> <em:creator>JumuFENG</em:creator> <em:homepageURL>http://blog.csdn.net/z6482</em:homepageURL> </Description> </em:localized> </Description> </RDF>

實現功能

我們實現重啟Firefox的功能，建立標準的文件結構，我首先列出除上面兩個配置文件外的其他文件的路徑及其chrome URL；

文件名	保存路徑	chrome URL
restartOverlay.xul	chrome\content\	chrome://restartfirefox/content/restartOverlay.xul
restart.js	chrome\content\	chrome://restartfirefox/content/restart.js
restart.dtd	chrome\locale\en-US\	chrome://restartfirefox/locale/restart.dtd
	chrome\locale\zh-CN\
restartfirefox.css	chrome\skin\	chrome://restartfirefox/skin/restartfirefox.css

這里，本地化字符串只有重啟按鈕的提示文字，我們在zh-CN中的restart.dtd中保存內容：<!ENTITY Restart "重新啟動">。在en-US中的restart.dtd保存內容：<!ENTITY Restart "Restart">。實際中一般是需要使用一個本地化字符串的時候創建，當然我習慣首先創建zh-CN的，全部完成之后將其復制到en-US中，并將所有實體翻譯成英文的。這兩個文件必須為UTF-8編碼。
下面來寫restartOverlay.xul中的內容，XUL文件的基本框架如下：
<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <overlay id="restartOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"></overlay> 根據需要，overlay標簽也可以是其他如window、page等等。我們使用了dtd文件，因此在overlay標簽前面添加：
<!DOCTYPE overlay SYSTEM "chrome://restartfirefox/locale/restart.dtd"> 接著引入我們的css文件(之后創建)，在global css的引用之后添加：
<?xml-stylesheet href="chrome://restartfirefox/skin/restartfirefox.css" type="text/css"?> 要實現重啟Firefox，需要使用一個js文件，在添加其他元素之前加上對腳本的引用：
<script type="application/x-javascript" src="chrome://restartfirefox/content/restart.js" /> 下面添加一個按鈕到Firefox的定制工具欄中，這樣用戶就可以自己選擇將這個圖標放到工具欄或者附加組件欄中的任何位置。
我們使用與Firefox的browser.xul文件中定義的toolbarpalette的id，這樣我們創建的按鈕就會疊加到瀏覽器中定制工具欄里面。要獲得瀏覽器窗口上的元素的id就可以用DOM inspector來查看了，也可以參考其使用的CSS樣式等等。DOM inspector還可以分析網頁的DOM結構。我們使用的XUL代碼如下：
<toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="restartfirefox-button" class="toolbarbutton-1" oncommand="restartFirefox.ourRestart();" tooltiptext="&Restart;" label="&Restart;" /> </toolbarpalette>
Tooltiptext和label都使用dtd文件中定義的Restart實體。如果要將這個按鈕直接添加到附加組件欄，可以發現附加組件欄的id是addon-bar。如圖：

我們可以像下面這樣寫：
<toolbar id="addon-bar"> <toolbarbutton id="restartfirefox-button" class="toolbarbutton-1" oncommand="restartFirefox.ourRestart();" tooltiptext="&Restart;" label="&Restart;" /> </toolbar>
XUL文件的完整內容如下：
<?xml version="1.0"?> <?xml-stylesheet href="chrome://restartfirefox/skin/restartfirefox.css" type="text/css"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <!DOCTYPE overlay SYSTEM "chrome://restartfirefox/locale/restart.dtd"> <overlay id="restartOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"><script type="application/x-javascript" src="chrome://restartfirefox/content/restart.js" /><!-- Firefox Toolbar Overlay --> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="restartfirefox-button" class="toolbarbutton-1" oncommand="restartFirefox.ourRestart();" tooltiptext="&Restart;" label="&Restart;" /> </toolbarpalette></overlay>
下面來編輯實現功能的js文件。實現重啟Firefox需要調用XPCOM的服務，js代碼如下所示：
var restartFirefox = { // main restart logic ourRestart : function() { nsIAppStartup = Components.interfaces.nsIAppStartup; Components.classes["@mozilla.org/toolkit/app-startup;1"].getService(nsIAppStartup) .quit(nsIAppStartup.eRestart | nsIAppStartup.eAttemptQuit); } };
Js代碼不詳細解釋了，如果你將function中的內容改為alert(“hello world”);這個擴展就成了名副其實的hello world擴展了。到這里，還剩最后的css文件沒寫了，我們來簡單的寫一個css文件，為按鈕設置一個圖標。css文件的內容為：
#restartfirefox-button { list-style-image: url("chrome://restartfirefox/skin/icon.png"); }toolbar[iconsize="small"] #restartfirefox-button { list-style-image: url("chrome://restartfirefox/skin/iconsmall.png"); }
這就是開發擴展的整個過程。與擴展開發相關的技術XUL、JS、CSS、XPCOM、DOM我都不在這里介紹了，學習Firefox擴展的開發的過程中自然就會找到很好的資料，慢慢學習慢慢實踐就可以掌握了。最后介紹一下如何運行或者調試自己開發的擴展。

運行擴展

要調試擴展，其實就是運行一下看看有沒有錯誤，看看實現了我們想要的功能沒。
運行擴展，我最開始接觸的就是打包為xpi文件然后拖到Firefox中安裝、重啟Firefox。這個過程很浪費時間，不值得擴展開發者在開發過程中使用，但是我在開始的時候確實用的是這種方式。因為不知道有其他更好的方式。
第二種方式是將擴展的id作為文件夾名稱，比如前面這個例子就使用restart@restartfirefox.org為文件夾名稱。將這個文件夾放到profile中extensions目錄下，這種方式高級一些，但是為了防止Firefox中移除擴展時誤操作將文件刪除了找不回來。我首先是在其他地方寫好或者修改，然后將文件夾拖到extensions目錄下，然后重啟Firefox看效果。這種方式是目前為止我使用的時間最長的方式。但這個也不是最方便的。前段時間翻譯附加組件開發者指南的過程中才發現最實用的方式。
最后一種方式，也是我現在認為最好的方式。在profile中extensions目錄下建立一個文件，名稱也是擴展的id，其內容是擴展的路徑。如，我們這個例子restart@restartfirefox.org文件(沒有后綴，id是什么就命名為什么)的內容就為：D:\extensions\restart。這樣一來實際文件不用放在extensions文件夾中，就算在Firefox中移除了這個擴展。也只是刪除了restart@restartfirefox.org這個文件，不會影響真正的文件。要重新安裝這個擴展只需要先將profile中extensions目錄下的文件刪除，重啟Firefox之后再從回收站還原，再重啟Firefox即可。

調試XUL文件

在很多比較早的資料中都提到可以將XUL文件直接拖到Firefox中或者在Firefox中選擇文件/打開文件來打開XUL文件對XUL文件進行調試。但是這只是在很早的版本中有效，想用這種方式調試XUL文件可以下載較早的版本。我在3.0.19中使用過；但是隨著Firefox的升級，為了調試XUL文件下載一個老版本裝在電腦上我是不太喜歡這種方式的。
不想下載老版本來調試XUL文件，首先就要有如上所述的一個類似的hello world擴展，假設用上述例子來調試XUL文件，我們在content目錄下建立了一個XUL文件為test.xul，在按鈕的響應函數中，使用這樣的代碼：
var restartFirefox = { ourRestart : function() { window.open(“chrome://restartfirefox/content/test.xul”); } };
如果test.xul沒有錯誤，Firefox就可以打開test.xul文件了，有錯誤則會提示哪里出錯了。個人感覺是個不錯的方法。如果是對話框，也可以使用window.openDialog()，這些方法的具體使用請參考相關reference。
要調試js代碼可以使用firebug或者venkman。對于調試js代碼我沒有比較好的經驗。對Firebug的使用也不怎么熟悉，venkman從沒使用過。
注：本教程的xpi包請到我的資源中下載，免積分。

總結

以上是生活随笔為你收集整理的Firefox扩展开发初级教程——开发一个简单的扩展的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。