FireFox插件開發過程

FireFox插件實現包含以下技術：JS、CSS、XUL和XPCOM，對於熟悉web開發的人，JS和CSS並不陌生；而XUL和XPCOM恐怕沒有接觸過。

XUL(XML-based User-interface Language)是基於XML的用戶界面語言，定義了很多適用於Mozilla瀏覽器的圖形用戶界面的標籤，如window、dialog、menu等。

XPCOM(Cross-Platform Component Object Model)是用於開發獨立於平臺的構件開發框架，可以使用JS或C++開發。

下面我將會給出一個開發FireFox插件的簡單實例，用於說明FireFox插件的開發過程。
(1)配置文件：
配置文件主要包括清單(manifest)文件和安裝(RDF)文件，其中清單文件定義了覆蓋(overlay)文件、國際化文件、頁面樣式文件的位置及存放這些文件的目錄結構等，而安裝文件定義了插件在安裝過程中顯示的名稱、描述、版本、適合的相關Mozilla應用的版本號等，同時定義了插件的類型。
如下爲例子中清單文件和安裝文件的定義：

清單文件chrome.manifest

content PopupMenu content/ overlay chrome://browser/content/browser.xul chrome://PopupMenu/content/overlay.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"> <!-- Unique ID for extension. Can be in e-mail address format or GUID format --> <em:id>[e-mail]</em:id> <!-- Indicates that this add-on is an extension --> <em:type>2</em:type> <!-- Extension name displayed in Add-on Manager --> <em:name>Popup Menu in Tools</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>Popup Menu extension.</em:description> <!-- Name of extension's primary developer. Change to your name --> <em:creator>xintian3</em:creator> <!-- Web page address through which extension is distributed --> <em:homepageURL>http://blog.csdn.net/xintian3</em:homepageURL> <!-- This section gives details of the target application for the extension (in this case: Firefox 2 to 4) --> <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>

(2)XUL文件：
由於在清單文件中定義了overlay文件的位置，overlay文件定義了將插件覆蓋到Mozilla應用中的位置。
如下爲例子中覆蓋文件和相關XUL文件的定義：

覆蓋文件overlay.xul

<?xml version="1.0"?> <overlay id="PopupMenuOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <commandset id="mainCommandSet"> <command id="popupMenuByXPCOMRequest" oncommand="window.openDialog( 'chrome://PopupMenu/content/XPCOMRequest.xul', 'Profile','chrome,centerscreen,modal');" /> <command id="popupMenuByXMLHTTPRequest" oncommand="window.openDialog( 'chrome://PopupMenu/content/XMLHTTPRequest.xul', 'Profile','chrome,centerscreen,modal');" /> </commandset> <menupopup id="menu_ToolsPopup"> <menu id="menu_PopupMenu" class="menuitem-iconic" label="Popup Menu" insertbefore="javascriptConsole"> <menupopup id="menu_PopupMenuPop"> <menuitem id="XPCOMRequest" label="XPCOM Request" insertbefore="sanitizeSeparator" command="popupMenuByXPCOMRequest" /> <menuitem id="XMLHTTPRequest" label="XMLHTTP Request" insertbefore="sanitizeSeparator" command="popupMenuByXMLHTTPRequest" /> </menupopup> </menu> </menupopup> </overlay>

相關XUL文件XMLHTTPRequest.xul

<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <dialog id="xmlhttp" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="XMLHTTP Request" buttons="accept" width="600" height="300"> <script type="application/x-javascript" src="chrome://PopupMenu/content/xmlhttpRequest.js"/> <hbox> <label value="We get the profile from the server by the XMLHTTP Request!"/> <spacer flex="1"/> </hbox> <hbox align="center"> <label value="Name:" align="center"/> <label id="name" align="center"/> </hbox> <hbox> <label value="Email:" align="center"/> <label id="email" align="center"/> </hbox> <hbox> <label value="City:" align="center"/> <label id="city" align="center"/> </hbox> </dialog>

文件XMLHTTPRequest.xul引用的腳本文件xmlhttpRequest.js

