firefox 擴充開發技巧

Firefox Extension
參考：http://developer.mozilla.org/en/Extensions
http://www.ibm.com/developerworks/cn/web/wa-lo-firefox-ext/

目錄結構：
chrome.mainfest // 定義整個擴充的目錄結構
install.rdf // 定義擴充的ID,名稱等等資訊
chrome/
chrome/content/ // 定義擴充介面(.xul檔案),定義擴充介面實現功能的邏輯(.js檔案)
chrome/skin/ // 定義擴充介面上用到的圖片,屬性風格,皮膚檔案等(.css,.ico,.png)
chrome/locale/
chrome/locale/en-US/ // 定義翻譯字串(.dtd檔案),屬性翻譯字串(.properties檔案)
chrome/locale/zh-CN/ // 定義翻譯字串(.dtd檔案),屬性翻譯字串(.properties檔案)
defaults/
defaults/preferences/ // 定義需要儲存的資訊預設值(.js檔案)
components/ // 定義擴充邏輯用的方法介面(.xpt, .dll檔案)

安裝擴充：
將上面目錄結構的檔案打包成.zip檔案,然後改尾碼為.xpi,拖到firefox介面上就會彈出安裝介面安裝就可以了

chrome.mainfest詳讀

// 範例程式碼詳解
# 在前面加"#"表示注釋
# 註冊chrome.manifest
# 指定將要讀取的修改內容的路徑，後面必須帶"/" 可以修改Toolbars, menu bars, progress bars,
# and window title bars are all examples of elements that are typically part of the chrome

content my_extension_name chrome/content/

# 指定將要載入的皮膚路徑，後面必須帶"/"
skin my_extension_name classic/1.0 chrome/skin/

# 指定將要讀取的語言路徑，後面必須帶"/"
locale my_extension_name en-US chrome/locale/en-US/
locale my_extension_name zh-CN chrome/locale/zh-CN/

# 將後面的檔案添加到前面的檔案裡
overlay chrome://browser/content/browser.xul chrome://my_extension_name /content/statusbarOverlay.xul

# 都是選擇性參數
# style chrome://URI-to-style chrome://stylesheet-URI [flags]
# override chrome://package/type/original-uri.whatever new-resolved-URI [flags]
# resource aliasname uri/to/files/ [flags]
# application = app-ID
# appversion 操作符 version (操作符為"=", "<", ">", "<=", ">=")
# os = WINNT(作業系統)
# osversion >= 10.5
# platform格式如下：
# content global-platform jar:toolkit.jar!/toolkit/content/global-platform/ platform

install.rdf詳讀
參考：http://developer.mozilla.org/en/Building_an_Extension

<?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> 當前平台下產生的GUID
// <em:version> 由"."串連的數字
// <em:type> 指定的數字.
// 2代表Extensions,4代表Themes,8代表Locale,32代表Multiple Item Package
// <em:targetApplication> 指定這個擴充是為那個應用程式使用的
// 格式如下： <em:id>指定的應用程式的GUID;
// <em:minVersion>,<em:maxVersion>分別為應用程式的最小最大版本號碼
//<em:targetApplication>
// <Description>
// <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
// <em:minVersion>1.5</em:minVersion>
// <em:maxVersion>2.0.0.*</em:maxVersion>
// </Description>
//</em:targetApplication>

// <em:name> 顯示在應用程式介面上的副檔名稱

// 下面的參數是可選擇添加的
// <em:description> 描述該擴充的功能
// <em:creator> 創始人
// <em:homepageURL> 首頁
// <em:updateURL> 更新首頁
// <em:optionsURL>
// <em:aboutURL>
// <em:iconURL>
// <em:developer> 開發人員
// <em:translator> 翻譯者
// <em:contributor> 捐助者
// <em:targetPlatform> 目標程式的系統平台
// <em:localized> 集中顯示一些擴充的資訊
// <em:locale> 指定將來用那種語言來顯示資訊（必要），在使用了<em:localized>後用

// 例子:
<em:id>{69354808-F0D7-40CC-BB5F-8C1B8F57CECC}</em:id>
<em:version>0.91</em:version>
<em:type>2</em:type>
<em:name>statusbar settor</em:name>

// 目標程式為firfox
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> //firefox的GUID
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>2.0.0.*</em:maxVersion>
</Description>
</em:targetApplication>

// 添加可選的資訊
// <creator>Federico Parodi</creator>
// <creator>Stefano Verna</creator>
// <creator>Nils Maier</creator>
// <developer>Federico Parodi</developer>
// <developer>Stefano Verna</developer>
// <developer>Nils Maier</developer>
// <aboutURL>chrome://dta/content/about/about.xul</aboutURL>
// <iconURL>chrome://dta/skin/common/icon.png</iconURL>
// <homepageURL>http://downthemall.net/</homepageURL>
// <optionsURL>chrome://dta/content/preferences/prefs.xul</optionsURL>

</Description>
</RDF>

chrome 詳解：
1 chrome/content/
content這個檔案夾裡的檔案類型主要包括.js和.xul兩種
.xul檔案主要用來實現介面布局的,當然也可以實現簡單的邏輯操作,建議所有邏輯都放到相應的.js裡去處理,下面給出執行個體代碼statusbarOverlay.xul:
<?xml version="1.0" encoding="UTF-8"?>

