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(操作系統(tǒng))
# 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="
// 下面的參數是必須要添加的
// <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>

// 所有的.xul文件都要加的項,id可以隨便設置的
<overlay id="bc_ext_overlay" xmlns="

    //申明要用到的.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 開發(fā)擴展時常用的幾個擴展
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代碼是不是能夠正確執(zhí)行，預覽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

最新評論