本章篇幅較長，分上下兩部分發布，本章中的圖和清單4在原網站中沒有，因此這裏也沒有，感興趣的可以去原文補充。下面是譯文。

至今爲止，各個章節中獨立的介紹了相關的技術——XUL、javascript、CSS和XPCOM。本章中，我們討論如何將它們放到一起來實際的創建一個擴展。

注：那些對諸如netbeans、eclipse等IDE掌握得非常好的開發者的創建Firefox/thunderbird附加組件的更簡單方法是使用netbeans(來自sun microsystems)和foxbeans(netbeans的擴展，由TeeSoft開發)。（譯註：本人剛開始學做擴展的時候試過，foxbeans並沒有隨着Firefox和netbeans的更新而升級，雖然很簡單的可以開發出一個Firefox的擴展，但是開發出來的擴展在較新版本的Firefox中沒有很好的支持）

設置開發環境

爲了以最方便的方式開發（以及測試）擴展，極力推薦對Firefox做一些變化。下面你將會看到一個如何改變的簡潔描述；更詳細的描述可以在設置一個擴展開發環境中找到

創建開發profile

如果你想將日常使用的Firefox瀏覽環境與你的開發環境分開，另外設置一個profile進行開發。創建這個dev profile用下面的參數運行Firefox：firefox.exe -no-remote -P dev
在剛開始的時候會打開profile管理器，可以在這裏創建devprofile並配置其路徑。

改變首選項以進行高效開發

在你開始開發擴展之前，可以對Firefox的首選項進行一些改變。這對於擴展開發來說不是必須的，但是我推薦修改一下，這樣工作會更有效率。
表1：開發擴展可以設置的首選項

首選項	描述	值
nglayout.debug.disable_xul_cache (Firefox 3.5以上的版本不存在)	通常,Firefox會在讀取XUL文檔之後進行緩存,要加快後來的XUL文檔的顯示速度。禁用該緩存可以在每次需要顯示的時候強制重新加載XUL文檔	True
browser.dom.window.dump.enabled (Firefox 3.5以上的版本不存在)	啓用用於調試的dump方法。對應於“JavaScript debugging methods”側邊欄。	True
javascript.options.showInConsole (Firefox 3.5以上的版本)	在錯誤控制檯中輸出javascript錯誤	True
javascript.options.strict (Firefox 3.5以上的版本)	從javascript中進行強制錯誤輸出	True

要做這些改變，運行你的開發者profile，輸入about:config到Firefox的地址欄並打開首選項窗口；找到表1中列出的首選項並雙擊以進行相應的設置。這些首選項有的不存在要創建則右鍵點擊，選擇”New>Boolean”，並輸入名稱並相應的設置其值。

安裝DOM Inspector

DOM Inspector是一個可以幫助你檢查HTML和XUL 的DOM樹結構、javascript對象以及CSS屬性等的擴展。這個對於開發擴展來說不是必須的，但有的話會更方便。從mozilla Add-ons網站上安裝Firefox擴展。

可選-安裝Firebug和Chromebug

Chromebug是firebug開發團隊使用來開發firebug的。你可以使用它來調試Firefox控制也可以來檢查學習Firefox的UI(chrome)是如何構成的。你可以在 http://getfirebug.com/wiki/index.php/Chromebug_User_Guide下載並學習更多關於chromebug。
你可以發現這個擴展也很有價值：擴展開發者：Extension Developer https://addons.mozilla.org/en-US/firefox/addon/7434

開發擴展：你需要知道些什麼

讓我們來探究一下chrome，爲了開發擴展你需要知道chrome。

Chrome

什麼是chrome?

“chrome”是用來描述所有在XUL應用程序中的GUI結構的詞。比如，在Firefox瀏覽器窗口中，除了網頁之外的顯示在內容區的所有事物就是chrome。擴展也可以當做是帶有chrome的XUL應用程序。

組成chrome的三類程序包

content程序包
這個程序包是用來容納主要的XUL和javascript腳本源文件的。很多擴展由一個單獨的content程序包組成。
locale程序包
這個程序包是用來容納用於翻譯的語言數據的。要使一個擴展的GUI支持多語言，則可以包含多個locale程序包，每種語言一個（locale程序包）。
skin程序包
這是用來包含用於可視化GUI元素（包括樣式表和圖像）的源文件的。大多數擴展只包含一個skin程序包，但是你可以包含多個skin程序包以支持GUI在不同的主題間進行改變。

Chrome URL

