火狐瀏覽器插件開發入門教程

許多網友都想學習火狐瀏覽器插件開發這一方面的知識,不過 , 目前,許多資料都是比較晦澀難懂,不太適合初學者 。那么,初學者想要學習火狐瀏覽器插件開發該怎么入門呢?還是一起來看看今天的火狐瀏覽器插件開發入門教程!

火狐瀏覽器插件開發入門教程

火狐瀏覽器
首先需要知道什么是Firefox插件 。這里說的插件只是一個通俗的說法,其實Firefox這種擴展功能的插件包括:擴展extension和插件plugin 。
Firefox官方網站的解釋是:Extensions are small add-ons that add new functionality toyour Mozilla program. Plugins are programs that allow websites to providecontent to you and have it appear in yourbrowser.(擴展是能夠給Mozilla增加一些新功能的附加軟件,插件是允許網站向你提供內容并在瀏覽器中顯示的程序) 。通俗的講,擴展是基于Firefox本身增加的一些實用功能,而插件則是在Firefox之外獨立編寫的程序 , 用于顯示網頁中的特定內容如Flash、視頻和Java等 。
其實 , 我們需要開發的是Extension 。
要開發Extension , 可以分幾步走:
1.了解什么是Extension,一般現成的Extension怎樣組成的?里邊包含的每個文件具體的作用是什么?
2.了解Firefox處理運行Extension的機制 。例如Xpcom , chrome機制等 。
3.看看入門例子,用記事本,做一個最簡單的擴展,運行一下 。另外,使用Firefox,下載一些常用的擴展,并查看一下人家的源代碼 。
4.正式搭建開發環境 。
5.一邊學習人家的代碼,一邊修改代碼實現自己的擴展 。
第一步和第二步:
需要了解:chrome,rdf , manifest,xul,xpcom等概念 。
擴展(extensions)
Extensions添加新功能到MozillaFirefox中 。Extensions可以簡單添加一個工具欄按鈕,也可以實現一個完整的新功能 。Extensions可以讓firefox更加適合個人需要 。
Extensions跟plugins(插件)不同 。插件幫助瀏覽器顯示特殊內容,例如播放多媒體文件 。常見的插件是flashplayer 。而Extensions也跟搜索引擎插件不同 , 搜索引擎插件只是在搜索欄里邊多加入一個搜索引擎地址而已 。
一個擴展,通常是一個XPI(Cross-Platform InstallerModule)包,其實是一個zip類型的壓縮包,里邊包括必須的文件 。在下邊的圖1中,顯示了一個標準的擴展包括的文件和文件的目錄結構 。
火狐瀏覽器插件開發入門教程

