今天開始做firefox的外掛程式，先從最基礎的開始，從網上找了一個很簡單的，寫的也很好
來自：http://devbean.blog.51cto.com/448512/160298
| 著作權聲明：原創作品，允許轉載，轉載時請務必以超連結形式標明文章 原始出處 、作者資訊和本聲明。否則將追究法律責任。http://devbean.blog.51cto.com/448512/160298 |
| 今天嘗試開發一個Firefox的擴充。雖然比較簡單，網上也有很多教程，但是感覺一些教程寫的比較麻煩，在初步的開發過程中並沒有用到那些東西，於是自己把開發過程記錄下來。我是根據Mozilla官方教程開發的，有興趣的朋友可以自己去看看：https://developer.mozilla.org/en/Building_an_Extension。按照一般的教程，第一個程式都是使用最簡單的Hello World，現在我們就製作一個Firefox的Hello World擴充。開發Firefox外掛程式並沒有看上去的那樣複雜，僅僅使用XML和JavaScript就可以完成。當然，這個意思是Firefox外掛程式開發使用的技術是XML和JavaScript，要做出一個完善的外掛程式涉及到很多方面。但是對於我們的Hello World就不需要那麼多東西啦！1. 準備目錄結構
首先在硬碟上建立一個目錄，名為extension。這個名字是隨意取的。然後在裡面建立chrome檔案夾，再在chrome裡面建立content檔案夾。注意這兩個檔案夾的名字都是固定的，不能隨意改動。然後在extension裡面建立兩個文字檔，並且取名為chrome.manifest和install.rdf。這樣，就建立起如下的目錄結構：
extension
|--install.rdf
|--chrome.manifest
|--chrome
|--content2. 編寫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">
<!-- 指出擴充的ID。該ID應該是一個Email格式的字串，或者是一個GUID。注意，使用Email的作用是保證該ID的唯一性，並不要求這個Email地址是有效。必填。 -->
<em:id>sample@example.net</em:id>
<!-- 指出外掛程式的版本號碼。必填。 -->
<em:version>1.0</em:version>
<!-- 在這裡的值必須是2。該標籤說明該應用的Firefox擴充，而不是其他XUL應用程式。Firefox外掛程式的代碼是2，如果是Firefox主題則會是4。必填。 -->
<em:type>2</em:type>
<!-- 安裝擴充的目標應用程式以及最高版本和最低版本。必填。 -->
<em:targetApplication>
<Description>
<!-- Firefox的ID，這個值不能改變。必填。 -->
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<!-- 指明能使用該擴充的Firefox最低版本。這裡是指1.5。必填。 -->
<em:minVersion>1.5</em:minVersion>
<!-- 指明能使用該擴充的Firefox最高版本。這裡是指3.0.x。結合minVersion，即是說本擴充只適用於1.5和3.0.x之間的版本。必填。 -->
<em:maxVersion>3.0.*</em:maxVersion>
</Description>
</em:targetApplication>
<!-- 擴充的中繼資料。 -->
<!-- 副檔名字。必填。 -->
<em:name>sample</em:name>
<!-- 擴充的描述。這裡的描述將出現在Firefox的工具-附加組件的描述列。選填。 -->
<em:description>A test extension</em:description>
<!-- 擴充作者。選填。 -->
<em:creator>galaxy.org</em:creator>
<!-- 擴充首頁的URL。選填。 -->
<em:homepageURL>http://www.example.com/</em:homepageURL>
</Description>
</RDF> install.rdf檔案是供具有擴充管理功能的XUL應用程式使用的，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">
<!-- properties -->
</Description>
</RDF> 上面的install.rdf的注釋很多，實際應用中就不需要那麼多注釋了。 3. 編寫XUL檔案 Firefox的介面使用XUL和JavaScript進行描述。XUL即XML User Interface Language，是Mozilla開發的一種使用XML進行使用者介面描述的語言。XUL只用來定義使用者介面，其組件的功能由JavaScript進行定義。 Firefox的整個介面都使用XUL進行定義。可以在%FIREFOX_INSTALL_DIR%/chrome/browser.jar裡面找到content/browser/browser.xul檔案。（說明一下，jar檔案可以用WinRAR或其他一些壓縮公用程式解壓縮，這是一個使用zip演算法壓縮的壓縮包）在這個XUL檔案中有這麼一段： <statusbar id="status-bar">
<!-- ... <statusbarpanel>s ... -->
</statusbar> 這裡的這個<statusbar id="status-bar">稱為“覆蓋點(Overlay，我不知道官方的翻譯是什麼，自己把它翻譯成了這個詞，想想還算是準確，不過為了不引起混淆，下面還是使用Overlay這個單詞吧 )”。所謂Overlay，就是在運行一個XUL文檔的時候可以附加其他的XUL檔案的方式。就是說，我們本來的XUL是a.xul，這裡面有一個Overlay定義為overlay-point，那麼我們可以在另外一個b.xul中對這個Overlay進行追加，從而在執行a.xul的時候可以自動的把b.xul的內容附加到overlay-point並運行出來。這麼說有些抽象，來看我們的代碼： <?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<statusbarpanel id="my-panel" label="Hello, World" />
</statusbar>
</overlay> 剛剛說了，<statusbar id="status-bar">就是一個Overlay，那麼在我們的外掛程式的XUL文檔就是基於這個Overlay進行擴充。在這裡，我們在statusbar上面定義了一個statusbarpanel，它的id是my-panel，label是Hello, World。這段代碼比較清晰，就是在原有的statusbar上追加一個statusbarpanel，這個statusbarpanel顯示Hello, World。 明白了這段代碼之後，我們把這個檔案定義成sample.xul，儲存在chrome/content下面。可以看到這個檔案夾結構和Firefox自有的那個結構是一致的。 在寫完了XUL檔案之後，我們要定義其chrome.manifest。XUL文檔需要通過chrome://協議進行請求。chrome://類似http://協議，只不過是用來請求XUL文檔的。在Firefox的地址欄中輸入chrome://browser/content/browser.xul，看看有什麼反應，就會知道XUL文檔的作用了。 這個URL包括四部分：1) chrome:// - 即協議名，就像http://一樣；2) browser/ - 包名，即外掛程式的包的ID；3) content/ - 請求內容的類型；4) browser.xul - 請求的檔案名稱。所以，chrome://foo/skin/bar.png就是請求一個在foo包下面的skin裡面的bar.png檔案。 4. 編寫chrome.manifest 在chrome.manifest中添加下面一句： content sample chrome/content/ 這裡指明，請求類型時content，包名是sample，位置是相對於chrome.manifest檔案的chrome/content/。注意，這裡的最後面一個/是不能缺少的！ 然後需要告訴Firefox我們的擴充Overlay，在chrome.manifest裡面再添加一句： overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul 這句是告訴Firefox，需要在chrome://browser/content/browser.xul載入的時候將chrome://sample/content/sample.xul擴充進來。 5. 測試 至此，我們已經完成了這個Hello World的擴充。下面我們測試一下。 使用壓縮公用程式將extension檔案夾壓縮成zip檔案，注意有些工具會將本檔案夾加入壓縮包，這裡要求壓縮包解開之後應該是extension下面的兩個檔案和一個檔案夾，而不是extension檔案夾。然後將尾碼名改為xpi。然後開啟Firefox（我測試的版本是3.0.10），將這個xpi拖到視窗中，Firefox將提示安裝擴充，按照一般的過程安裝之後，重啟Firefox有時候在安裝擴充時會有找不到安裝指令碼的錯誤，就是因為在壓縮時根下面沒有install.rdf那一層導致的。 當我們在重啟Firefox之後，右下角出現Hello, Word字樣時，說明我們的擴充已經安裝成功了！ 本文出自 “豆子空間” 部落格，請務必保留此出處http://devbean.blog.51cto.com/448512/160298 |
