如何製作Firefox擴充套件
外观
如果有任何問題,可以上 討論區 討論,這個文件如果不夠詳細,也歡迎各位幫忙補齊。
- 不會別玩之絕對基礎區
- HTML
- JavaScript
- XML: XUL, RDF (這個不會可以用改的...)
- 會了更好之薪水加值區
- CSS
- XPCOM (可以用以聯結程式,補強 JavaScript 做不到的事情)
擴充套件使用 XPI 檔來安裝。Firefox 可以直接讀取這個檔案,然後以 Extension Manager 安裝擴充套件。xpi 其實就是一個 zip 格式的壓縮檔,你可以用解 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 目錄: 必備目錄,存放主程式。
- extension.jar: 通常 chrome 裡都會放 .jar 壓縮檔,內含主程式的 XUL、JavaScript、locale、skin 等檔案,容後詳述。
- components 目錄: 可有可無,放置有關 XPCOM 的檔案。
- defaults 目錄: 可有可無,放置套件相關偏好設定的檔案。
當然不是一定得叫做「extension.jar」,總之是個 .jar 格式的檔案。這也是壓縮檔,裡頭包含擴充套件的主要程式,解開後內容範例如下:
content/套件名稱/extension.xul content/套件名稱/extension.js locale/套件名稱/extension.dtd skin/套件名稱/extension.css
- content 目錄: 存放擴充套件主程式,包含 xul、javascript 等檔案。
- locale 目錄: 存放語系檔,依照語言名稱各闢子目錄 (如 locale/zh-TW 就是正體中文的)
- skin 目錄: 存放佈景主題等外觀元素。
並非每個擴充套件裡都會有 .jar 檔,所以你打開 chrome 目錄後也可能看到某個子目錄、裡面直接就放著這些檔案。
這個檔案是一定要有的,因為 Firefox 會先抓這個檔案,來確認那些檔案要放到那裡,你會看到有的擴充套件的 xpi 解開後,主目錄下會有 install.js ,那是給 mozilla 看的。
假設你已經有想法,也經過系統分析/設計流程後,以下是我們建議撰寫步驟。
- 先把會用到的目錄建立好。通常主程式都放在 content 目錄下、css 檔和圖檔放在 skin 下、語系檔則放在 locale 下。當然一開始寫的時候全部丟 content 也不要緊,只是記得良好架構應該如上述配置。
- 撰寫 .xul,描述程式界面。
- 撰寫 .js,描述程式主功能。
- (選用) 將 .xul 及 .js 中的字串抽出,放在 locale 目錄下引用。
- (選用) 將 .xul 中的樣式抽出以 .css 表現,放在 skin 目錄下引用。
- 撰寫 install.rdf 檔。
- (選用) 為擴充套件加簽,證明其合法身分
- 包裝為 XPI
最極端的擴充套件甚至可能僅用一個 XUL 檔解決,所以怎麼抽出 .js、語系檔、.css 就看你的決定。
- DOM Inspector。Firefox 內建好玩意,有觀察 XUL 架構等功能,可少去很多摸索時間。
- Venkman: 這是一套 javascript 專用的 debuger
- Extension Dev: 專門用來發展 extension 的工具,而且是用 Extension Manager 來安裝,裝好後就有很多好用的工具可以用,尤其是撰寫 XUL 界面時。
- 官方文件,特色是又臭又長不過連概念都會講給你聽
- 民間文件,各有特色
- XUL Planet XUL 經典學習站,有些資訊已經過時不過仍然很有用處。也包括 JavaScript 的參考資料。XUL Tutorial 中文版翻譯中,歡迎幫忙。
- MozillaZine Knowledge Base: Extension development 非常詳盡的「資料蒐集」站,他們可是最大宗的 Mozilla 社群之一
- Creating Applications with Mozilla 可以免費線上閱讀的書籍,亦有實體版。內容針對 Mozilla 所以有些已經過時,不過還是非常有用。