舊文件

此處文件僅供參考,請自行考量時效性與適用程度,其他庫藏文件請參考文件頁面
我們亟需您的協助,進行共筆系統搬移、及文件整理工作,詳情請查閱參與我們

如何製作 Firefox 擴充套件

出自 MozTW Wiki

如果有任何問題,可以上 討論區 討論,這個文件如果不夠詳細,也歡迎各位幫忙補齊。

撰寫擴充套件需要了解的技術

  • 不會別玩之絕對基礎區
    • 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

當然不是一定得叫做「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 目錄後也可能看到某個子目錄、裡面直接就放著這些檔案。


install.rdf

這個檔案是一定要有的,因為 Firefox 會先抓這個檔案,來確認那些檔案要放到那裡,你會看到有的擴充套件的 xpi 解開後,主目錄下會有 install.js ,那是給 mozilla 看的。


撰寫流程建議

假設你已經有想法,也經過系統分析/設計流程後,以下是我們建議撰寫步驟。

  1. 先把會用到的目錄建立好。通常主程式都放在 content 目錄下、css 檔和圖檔放在 skin 下、語系檔則放在 locale 下。當然一開始寫的時候全部丟 content 也不要緊,只是記得良好架構應該如上述配置。
  2. 撰寫 .xul,描述程式界面。
  3. 撰寫 .js,描述程式主功能。
  4. (選用) 將 .xul 及 .js 中的字串抽出,放在 locale 目錄下引用。
  5. (選用) 將 .xul 中的樣式抽出以 .css 表現,放在 skin 目錄下引用。
  6. 撰寫 install.rdf 檔。
  7. (選用) 為擴充套件加簽,證明其合法身分
  8. 包裝為 XPI

最極端的擴充套件甚至可能僅用一個 XUL 檔解決,所以怎麼抽出 .js、語系檔、.css 就看你的決定。

輔助發展工具

  • DOM Inspector。Firefox 內建好玩意,有觀察 XUL 架構等功能,可少去很多摸索時間。
  • Venkman: 這是一套 javascript 專用的 debuger
  • Extension Dev: 專門用來發展 extension 的工具,而且是用 Extension Manager 來安裝,裝好後就有很多好用的工具可以用,尤其是撰寫 XUL 界面時。

相關資源

  • 官方文件,特色是又臭又長不過連概念都會講給你聽
  • 民間文件,各有特色
個人工具