UT男同志論壇 - Powered by Discuz! Board

標題: [資源分享] [轉貼] 如何製作 Firefox 擴充套件 [打印本頁]

作者: 祐祐 時間: 2010-8-8 13:04 標題: [轉貼] 如何製作 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

歡迎光臨 UT男同志論壇 (http://jdlog.com/)