使用一個叫做chrome清單的文件來向Firefox註冊chrome程序包並使用它們。要註冊一個程序包，使用一個特殊的叫做chrome URL的URI結構來表示文件的路徑。Chrome URL的結構是：chrome://%package name%/%package type%/%relative path to source file%
例如，Firefox瀏覽器窗口的chrome URL如下：chrome://browser/content/browser.xul
這裏程序包名稱是browser，文件是browser.XUL，程序包的類型是content。源文件代表以UniversalXPConnect權限通過chrome URL運行。即使它們沒有保證“使用XPConnect作爲本地文件”的權限，如第四章所討論的那樣，它們將可以使用XPCOM的函數（圖1）。
圖1：chrome程序包以及chrome的註冊
Extension/
Chrome.manifest
Chrome/ #registered in the chrome
content package #Run with privileges
locale package
skin package

跨包疊加

第三章中介紹的”overlay”技術需要在XUL文檔中使用xul-overlay指令說明疊加的目標。不在XUL文檔中使用xul-overlay指令而強制疊加也是可能的——這叫做“跨包疊加”（圖2）。事實上，你需要使用跨包疊加來將按鈕或者菜單添加到Firefox瀏覽器窗口中。使用chrome清單來激活一個跨包疊加。
圖2：激活一個跨包疊加
Normal overlay: Adding the xul-overlay instruction to the target XUL document overlays it with another XUL document
Cross-package overlay: Adding a cross manifest permits one XUL file to overlay another without any xul-overlay instruction.

結論

這是對chrome一個簡單的介紹，可能還遺留了很多未回答的問題。如果你能牢記下述三點，下一節，開發一個簡單的擴展，將會幫助你進一步的理解。
1. 一個擴展的GUI可以由三種程序包組成：content、locale和skin。
2. 在browser.XUL的頂部使用跨包疊加爲Firefox瀏覽器窗口添加一個按鈕或者菜單項。
3. Chrome清單所扮演的兩個重要角色是：註冊chrome程序包的內容，激活跨包疊加。

開發一個簡單的擴展：Hello World

這一節，我們將會編寫一個極爲簡單的僅僅顯示時間的”hello world”擴展。

第一階段:測試安裝

我們的第一步將會執行一個包含向工具菜單添加新的菜單項的最少代碼的測試安裝（圖3）。

源文件結構

首先設置你要用來組織擴展源代碼的工作文件夾。這個文件夾可以隨便在哪裏，本教程假設它在C:\extensions\helloworld。在你的工作文件夾中創建文件夾和文件如圖4.第一階段創建的每個文件的目的在表2中解釋。

圖4：第一階段使用的文件夾結構

文件名	角色
install.rdf	叫做安裝清單，這給出了這個擴展的基本信息，並且是Firefox中安裝該擴展所必須的
chrome.manifest	這是前面描述的chrome清單。註冊程序包並激活跨包疊加。
content/overlay.xul	將會疊加到Firefox瀏覽器窗口的XUL文件,添加按鈕，菜單項等.
content/clock.xul content/clock.js	XUL文件在窗口中顯示一個鐘，javascript文件控制其操作（這些文件會在第二階段使用）。

表2：第一階段中文件是如何使用的

創建安裝清單

用清單1中的內容寫到install.rdf中：
清單1：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">
<!-- Unique ID for extension. Can be in e-mail address format or GUID format -->
<em:id>[email protected]</em:id>
<!-- Indicates that this add-on is an extension -->
<em:type>2</em:type>
<!-- Extension name displayed in Add-on Manager -->
<em:name>Hello, World!</em:name>
<!-- Extension version number. There is a version numbering scheme you must follow -->
<em:version>0.1</em:version>
<!-- Brief description displayed in Add-on Manager -->
<em:description>My first extension.</em:description>
<!-- Name of extension's primary developer. Change to your name -->
<em:creator>Gomita</em:creator>
<!-- Web page address through which extension is distributed -->
<em:homepageURL>http://www.xuldev.org/helloworld/</em:homepageURL>
<!-- This section gives details of the target application for the extension (in this case: Firefox 2) -->
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>2.0</em:minVersion>
<em:maxVersion>4.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>

創建chrome清單

用清單2中的內容填充chrome.manifest文件
清單2：chrome.manifest文件的內容

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

