舊文件

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

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

出自 MozTW Wiki

擴充套件檔案架構
(移除廣告)
 
(未顯示由 4 位使用者於中間所作的 6 次修訂)
行 1: 行 1:
 
如果有任何問題,可以上 [http://forum.moztw.org 討論區] 討論,這個文件如果不夠詳細,也歡迎各位幫忙補齊。
 
如果有任何問題,可以上 [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>
 
<pre>
xpi 解開之後的內容:(以下是例子)
 
 
     install.rdf                   
 
     install.rdf                   
 
     chrome/extension.jar  <-  這是壓縮檔哦!!       
 
     chrome/extension.jar  <-  這是壓縮檔哦!!       
行 24: 行 23:
 
     defaults/preferences/extension.js
 
     defaults/preferences/extension.js
 
</pre>
 
</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>
 
<pre>
jar 解開之後的內容:(以下是例子)
 
 
         content/套件名稱/extension.xul
 
         content/套件名稱/extension.xul
 
         content/套件名稱/extension.js
 
         content/套件名稱/extension.js
行 39: 行 38:
 
         skin/套件名稱/extension.css
 
         skin/套件名稱/extension.css
 
</pre>
 
</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 看的。
 
這個檔案是一定要有的,因為 Firefox 會先抓這個檔案,來確認那些檔案要放到那裡,你會看到有的擴充套件的 xpi 解開後,主目錄下會有 install.js ,那是給 mozilla 看的。
 
*[[如何撰寫install.rdf|如何撰寫install.rdf]]
 
*[[如何撰寫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://www.hacksrus.com/~ginda/venkman/ Venkman]: 這是一套 javascript 專用的 debuger
 
*[http://ted.mielczarek.org/code/mozilla/extensiondev/ Extension Dev]: 專門用來發展 extension 的工具,而且是用 Extension Manager 來安裝,裝好後就有很多好用的工具可以用,尤其是撰寫 XUL 界面時。
 
*[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|文件專案|開發人員文件主頁}}
 
{{link|文件專案|開發人員文件主頁}}

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

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

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

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

相關資源

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