firefox擴展目錄結構
在上圖中,content 目錄下面存放的是擴展的描述界面的 XUL 文件和增加行為的 JavaScript 文件 。locale目錄存放的是本地化相關的文件 。如果需要支持英文和中文 , 就可以在 locale 目錄下面新建 en-US 和 zh-CN 目錄來存放相應的本地化字符串 。skin目錄存放的是一些 CSS 文件,用來定義擴展的外觀 。chrome.manifest 是 Chrome 注冊的清單文件(參見 2.2節) 。install.rdf分別包含了擴展安裝的信息 。
chrome
Chrome 指的是應用程序窗口的內容區域之外的用戶界面元素的集合 , 這些用戶界面元素包括工具條,菜單,進度條和窗口的標題欄等 。Chrome提供者能為特定的窗口類型(如瀏覽器窗口)提供 chrome 。有三種基本的 chrome 提供者:
l 內容(Content):通常是 XUL(XML User Interface Language) 文件 。而XUL文件將會指定擴展在Firefox中運行時表現的界面和功能 。XUL文件是一種Javascript文件,設計的目的是為了描述窗口和對話框的內容 。
l 區域(Locale) :存放本地化信息 。
l 皮膚(Skin):描述 chrome 的外觀 。通常包含 CSS 和圖像文件 。
XULRunner
XULRunner項目提供一套稱為XULRunner的Mozilla運行支持包,用于啟動基于XUL XPCOM(見2.4節)的程序 , 例如Firefox,Thunderbird,Sunbird 。它提供各種機制 , 包括安裝,升級,卸除這些軟件的功能 。
而Firefox整個程序主界面和擴展的界面都是由XUL文件來描述的,所以在Firefox運行過程中 , 和擴展使用過程中 , 都是靠XULRunner來支持 。
XPCOM
XPCOM(Cross Platform Component Object Model)是一種跨平臺組件對象模型,類似于微軟的COM 。它有多種語言系結(Language Binding),使 XPCOM 組件可使用并實現于C、JavaScript、Java 及Python 。XPCOM 的界面是由稱為 XPIDL (Interface Definition Language)所定義 。
XPCOM 自身提供了一套核心組件和類別,例如,檔案和內存管理、線程、基本數據結構(strings, arrays,variants)等 。大多數XPCOM 組件并非由核心組件所提供,而是由其他平臺或應用程序、甚至是延伸套件所提供 。
而在Firefox中,絕大多數的功能都基于XPCOM機制 。例如Firefox為擴展開發提供的接口都是用XPCOM方式來實現的 。
例如gRDF = Components.classes[@mozilla.org/rdf/rdf-service;1]
.getService(Components.interfaces.nsIRDFService);
將獲取RDF模塊的nsIRDFService實例 。
【火狐瀏覽器插件開發入門教程】XPInstall
XPInstall(Cross-PlatformInstall)是Mozilla系列軟件或者其他基于XUL的軟件中用于安裝extensions的技術 。在Firefox2.0的源代碼中 , 有一個名為xpinstall的文件夾,存放跟XPInstall模塊相關的代碼 。
另外需要特別指出Firefox的擴展分為普通默認擴展和定制安裝擴展 。普通默認擴展沒有定制的安裝代碼 , 整個安裝過程由Firefox默認流程來執行 。而定制安裝擴展的安裝包中有定制的安裝過程信息 。而這些信息是用專門的Javascript代碼編寫,調用XPInstall提供的API來實現 。定制安裝擴展,常見的例子是用Firefox打開擴展中心,點擊某個擴展就可以在線安裝,其中就是調用了XPInstall的API 。
簡單了解Firefox Extension組成說明和Firefox處理Extension的過程分析 。
第三步:
根據這個簡單教程,嘗試一下hello world:
另外就是在Firefox官方擴展網站下載一些擴展來研究一下了 。
安裝后,Extension的代碼會在磁盤這個位置:
C:Documents and SettingsUserNameApplicationDataMozillaFirefoxProfilesProfileextensions
第四步:
正式開始使用開發環境 。
1.Firefox安裝相關的擴展:firebug,1.Firefox3.0,這個肯定必不可少了 。在此推薦3.0,因為最新版3.6或者3.7 , 那些擴展還沒有更新跟進,所以要想安裝更多的擴展,還是以3.0為好 。
2.Firebug,這個不必多說 。雖然我只是菜鳥,只是用這個來定位某些xul元素對應什么代碼 , 但幫助不少 。再到firebug的官網,下載chromebug:(有了chromebug才能更好的調試自己寫的chrome文件)
因為調試js需要開開關關firefox , 太麻煩,所以一些代碼可以在firebug控制臺先測試 。在firefox7試驗過
3.Extension Developer 。官網推薦 , 當然安裝啦 。這個是一套Firefox擴展,包括打包xpi功能,預覽xul等 。
4.SpketIDE 。開發擴展的IDE,官網推薦的,比較好用 。不過好像不能打包xpi , 也不能測試 。不過只作為編輯器也不錯了 。用它來看人家的擴展的代碼,非常舒服
5.xul explorer 。預覽xul效果 。
6.emEditor 。快速打開代碼文件 , 進行修改 。另外最重要的功能是:查找 。研究人家的代碼的時候,JavaScript的代碼轉來轉去,太難找到某些變量或者對象的定義了 。用emEditor的在文件中查找功能,作用非常大,查找出來的結果有預覽(后來發現,也可以直接用SpketIDE的search--file功能,跟eclipse的查找功能類似,不過缺點就是沒有預覽,每次要雙擊了才知道是怎么匹配的 。)
7.另外,習慣使用eclipsespketXULBoosterFirefox
第五步:
慢慢學習Javascript , CSS還有一些細節的技術 。嘗試修改人家已有的Extension,加入自己想要的功能 。

相關經驗推薦