註冊content程序包（content指令）
第一行，以content開頭，包含了用於註冊chrome的content程序包的代碼。這裏helloworld是一個程序包名稱，content/是一個存儲源文件的文件夾的相對路徑。註冊content程序包使得content文件夾中的overlay.xul文件能夠使用chrome URL: chrome://helloworld/content/overlay.xul來訪問。
XUL跨包疊加（overlay指令）
第二行，以overlay開頭，包含了用來激活跨包疊加的代碼，在chrome://browser/content/browser.xul中找融合點用chrome://helloworld/content/overlay.xul.疊加到Firefox瀏覽器窗口。
尋找融合點
下一步是尋找疊加文檔將會插入其內容到基礎文檔中的“融合點”。關於這個有很多的方法來進行，我們使用DOM Inspector（圖5）。
選擇工具>DOM Inspector菜單項打開DOM Inspector。
輸入chrome://browser/content/browser.XUL到頂部的URL輸入區，然後點擊Inspect按鈕。窗口下面部分將會出現一個瀏覽器面板。
點擊圖5中標記爲1和2的點；這樣菜單元素（3）將會被選中。
展開3：這會露出標記爲4的地方，有幾個menuitem元素。Menupopup元素4包含了你將要添加新的菜單項的融合點，你可以看到它的id是menu_ToolsPopup。
瀏覽在這個menupopup元素內部的menuitem元素並確定你想要講你的新元素添加到什麼地方。這裏，我們將其定位到數字5的地方。

圖5：使用DOM Inspector尋找疊加融合點
將overlay放到瀏覽器窗口
現在你知道了了你的overlay的融合點，你可以創建將要插入到此處的overlay.xul文件（清單3）。在第四行，我們標記融合點爲menupopup元素，5-7行，是添加新菜單項的代碼，insertbefore屬性決定了這個元素添加的位置。

測試安裝及操作檢查

我們有了最終安裝hello world擴展的位置。這裏採用常規的XPI類型安裝會帶來錯誤，因此我們不使用那種方式。對於開發中的源文件我們採用測試安裝。
放置指示文件
首先，移動到當前活動的profile的文件夾，打開其中的extensions文件夾。在其中創建一個新的具有你用來作爲hello world擴展的ID相同名稱的文件[email protected]。將其內容設置爲你的擴展源文件的完整路徑：C:\extensions\helloworld.
清單3：overlay.xul文件的附加內容

<?xml version="1.0"?>
<overlay id="helloworldOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<menupopup id="menu_ToolsPopup">
<menuitem id="helloworldMenuitem" label="Hello, World!" insertbefore="sanitizeSeparator"
oncommand="window.openDialog('chrome://helloworld/content/clock.xul','Clock','chrome,centerscreen,modal');"/>
</menupopup>
</overlay>

第二階段:添加一個顯示時間的函數

在第二階段，我們將會實現選擇第一階段中創建的hello world菜單項就顯示一個帶有時間窗口的功能（圖6）。

圖6：第二階段創建的時鐘窗口

添加事件處理函數

首先，我們爲菜單項添加一個打開窗口的事件處理函數（清單4）。
清單4：事件處理函數

時鐘處理函數

創建顯示時鐘的窗口（清單5）以及其控制函數（清單6）。我們已經在第三章中描述了dialog元素。這裏，我們只想要顯示一個OK按鈕，因此我們將buttons屬性設置爲accept。在這個窗口中有一個label元素和一個textbox元素，放在一個hbox元素內部這樣它們就會水平的排列。
清單5：clock.xul的內容

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<dialog id="clockDialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="Clock"
buttons="accept"
οnlοad="initClock();">
<script type="application/javascript" src="chrome://helloworld/content/clock.js"/>
<hbox align="center">
<label value="Current Time:" />
<textbox id="currentTime" />
</hbox>
</dialog>

清單6：clock.js文件的內容

function initClock() {
showCurrentTime();
window.setInterval(showCurrentTime, 1000);
}

function showCurrentTime() {
var textbox = document.getElementById("currentTime");
textbox.value = new Date().toLocaleTimeString();
textbox.select();
}

操作檢查

