今天嘗試開發一個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
??? |--content
2. 編寫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字樣時，說明我們的擴展已經安裝成功了！

轉載于:https://www.cnblogs.com/memaxiaofeng/archive/2013/04/02/3275500.html

總結

以上是生活随笔為你收集整理的Firefox扩展开发 Hello World！的全部內容，希望文章能夠幫你解決所遇到的問題。

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