var url = "http://localhost/contextProfile/servlet"; var request = null; if (window.XMLHttpRequest) { // code for all new browsers request=new XMLHttpRequest(); } else if (window.ActiveXObject) { // code for IE request=new ActiveXObject("Microsoft.XMLHTTP"); } request.open("GET", url, true); request.onreadystatechange = function() { if (request.readyState == 4) { if (request.status == 200) { var text = request.responseText; var jsObject = JSON.parse(text); var name = document.getElementById("name"); name.value = jsObject.profiles.name; var email = document.getElementById("email"); email.value = jsObject.profiles.email; var city = document.getElementById("city"); city.value = jsObject.profiles.city; } } } request.send(null);

相關XUL文件XPCOMRequest.xul

<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/"?> <dialog id="xpcom" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="XPCOM Request" buttons="accept" width="600" height="300"> <script type="application/x-javascript" src="chrome://PopupMenu/content/xpcomRequest.js"/> <hbox> <label value="We get the profile from the server by the XPCOM Request!"/> <spacer flex="1"/> </hbox> <hbox align="center"> <label value="Name:" align="center"/> <label id="name" align="center"/> </hbox> <hbox> <label value="Email:" align="center"/> <label id="email" align="center"/> </hbox> <hbox> <label value="City:" align="center"/> <label id="city" align="center"/> </hbox> </dialog> 

文件XPCOMRequest.xul引用的腳本文件xpcomRequest.js

const Cc = Components.classes; const Ci = Components.interfaces; var url = "http://localhost/contextProfile/servlet"; var request = Cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance(Ci.nsIXMLHttpRequest); request.onload = function(aEvent) { var text = aEvent.target.responseText; var jsObject = JSON.parse(text); var name = document.getElementById("name"); name.value = jsObject.profiles.name; var email = document.getElementById("email"); email.value = jsObject.profiles.email; var city = document.getElementById("city"); city.value = jsObject.profiles.city; try { // this is needed to generally allow usage of components in javascript netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); var myComponent = Components.classes['@dietrich.ganx4.com/helloworld;1'] .createInstance(Components.interfaces.nsIHelloWorld); alert(myComponent.hello()); } catch (anError) { dump("ERROR: " + anError); } }; request.onerror = function(aEvent) { window.alert("Error Status: " + aEvent.target.status); }; request.open("GET", url, true); request.send(null);

(3)定義構件：
可以使用Mozilla應用(如FireFox)本身提供的構件實現相應功能，如使用@mozilla.org/xmlextras/xmlhttprequest;1 獲取XMLHttpRequest對象，其中構件名稱定義的順序爲：@域名/模塊名/構件名;版本；我們還可以通過JS或C++定義自己的構件，可以定義新的接口或者使用已有的接口，然後使用JS或C++實現。
如下爲使用JS定義構件接口和實現的定義：

接口定義文件HelloWorld.idl

#include "nsISupports.idl" [scriptable, uuid(594084C0-0D69-11E0-BE83-9903E0D72085)] interface nsIHelloWorld : nsISupports { string hello(); };

使用命令接口定義文件進行編譯：

D:/extensions/xulrunner-1.9.2.13.en-US.win32.sdk/xulrunner-sdk/bin>xpidl -m type
lib -w -v -I D:/extensions/xulrunner-1.9.2.13.en-US.win32.sdk/xulrunner-sdk/idl
-e HelloWorld.xpt D:/extensions/xulrunner-1.9.2.13.en-US.win32.sdk/xulrunner-sdk
/idl/HelloWorld.idl

接口實現文件HelloWorld.js

Components.utils.import("resource://gre/modules/XPCOMUtils.jsm"); function HelloWorld() {} HelloWorld.prototype = { classDescription: "My Hello World Javascript XPCOM Component", classID: Components.ID("{594084C0-0D69-11E0-BE83-9903E0D72085}"), contractID: "@blog.csdn.com/helloworld;1", QueryInterface: XPCOMUtils.generateQI([Components.interfaces.nsIHelloWorld]), hello: function() { return "Hello World!"; } }; var components = [HelloWorld]; function NSGetModule(compMgr, fileSpec) { return XPCOMUtils.generateModule(components); }

 

注意：如果自己定義構件，默認配置下需要將構件定義文件放到components文件夾下。

 

(4)打包成xpi文件：
目前的目錄結構如下：

打包成zip文件，再將zip擴展名改爲xpi，雙擊此文件可以將該插件安裝到Mozilla應用上，如FireFox。