進行一次操作檢查以確保你對源文件的修改是正確的。這裏，正如前面所述禁用XUL緩存非常重要。假設你已經做了那些，你將可以確認overlay.xul和clock.xul中的變化而不需要進行討厭的重啓Firefox或者重新安裝擴展。就像overlay.xul要疊加到的目標browser.xul文件再次讀取了，變化將會得到反映，你可以通過打開一個新的瀏覽器窗口來查看變化。文件clock.xul和clock.js將會在每次打開clock窗口時讀取，因此只需要再次打開一次clock窗口就可以滿足對它們的檢查。在開發過程中，將校正源文件和進行對這些變化進行操作檢查的步驟最小化是非常重要的。” 修改源文件後的操作檢查”一部分討論了從源文件校正到操作檢查的一般進程。
如果有什麼東西無法正常工作呢？
如果你的擴展運行得與預計中不一樣，首先看看錯誤控制檯的錯誤面板中是否顯示了錯誤。如果你將”設置開發環境”一節中所推薦的設置都進行了設置，XUL和javascript錯誤就會出現在這裏。參見“javascript調試技術”以獲取有用的建議。如果Firefox無法響應，你需要從任務管理器中終止Firefox進程。

第三階段:添加多語言支持

我們在第二階段創建的clock窗口顯示的都是英文的。第三階段，我們要爲其添加多語言支持，那樣在一個法語環境中使用的Firefox中看到“Heure actuelle”，而運行在英語環境中看到“Current time”（圖7）。
圖7：第三階段之後的clock窗口

目錄結構

要爲本擴展添加多語言支持，我們增加一個locale程序包到chrome中。在helloworld文件中創建一個具有子文件夾和文件的locale文件夾，如圖8所示。這些文件的目的在表3中解釋。
圖8：添加了locale程序包之後的目錄結構

表3：第三階段中使用的文件

名稱	目的
locale\en-US\clock.dtd	定義clock.xul中使用的DTD實體引用(for English).
locale\fr-FR\clock.dtd	定義clock.xul中使用的DTD實體引用(for French).

添加locale程序包

註冊locale程序包（locale指令）
以locale開頭的行是用來註冊chrome的locale程序包的；helloworld是程序包名稱，locale/fr-FR/是相對於包含了這個源文件的文件夾的相對路徑；en-US和fr-FR說明了那些locale程序包是分別用於英語和法語的。
清單7：chrome.manifest文件中新增的內容

locale helloworld en-US locale/en-US/
locale helloworld fr-FR locale/fr-FR/

用實體引用替換XUL中的文本

要讓擴展支持多語言，你需要將clock.xul中所有硬編碼顯示的文本都移動到一個DTD文件中。DTD文件位於locale程序包中，可以自動的使用以匹配用戶的語言首選項。編輯clock.xul文件使其與清單8相匹配。添加DOCTYPE聲明以引用這個DTD文件，並將“clock”和“current time”用實體引用來代替。
清單8：對clock.xul進行修正

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<!DOCTYPE dialog SYSTEM "chrome://helloworld/locale/clock.dtd">
<dialog id="clockDialog" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
title="&helloworld.clock;" buttons="accept"
οnlοad="initClock();">
<script type="application/javascript" src="chrome://helloworld/content/clock.js" />
<hbox align="center">
<label value="&helloworld.currentTime;:" />
<textbox id="currentTime" />
</hbox>
</dialog>

創建定義實體引用的DTD文件

現在來創建clock.xul文件中引用到的DTD文件（清單9）。文件clock.dtd應該放在fr-FR文件夾內而且編碼必須爲UTF-8。
清單9：clock.dtd文件的內容

locale\en-US\clock.xul
<!ENTITY helloworld.clock "Clock">
<!ENTITY helloworld.currentTime "Current Time">
locale\fr-FR\clock.xul
<!ENTITY helloworld.clock "Horloge">
<!ENTITY helloworld.currentTime "Heure courante">

用properties引用替換javascript文件中的接口消息

