發新話題
打印

如何製作 Firefox 擴充套件

如何製作 Firefox 擴充套件

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

    * 不會別玩之絕對基礎區
          o HTML
          o JavaScript
          o XML: XUL, RDF (這個不會可以用改的...)
    * 會了更好之薪水加值區
          o CSS
          o 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 目錄: 必備目錄,存放主程式。
          o 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 看的。

    * 如何撰寫install.rdf

====================================================================================================
撰寫流程建議

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

   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 架構等功能,可少去很多摸索時間。
官方文件
XUL 參考文件
RDF 參考文件
xpinstall 參考文件

非官方
XUL 經典學習站
MozillaZine Knowledge Base: Extension development
Creating Applications with Mozilla

TOP

發新話題