於 2006年4月30日 (日) 21:20 的最新修訂

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

內容大綱

1 撰寫擴充套件需要了解的技術
2 擴充套件檔案格式
3 撰寫流程建議
4 輔助發展工具
5 相關資源

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

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

如何撰寫install.rdf

撰寫流程建議

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

先把會用到的目錄建立好。通常主程式都放在 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 界面時。

@@ 行 1： / 行 1： @@
 如果有任何問題，可以上 [http://forum.moztw.org 討論區] 討論，這個文件如果不夠詳細，也歡迎各位幫忙補齊。
-= 需要用到的技術 =
+= 撰寫擴充套件需要了解的技術 =
-*HTML (基本)
+* 不會別玩之絕對基礎區
-*CSS (基本)
+** HTML
-*XML (基本)
+** JavaScript
-*JavaScript (熟悉)
+** XML: XUL, RDF (這個不會可以用改的...)
-*XUL (熟悉) - 推廌文件 [http://www.xulplanet.com/ XUL]
+* 會了更好之薪水加值區
-*RDF (熟悉) - 推廌文件 [http://www.xulplanet.com/ XUL]
+** CSS
-*XPCOM (基本) - 基礎文件 [http://www.xulplanet.com/ XUL]
+** XPCOM (可以用以聯結程式，補強 JavaScript 做不到的事情)
-ps 其中 javascript, xul, rdf 一定要熟，XPCOM 愈熟愈好...:p
+= 擴充套件檔案格式 =
-= 擴充套件檔案架構 =
+擴充套件使用 XPI 檔來安裝。Firefox 可以直接讀取這個檔案，然後以 Extension Manager 安裝擴充套件。xpi 其實就是一個 zip 格式的壓縮檔，你可以用解 zip 格式的解壓縮程式解壓縮。如果你還沒有適當軟體，推廌使用 [http://www.7-zip.org/ 7-zip]，這是一套自由軟體，同時也支援 zip 格式。
-*extension.xpi:
+== 檔案架構 ==
-xpi 檔是一個擴充套件的安裝檔，Firefox 可以直接讀取這個檔案，然後打開 Extension Manager 這個程式來執行 xpi 進行安裝的動作。而 xpi 其實就是一個壓縮檔，你可以用解 zip 格式的解壓縮程式來解開它，這裡我們推廌 [http://www.7-zip.org/ 7-zip] 這是一套自由軟體，同時也支援 zip 格式。
+xpi 解開之後的內容範例如下：
 <pre>
-xpi 解開之後的內容:(以下是例子)
      install.rdf
      chrome/extension.jar  <-  這是壓縮檔哦!!
@@ 行 24： / 行 23： @@
      defaults/preferences/extension.js
 </pre>
-*install.rdf:這個檔一定要有，用來描述什麼檔案該安裝到那裡。
-*chrome 目錄: 必備的目錄，底下放的就是主要的 xul檔和 javascript 檔，也就是extension 的主程式
-*components 目錄: 可有可無，它是用來放置一些有關 XPCOM 的檔案
-*defaults 目錄: 可有可無, 用來放置一些設定套件相關 preferences 的檔案
+*install.rdf: 必備，描述檔案安裝資訊。
+*chrome 目錄: 必備目錄，存放主程式。
+**extension.jar: 通常 chrome 裡都會放 .jar 壓縮檔，內含主程式的 XUL、JavaScript、locale、skin 等檔案，容後詳述。
+*components 目錄: 可有可無，放置有關 XPCOM 的檔案。
+*defaults 目錄: 可有可無，放置套件相關偏好設定的檔案。
-*extension.jar:
+== extension.jar ==
-jar 格式的檔案也是一個壓縮檔，裡頭包含了擴充套件的主要程式，所以這個檔也是必備的哦。
+當然不是一定得叫做「extension.jar」，總之是個 .jar 格式的檔案。這也是壓縮檔，裡頭包含擴充套件的主要程式，解開後內容範例如下：
 <pre>
-jar 解開之後的內容:(以下是例子)
          content/套件名稱/extension.xul
          content/套件名稱/extension.js
@@ 行 39： / 行 38： @@
          skin/套件名稱/extension.css
 </pre>
-底下這些目錄都可以獨自存在:
+*content 目錄: 存放擴充套件主程式，包含 xul、javascript 等檔案。
-*content 目錄: 這是主要用來存放擴充套件主程式的地方，包含了 xul, javascript 檔。
+*locale 目錄: 存放語系檔，依照語言名稱各闢子目錄 (如 locale/zh-TW 就是正體中文的)
-*locale 目錄: 這裡就是放其他國家語系檔的地方，一般中文化好的語系檔都會放在這裡。
+*skin 目錄: 存放佈景主題等外觀元素。
-*skin 目錄: 這就是放置佈景主題的地方啦!
-= 主程式的撰寫 =
+並非每個擴充套件裡都會有 .jar 檔，所以你打開 chrome 目錄後也可能看到某個子目錄、裡面直接就放著這些檔案。
-# 在開發擴充套件時，你應該先把會用到的目錄先建立好，將整個目錄架構先做出來。
-# 開始寫程式，通常，主程式都放置在 content 目錄下，css 檔和圖檔放在 skin 下，語系檔則放在 locale 下。
-# 撰寫 xul 檔: 描述你要如何呈現程式的界面
-# 撰寫 js 檔: 這是 javascript 檔，用來描述程式主功能，例如:一個按鍵按下去後，要執行什麼動作，就用 javascript 來定義。
-以上，要學習如何寫 xul 檔就請到 [http://www.xulplanet.com/ XUL Planet] 閱讀相關文件，也可以順便幫忙 moztw 翻譯 xul 文件。
-= install.rdf =
+== install.rdf ==
 這個檔案是一定要有的，因為 Firefox 會先抓這個檔案，來確認那些檔案要放到那裡，你會看到有的擴充套件的 xpi 解開後，主目錄下會有 install.js ，那是給 mozilla 看的。
 *[[如何撰寫install.rdf|如何撰寫install.rdf]]
+= 撰寫流程建議 =
+假設你已經有想法，也經過系統分析／設計流程後，以下是我們建議撰寫步驟。
+# 先把會用到的目錄建立好。通常主程式都放在 content 目錄下、css 檔和圖檔放在 skin 下、語系檔則放在 locale 下。當然一開始寫的時候全部丟 content 也不要緊，只是記得良好架構應該如上述配置。
+# 撰寫 .xul，描述程式界面。
+# 撰寫 .js，描述程式主功能。
+# (選用) 將 .xul 及 .js 中的字串抽出，放在 locale 目錄下引用。
+# (選用) 將 .xul 中的樣式抽出以 .css 表現，放在 skin 目錄下引用。
+# 撰寫 install.rdf 檔。
+# (選用) 為擴充套件加簽，證明其合法身分
+# 包裝為 XPI
+最極端的擴充套件甚至可能僅用一個 XUL 檔解決，所以怎麼抽出 .js、語系檔、.css 就看你的決定。
 = 輔助發展工具 =
+*DOM Inspector。Firefox 內建好玩意，有觀察 XUL 架構等功能，可少去很多摸索時間。
 *[http://www.hacksrus.com/~ginda/venkman/ Venkman]: 這是一套 javascript 專用的 debuger
 *[http://ted.mielczarek.org/code/mozilla/extensiondev/ Extension Dev]: 專門用來發展 extension 的工具，而且是用 Extension Manager 來安裝，裝好後就有很多好用的工具可以用，尤其是撰寫 XUL 界面時。
 = 相關資源 =
+* 官方文件，特色是又臭又長不過連概念都會講給你聽
+**[http://www.mozilla.org/projects/xul/ XUL] XUL 參考文件
+**[http://www.mozilla.org/rdf/doc/ RDF]  RDF 參考文件
+**[http://www.mozilla.org/projects/xpcom/ XPCOM] XPCOM 參考文件
+**[http://www.mozilla.org/projects/xpinstall/ xpinstall] xpinstall 參考文件
+* 民間文件，各有特色
+**[http://www.xulplanet.com/ XUL Planet] XUL 經典學習站，有些資訊已經過時不過仍然很有用處。也包括 JavaScript 的參考資料。[[XUL Tutorial]] 中文版翻譯中，歡迎幫忙。
+**[http://kb.mozillazine.org/Dev_:_Extensions MozillaZine Knowledge Base: Extension development] 非常詳盡的「資料蒐集」站，他們可是最大宗的 Mozilla 社群之一
+**[http://books.mozdev.org/html/index.html Creating Applications with Mozilla] 可以免費線上閱讀的書籍，亦有實體版。內容針對 Mozilla 所以有些已經過時，不過還是非常有用。
 {{link|文件專案|開發人員文件主頁}}

Mozilla Taiwan (MozTW)

舊文件

Views

「如何製作 Firefox 擴充套件」修訂間的差異

出自 MozTW Wiki