可能你的擴展需要爲用戶線上一些重要的消息，比如警告框。雖然它們嵌在javascript中，但是爲了UI的一致性，字符串也應該進行本地化。假設你有字符串嵌入到了一個.js文件中。
if ( password == userPassword ) {
oPrefs.setBoolPref("access.authenticated", true);
}
else {
alert ("Invalid password");
......
function clear()
{
sure = confirm("Are you sure?");
首先，你需要在你的locale文件夾內找到或者創建一個myextension.properties文件（注意：總是要以UTF-8方式編碼）。然後你可以簡單的寫入變量名和顯示給最終用戶的語句或者單詞。比如：
wrongPassMessage=Invalid password
areYouSureMessage=Are you sure?
（其中，Invalid password和Are you sure?是將要顯示給最終用戶的字符串）注意：一個簡單的標記就夠了
現在回到那個嵌入了這些需要進行本地化的字符串的.js文件中。在這個文件的頂部用要查找字符串的properties文件的地址創建一個string bundle。
var gmyextensionBundle = Components.classes["@mozilla.org/intl/stringbundle;1"].getService(Components.interfaces.nsIStringBundleService);

var _bundle = gmyextensionBundle.createBundle("chrome://myextension/locale/myextension.properties")
現在你可以在.js文件中需要的地方使用你的字符串替代，如下面的例子：
if ( password == userPassword ) {
oPrefs.setBoolPref("access.authenticated", true);
}
else {
alert (_bundle.GetStringFromName("wrongPassMessage"));

function clear() {
sure = confirm(_bundle.GetStringFromName("areYouSureMessage"));}

操作檢查

這些需要我們進行操作檢查。因爲我們改變了chrome清單，我們需要重啓一次Firefox，如” 修改源文件後的操作檢查”一部分所討論的那樣。重啓Firefox並顯示clock窗口以確認它能夠正常工作。然後，輸入about:config到地址欄，將general.useragent.locale的值從en改變爲fr，並讓clock窗口重新顯示以確認它現在顯示爲法語了。

第四階段:添加一個工具欄按鈕

在第四階段，我們將會使用圖像和樣式表來創建一個打開這個clock窗口的工具欄按鈕（如圖9）
圖9：第四階段之後的工具欄

目錄結構

樣式表和圖像文件將會放在chrome的skin程序包裏面。事實上將這些放在content程序包中該擴展也可以正常工作，但是將它們放到skin程序包中對設計與指定的Firefox主題相匹配的GUI有好處，並且可以讓主題開發者爲擴展創建特殊的視覺效果。
首先，添加skin目錄及其所屬文件到你的helloworld目錄中，如圖10所示。這些文件的目的在表4中進行解釋。從資源網站上下載文件icon.png和icon-small.png並將它們放到合適的位置。
圖10：添加了skin程序包之後的目錄結構

添加skin程序包

用清單10中的內容更新chrome.manifest文件。
清單10：chrome.manifest文件新增的內容

skin helloworld classic/1.0 skin/classic/
style chrome://browser/content/browser.xul chrome://helloworld/skin/overlay.css
style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css

註冊skin程序包（skin指令）
以skin開頭的第一行用來對skin程序包進行註冊；helloworld是程序包名稱，skin/classic/是相對於包含該源文件的文件夾的相對路徑；classic/1.0說明了這個skin程序包是用於Firefox標準主題的。
樣式表跨包疊加（style指令）
在第一階段，我們使用了overlay指令來激活一個XUL的跨包疊加；要對樣式表進行跨包疊加，我們使用style指令。第二三行創建了對瀏覽器窗口和定製工具欄窗口的疊加。

添加工具欄按鈕

要爲瀏覽器窗口添加工具欄按鈕，用清單11中的內容更新overlay.xul。爲了使用戶可以將這個按鈕隨意改變位置，要添加一個新的toolbarbutton元素，使用特殊的帶有id爲BrowserToolbarPalette的toolbarpalette元素作爲融合點。你也需要添加一個新的command元素，當點擊這個工具欄按鈕的時候就會以菜單項進行相同的處理。
清單11：overlay.xul文件的修改

<?xml version="1.0"?>
<overlay id="helloworldOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<commandset id="mainCommandSet">
<command id="helloworldCommand" oncommand="window.openDialog(
'chrome://helloworld/content/clock.xul',
'Clock','chrome,centerscreen,modal');" />
</commandset>
<toolbarpalette id="BrowserToolbarPalette">
<toolbarbutton id="helloworldButton" label="Hello, World!" class="toolbarbutton-1" command="helloworldCommand" />
</toolbarpalette>
<menupopup id="menu_ToolsPopup">
<menuitem id="helloworldMenuitem" label="Hello, World!" insertbefore="sanitizeSeparator"
command="helloworldCommand" />
</menupopup>
</overlay>

創建樣式表

用清單12中的內容對overlay.css文件進行更新。1-3行定義了完整尺寸的圖標要使用的圖標圖像，4-6行蝶衣了選擇小工具欄圖標時使用的圖標圖像。
清單12：overlay.css的內容

#helloworldButton {
list-style-image:
url(chrome://helloworld/skin/icon.png);
}

toolbar[iconsize="small"] #helloworldButton {
list-style-image: url(chrome://helloworld/skin/icon-small.png);
}

操作檢查

由於我們編輯了chrome清單，與第三階段由於，我們需要重啓Firefox。檢查以確認當在窗口右上方點擊“定製工具欄”的時候新的工具欄按鈕出現在彈出的窗口中。將其拖動到工具欄上，並點擊以確定其能夠正常工作。
表4：第四階段使用的文件

名稱	目的
icon.png	完整尺寸的工具欄按鈕圖標文件
icon-small.png	小工具欄按鈕圖標文件
overlay.css	定義工具欄按鈕使用的樣式表.同時疊加到瀏覽器窗口和“定製工具欄”窗口。

第五階段: XPI打包

實際上在第四階段我們已經完成了helloworld擴展，但是在這個狀態你無法將源文件發佈給其他用戶。因此我們需要創建一個xpi格式的安裝程序。

XPI文件目錄結構

XPI基本上就是一個zip結構。但是xpi文件內部的目錄結構與你的開發環境目錄結構一般是不同的（圖11）
圖11：一個xpi文件內部的目錄結構

打包過程

要將你的擴展打包爲一個xpi文件而保留在開發過程中使用的源文件的目錄結構，可以按照圖11進行更改，描述如下：
1. 在helloworld目錄下創建一個新的chrome目錄。
2. 將content、locale和skin目錄進行zip壓縮，將得到的存檔重命名爲helloworld.jar，將其放在第一步中創建的chrome目錄下。
3. 複製chrome.manifest並重命名爲備份chrome.manifest.bak。
4. 改變chrome.manifest文件的內容爲清單13中的內容。
5. 將install.rdf、chrome.manifest和chrome文件夾一起以zip方式壓縮，並重命名所得的存檔爲helloworld.xpi。
清單13：更改chrome.manifest文件

content helloworld jar:chrome/helloworld.jar!/content/
overlay chrome://browser/content/browser.xul chrome://helloworld/content/overlay.xul
locale helloworld en-US jar:chrome/helloworld.jar!/locale/en-US/
locale helloworld fr-FR jar:chrome/helloworld.jar!/locale/fr-FR/
skin helloworld classic/1.0 jar:chrome/helloworld.jar!/skin/classic/
style chrome://browser/content/browser.xul chrome://helloworld/skin/overlay.css
style chrome://global/content/customizeToolbar.xul chrome://helloworld/skin/overlay.css

這就完成了XPI打包的過程。在第四步中你需要特別注意的一點就是，需要更新chrome.manifest以便它參考的文件具有指向zip結構內部的路徑。
爲了在你完成對擴展的打包之後回到開發模式，你需要將第四步中編輯了的chrome.manifest進行復原以使其指向第三步中備份的文件。如果你忘了這樣做，那麼你對源文件做的任何後續的修改都無法在開發中得到反映。你可能想要寫一個批處理文件來自動完成這個任務。
有一個更簡單的方法來將擴展打包爲xpi。創建一個包含install.rdf、chrome.manifest、content、locale以及skin的zip結構。將其命名爲helloworld.xpi。
這樣避免了創建叫做helloworld.jar的chrome程序包。這種xpi文件可以正常運行，但是會減慢Firefox的啓動時間。

XPI操作檢查

在你創建了xpi文件之後，要確保其正常工作。由於你已經有了helloworld擴展的開發版本作爲測試安裝到了你當前的profile，用一個不同的profile重啓Firefox。將這個xpi文件拖放到你的瀏覽器窗口開始安裝。
這就完成了對如何創建並打包一個簡單的hello world擴展的解釋。

z6482

發佈了32 篇原創文章 · 獲贊 83 · 訪問量 29萬+

私信關注

firefox附加組件開發者指南（五）——創建一個firefox擴展(上)

設置開發環境

創建開發profile

改變首選項以進行高效開發

安裝DOM Inspector

可選-安裝Firebug和Chromebug

開發擴展：你需要知道些什麼

Chrome

什麼是chrome?

組成chrome的三類程序包

Chrome URL

跨包疊加

結論

開發一個簡單的擴展：Hello World

第一階段:測試安裝

源文件結構

創建安裝清單

創建chrome清單

測試安裝及操作檢查

第二階段:添加一個顯示時間的函數

添加事件處理函數

時鐘處理函數

操作檢查

第三階段:添加多語言支持

目錄結構

添加locale程序包

用實體引用替換XUL中的文本

創建定義實體引用的DTD文件

用properties引用替換javascript文件中的接口消息

操作檢查

第四階段:添加一個工具欄按鈕

目錄結構

添加skin程序包

添加工具欄按鈕

創建樣式表

操作檢查

第五階段: XPI打包

XPI文件目錄結構

打包過程

XPI操作檢查