如何製作 Firefox 擴充套件
出自 MozTW Wiki
如果有任何問題,可以上 討論區 討論,這個文件如果不夠詳細,也歡迎各位幫忙補齊。
需要用到的技術
- HTML (基本)
- CSS (基本)
- XML (基本)
- JavaScript (熟悉)
- XUL (熟悉) - 推薦文件 XUL
- RDF (熟悉) - 推薦文件 XUL
- XPCOM (基本) - 基礎文件 XUL
ps 其中 javascript, xul, rdf 一定要熟,XPCOM 愈熟愈好...:p
擴充套件檔案架構
- extension.xpi:
xpi 檔是一個擴充套件的安裝檔,Firefox 可以直接讀取這個檔案,然後打開 Extension Manager 這個程式來執行 xpi 進行安裝的動作。而 xpi 其實就是一個壓縮檔,你可以用解 zip 格式的解壓縮程式來解開它,這裡我們推廌 7-zip 這是一套自由軟體,同時也支援 zip 格式。
xpi 解開之後的內容:(以下是例子) install.rdf chrome/extension.jar <- 這是壓縮檔哦!! components/extension.xpt components/extension.js defaults/extension.properties defaults/preferences/extension.js
- install.rdf:這個檔一定要有,用來描述什麼檔案該安裝到那裡。
- chrome 目錄: 必備的目錄,底下放的就是主要的 xul檔和 javascript 檔,也就是extension 的主程式
- components 目錄: 可有可無,它是用來放置一些有關 XPCOM 的檔案
- defaults 目錄: 可有可無, 用來放置一些設定套件相關 preferences 的檔案
- extension.jar:
jar 格式的檔案也是一個壓縮檔,裡頭包含了擴充套件的主要程式,所以這個檔也是必備的哦。
jar 解開之後的內容:(以下是例子) content/套件名稱/extension.xul content/套件名稱/extension.js locale/套件名稱/extension.dtd skin/套件名稱/extension.css
底下這些目錄都可以獨自存在:
- content 目錄: 這是主要用來存放擴充套件主程式的地方,包含了 xul, javascript 檔。
- locale 目錄: 這裡就是放其他國家語系檔的地方,一般中文化好的語系檔都會放在這裡。
- skin 目錄: 這就是放置佈景主題的地方啦!
主程式的撰寫
- 在開發擴充套件時,你應該先把會用到的目錄先建立好,將整個目錄架構先做出來。
- 開始寫程式,通常,主程式都放置在 content 目錄下,css 檔和圖檔放在 skin 下,語系檔則放在 locale 下。
- 撰寫 xul 檔: 描述你要如何呈現程式的界面
- 撰寫 js 檔: 這是 javascript 檔,用來描述程式主功能,例如:一個按鍵按下去後,要執行什麼動作,就用 javascript 來定義。
以上,要學習如何寫 xul 檔就請到 XUL Planet 閱讀相關文件,也可以順便幫忙 moztw 翻譯 xul 文件。
install.rdf
這個檔案是一定要有的,因為 Firefox 會先抓這個檔案,來確認那些檔案要放到那裡,你會看到有的擴充套件的 xpi 解開後,主目錄下會有 install.js ,那是給 mozilla 看的。
輔助發展工具
- Venkman: 這是一套 javascript 專用的 debuger
- Extension Dev: 專門用來發展 extension 的工具,而且是用 Extension Manager 來安裝,裝好後就有很多好用的工具可以用,尤其是撰寫 XUL 界面時。
相關資源
- XUL XUL 其他參考文件
- RDF RDF 其他參考文件
- XPCOM XPCOM 其他參考文件
- xpinstall xpinstall 其他參考文件
- Creating Applications with Mozilla Creating Applications with Mozilla
‧返回上一頁: 開發人員文件主頁