如何製作 Firefox 擴充套件
出自 MozTW Wiki
需要用到的技術
- HTML (基本)
- CSS (基本)
- XML (基本)
- JavaScript (熟悉)
- XUL (熟悉)
- RDF (熟悉)
ps 其中 javascript, xul, rdf 一定要會
必看的文件:XUL
擴充套件檔案架構
- extension.xpi:
xpi 檔是一個擴充套件的安裝檔,Firefox 可以直接讀取這個檔案,然後打開 Extension Manager 這個程式來執行 xpi 進行安裝的動作。而 xpi 其實就是一個壓縮檔,你可以用解 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 目錄: 必備的目錄,底下放的就是主要的 xul檔和 javascript 檔,也就是extension 的主程式
- components 目錄: 可有可無,它是用來放置一些有關 XPCOM 的檔案
- defaults 目錄: 可有可無, 用來放置一些設定套件相關 preferences 的檔案
- extension.jar:
jar 格式的檔案也是一個壓縮檔,裡頭包含了擴充套件的主要程式,所以這個檔也是必備的哦。
jar 解開之後的內容: content/extension.xul content/extension.js locale/extension.dtd skin/
底下這些目錄都可以獨自存在:
- content 目錄: 這是主要用來存放擴充套件主程式的地方,包含了 xul, javascript 檔。
- locale 目錄: 這裡就是放其他國家語系檔的地方,一般中文化好的語系檔都會放在這裡。
- skin 目錄: 這就是放置佈景主題的地方啦!
主程式的撰寫
- 在開發擴充套件時,你應該先把會用到的目錄先建立好。
- 一般主程式都放置在 content 目錄下。
- 撰寫 xul 檔: 描述你要如何呈現程式的界面
- 撰寫 js 檔: 這是 javascript 檔,用來描述程式主功能,例如:一個按鍵按下去後,要執行什麼動作,就用 javascript 來定義。
以上,要學習如何寫 xul 檔就請到 XUL Planet 閱讀相關文件,也可以順便幫忙 moztw 翻譯 xul 文件。
install.rdf
這個檔案是一定要有的,因為 Firefox 會先抓這個檔案,來確認那些檔案要放到那裡,你會看到有的擴充套件的 xpi 解開後,主目錄下會有 install.js ,那是給 mozilla 看的。
install.rdf 範例
這裡我們先給一個樣板:
<!-- 宣告區 --> <?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <!-- 主要內容 --> <Description about="urn:mozilla:install-manifest"> <em:id>{c7ae9c4d-e8f5-4a01-8ec9-1233018a202e}</em:id> <em:version>0.1</em:version> <!-- 指明要安裝套件的應用程式,這個例子是 Firefox --> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>0.10</em:minVersion> <em:maxVersion>1.0+</em:maxVersion> </Description> </em:targetApplication> <!-- 套件資訊 --> <em:name>Moztw Pack</em:name> <em:description>Moztw 自訂的套件</em:description> <em:creator>Moztw</em:creator> <em:contributor>dken</em:contributor> <em:homepageURL>http://moztw.org/</em:homepageURL> <!-- 安裝檔案 --> <em:file> <Description about="urn:mozilla:extension:file:moztwPack.jar"> <em:package>content/moztwPack/</em:package> <em:skin>skin/classic/moztwPack/</em:skin> <em:locale>locale/zh-TW/moztwPack/<em:locale> </Description> </em:file> </Description> </RDF>
- 宣告區:這個部份是固定的,只要照抄即可
- 主要內容:
這個部份頭尾的 <Description> 標籤寫法都是固定,而其中的 properties 的部份則可以視我們的需要來改變,但是有幾個必要的 properties 是一定要寫的,接下來會介紹。
<Description about="urn:mozilla:install-manifest"> ... [properties] ... </Description>
- 一定要寫的標籤
- <em:id>: 這是用來指定你的套件的 UID,那麼你要怎麼取得 UID 呢? 這裡有三套工具可以用 guidgen (Windows), uuidgen (Unix/Linux), "botbot uuid" (在IRC上)
- <em:version>: 指定你套件的版本號
- <em:targetApplication>: 這個部份指明你要安裝套件的是那個應用程式,例如:Firefox 或 mozilla
- <em:id>: 這裡的 id 是固定的哦
- Firefox:{ec8030f7-c20a-464f-9b0e-13a3a9e97384}
- Mozilla:{86c18b42-e466-45a9-ae7a-9b95ba6f5640}
- Thunderbird:{3550f703-e582-4d05-9a08-453d09bdfdc6}
- <em:minVersion>, <em:maxVersion>: 最小相容版和最大相容版本
- <em:id>: 這裡的 id 是固定的哦
- <em:name>: 擴充套件的名稱
- <em:file>: 指定 chrome 裡頭檔案的安裝目錄
- <Description about="urn:mozilla:extension:file:moztwPack.jar">: 注意,這裡的 moztwPack.jar 要替換成你包好的套件,可不要照抄吶。
- <em:package>: 指定安裝 content/ 裡的檔案
- <em:skin>: 指定安裝 skin/ 裡的檔案
- <em:locale>: 指定安裝 locale/ 裡的檔案
- 不一定要寫的標籤