// 定義xul中用到的多語言字串
<!DOCTYPE overlay SYSTEM "chrome:// my_extension_name/locale/statusbarOverlay.dtd">

// 所有的.xul檔案都要加的項,id可以隨便設定的
<overlay id="bc_ext_overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

//申明要用到的.js檔案
<script src=" statusbarOverlay.js"/>
//申明要用到的屬性多語言字串
<stringbundleset id="stringbundleset">
<stringbundle id="ext-strings" src="chrome:// my_extension_name/locale/ statusbarOverlay.properties"/>
</stringbundleset>
//添加xul元素到firefox介面上
//相關xul元素特性請查看xul教程
//參考：http://developer.mozilla.org/en/XUL_Tutorial

<popup id="contentAreaContextMenu">

<menuitem image="chrome://my_extension_name/skin/download_all.png" class="menuitem-iconic" id=" download_all_item" label="&download_all_text;"

insertafter="context-selectall" oncommand=" onCmdDownloadAll(event)"/>

<menuitem image="chrome:// my_extension_name/skin/download_link.png" class="menuitem-iconic" id="download_link_item" label="&download_link_text;"

accesskey="&download_link_text.accesskey;" insertafter="context-selectall" oncommand="onCmdDownloadSingleLink(event)"/>

<menuseparator id="seperator_1" insertafter="context-selectall" />

</popup>
</overlay>

.js檔案主要用來相應.xul裡邏輯處理,下面給出執行個體代碼statusbarOverlay.js:
參考javescription指令碼文法
onLoad: function()
{
// initialization code
this.initialized = true;
this.strings = document.getElementById("bc_ext-strings");
document.getElementById("contentAreaContextMenu").addEventListener("popupshowing", onContentPopupMenu, false);
},
onCmdDownloadSingleLink: function(e)
{
alert(“download single link”);
},

onCmdDownloadAll: function(e)
{
alert(“download all link”);
}

window.addEventListener("load", function(e) { onLoad(e); }, false);

2 chrome/skin/
存放.xul中用到的圖片,屬性風格,皮膚檔案等(.css,.ico,.png)

3 chrome/locale/
chrome/locale/en-US/ // 定義翻譯字串(.dtd檔案),屬性翻譯字串(.properties檔案)
chrome/locale/zh-CN/ // 定義翻譯字串(.dtd檔案),屬性翻譯字串(.properties檔案)
.dtd檔案中定義要翻譯的字串
範例程式碼：
在zh-CN檔案夾中的statusbarOverlay.dtd
<!ENTITY download_link_text "下載此串連">
<!ENTITY download_all_text "下載全部串連">
在en-US檔案夾中的statusbarOverlay.dtd
<!ENTITY download_link_text "download this link">
<!ENTITY download_all_text "download all links">

.properties檔案中儲存著要儲存的屬性的多語言字元
範例程式碼：
在zh-CN檔案夾中的statusbarOverlay.properties
extensions.{69354808-F0D7-40CC-BB5F-8C1B8F57CECC}.description=常用來下載http連結。
在en-US檔案夾中的statusbarOverlay.properties
extensions.{69354808-F0D7-40CC-BB5F-8C1B8F57CECC}.description=it used to download http links.

defaults 詳解
4 defaults/preferences/ // 定義需要儲存的資訊預設值(.js檔案)
.js檔案中描述的是需要永久儲存起來的變數的值,每次啟動時會載入.js中欄位中儲存的值來初始化.xul檔案中的元素
範例程式碼：
// 給變數定義預設值
pref("login.time","");
pref("username, "ghostjeky");
pref("extensions.{69354808-F0D7-40CC-BB5F-8C1B8F57CECC}.description", "chrome://my_extension/locale/statusbarOverlay.properties");//引用多語言屬性字串

5 components/ // 定義擴充邏輯用的方法介面(.xpt, .dll檔案)

6 開發擴充時常用的幾個擴充
DOM Inspector 主要用來檢測目標位置的元素的id，例如：你想在主菜單-》工具-》選項菜單的後面再增加一個菜單，則只要用DOM Inspector檢測出選項菜單的id為

menu_preferences，則你的xul就可以這麼寫<menuitem id=”myid” insertafter=” menu_preferences” label=”mymenuitem”/>
：https://addons.mozilla.org/zh-CN/firefox/addon/6622
Extension Developer's Extension 主要用來測試你寫的那段javascript代碼是不是能夠正確執行，預覽xul代碼是不是你想要的布局.
在about：config中設定（只有安裝了這個擴充才有的配置項）
browser.dom.window.dump.enabled = true //允許使用 dump() 語句向標準控制台輸出資訊，真正能看到dump（）語句的輸出還有使用-console參數啟動firefox
：https://addons.mozilla.org/zh-CN/firefox/addon/7434
Javascript debugger 主要用來調試js代碼用的,但要能在裡面找到你寫的js檔案前提是你的js已經正確載入了，先將Debug菜單下面的Exclude Browser Files前面的勾去掉
：https://addons.mozilla.org/zh-CN/firefox/addon/216
Firebug 聽很多人說很好用 調試js，尋找錯誤，但我一直沒有領略到它的好處，只是用來尋找js的錯誤
：https://addons.mozilla.org/zh-CN/firefox/addon/1843