佳木斯湛栽影视文化发展公司

主頁(yè) > 知識(shí)庫(kù) > firefox 擴(kuò)展開(kāi)發(fā)技巧

firefox 擴(kuò)展開(kāi)發(fā)技巧

熱門標(biāo)簽:檢查注冊(cè)表項(xiàng) 服務(wù)器配置 鐵路電話系統(tǒng) 呼叫中心市場(chǎng)需求 網(wǎng)站文章發(fā)布 美圖手機(jī) 智能手機(jī) 銀行業(yè)務(wù)

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

目錄結(jié)構(gòu):
chrome.mainfest        // 定義整個(gè)擴(kuò)展的目錄結(jié)構(gòu)
install.rdf        // 定義擴(kuò)展的ID,名稱等等信息
chrome/
chrome/content/        // 定義擴(kuò)展界面(.xul文件),定義擴(kuò)展界面實(shí)現(xiàn)功能的邏輯(.js文件)
chrome/skin/        // 定義擴(kuò)展界面上用到的圖片,屬性風(fēng)格,皮膚文件等(.css,.ico,.png)
chrome/locale/
chrome/locale/en-US/        // 定義翻譯字符串(.dtd文件),屬性翻譯字符串(.properties文件)
chrome/locale/zh-CN/     // 定義翻譯字符串(.dtd文件),屬性翻譯字符串(.properties文件)
defaults/
defaults/preferences/    // 定義需要保存的信息默認(rèn)值(.js文件)
components/        // 定義擴(kuò)展邏輯用的方法接口(.xpt, .dll文件)

安裝擴(kuò)展:
將上面目錄結(jié)構(gòu)的文件打包成.zip文件,然后改后綴為.xpi,拖到firefox界面上就會(huì)彈出安裝界面安裝就可以了

chrome.mainfest詳讀

// 示例代碼詳解
# 在前面加"#"表示注釋
# 注冊(cè)chrome.manifest
# 指定將要讀取的修改內(nèi)容的路徑,后面必須帶"/" 可以修改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/

# 指定將要讀取的語(yǔ)言路徑,后面必須帶"/"
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

# 都是可選參數(shù)
# 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="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">

// 下面的參數(shù)是必須要添加的
// em:id>    當(dāng)前平臺(tái)下生成的GUID
// em:version>      由"."連接的數(shù)字
// em:type>    指定的數(shù)字.
        // 2代表Extensions,4代表Themes,8代表Locale,32代表Multiple Item Package
// em:targetApplication>    指定這個(gè)擴(kuò)展是為那個(gè)應(yīng)用程序使用的
// 格式如下:    em:id>指定的應(yīng)用程序的GUID;
//        em:minVersion>,em:maxVersion>分別為應(yīng)用程序的最小最大版本號(hào)
//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>    顯示在應(yīng)用程序界面上的擴(kuò)展名稱

// 下面的參數(shù)是可選擇添加的
// em:description>        描述該擴(kuò)展的功能
// em:creator>        創(chuàng)始人
// em:homepageURL>        主頁(yè)
// em:updateURL>        更新主頁(yè)
// em:optionsURL>
// em:aboutURL>
// em:iconURL>
// em:developer>        開(kāi)發(fā)者
// em:translator>        翻譯者
// em:contributor>         捐助者
// em:targetPlatform>    目標(biāo)程序的系統(tǒng)平臺(tái)
// em:localized>        集中顯示一些擴(kuò)展的信息
// em:locale>    指定將來(lái)用那種語(yǔ)言來(lái)顯示信息(必要),在使用了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>

// 目標(biāo)程序?yàn)閒irfox
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這個(gè)文件夾里的文件類型主要包括.js和.xul兩種
.xul文件主要用來(lái)實(shí)現(xiàn)界面布局的,當(dāng)然也可以實(shí)現(xiàn)簡(jiǎn)單的邏輯操作,建議所有邏輯都放到相應(yīng)的.js里去處理,下面給出實(shí)例代碼statusbarOverlay.xul:
?xml version="1.0" encoding="UTF-8"?>

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

// 所有的.xul文件都要加的項(xiàng),id可以隨便設(shè)置的
overlay id="bc_ext_overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    //申明要用到的.js文件
    script src=" statusbarOverlay.js"/>   
    //申明要用到的屬性多語(yǔ)言字符串
    stringbundleset id="stringbundleset">
        stringbundle id="ext-strings" src="chrome:// my_extension_name/locale/ statusbarOverlay.properties"/>
    /stringbundleset>
//添加xul元素到firefox界面上
//相關(guān)xul元素特性請(qǐng)查看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文件主要用來(lái)相應(yīng).xul里邏輯處理,下面給出實(shí)例代碼statusbarOverlay.js:
參考javescription腳本語(yǔ)法
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中用到的圖片,屬性風(fēng)格,皮膚文件等(.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文件中保存著要保存的屬性的多語(yǔ)言字符
示例代碼:
在zh-CN文件夾中的statusbarOverlay.properties
extensions.{69354808-F0D7-40CC-BB5F-8C1B8F57CECC}.description=常用來(lái)下載http鏈接。
在en-US文件夾中的statusbarOverlay.properties
extensions.{69354808-F0D7-40CC-BB5F-8C1B8F57CECC}.description=it used to download http links.

defaults 詳解
4 defaults/preferences/     // 定義需要保存的信息默認(rèn)值(.js文件)
.js文件中描述的是需要永久保存起來(lái)的變量的值,每次啟動(dòng)時(shí)會(huì)載入.js中字段中保存的值來(lái)初始化.xul文件中的元素
示例代碼:
// 給變量定義默認(rèn)值
pref("login.time","");
pref("username, "ghostjeky");
pref("extensions.{69354808-F0D7-40CC-BB5F-8C1B8F57CECC}.description", "chrome://my_extension/locale/statusbarOverlay.properties");//引用多語(yǔ)言屬性字符串

5 components/        // 定義擴(kuò)展邏輯用的方法接口(.xpt, .dll文件)

6 開(kāi)發(fā)擴(kuò)展時(shí)常用的幾個(gè)擴(kuò)展
DOM Inspector 主要用來(lái)檢測(cè)目標(biāo)位置的元素的id,例如:你想在主菜單-》工具-》選項(xiàng)菜單的后面再增加一個(gè)菜單,則只要用DOM Inspector檢測(cè)出選項(xiàng)菜單的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 主要用來(lái)測(cè)試你寫的那段javascript代碼是不是能夠正確執(zhí)行,預(yù)覽xul代碼是不是你想要的布局.
在about:config中設(shè)置(只有安裝了這個(gè)擴(kuò)展才有的配置項(xiàng))
browser.dom.window.dump.enabled  = true //允許使用 dump() 語(yǔ)句向標(biāo)準(zhǔn)控制臺(tái)輸出信息,真正能看到dump()語(yǔ)句的輸出還有使用-console參數(shù)啟動(dòng)firefox
下載地址:https://addons.mozilla.org/zh-CN/firefox/addon/7434
Javascript debugger 主要用來(lái)調(diào)試js代碼用的,但要能在里面找到你寫的js文件前提是你的js已經(jīng)正確加載了,先將Debug菜單下面的Exclude Browser Files前面的勾去掉
下載地址:https://addons.mozilla.org/zh-CN/firefox/addon/216
Firebug 聽(tīng)很多人說(shuō)很好用 調(diào)試js,查找錯(cuò)誤,但我一直沒(méi)有領(lǐng)略到它的好處,只是用來(lái)查找js的錯(cuò)誤
下載地址:https://addons.mozilla.org/zh-CN/firefox/addon/1843

標(biāo)簽:滄州 樂(lè)山 新疆 上海 紅河 沈陽(yáng) 長(zhǎng)治 河南

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《firefox 擴(kuò)展開(kāi)發(fā)技巧》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266
    南昌市| 安远县| 林甸县| 仪征市| 杭锦旗| 贺兰县| 温泉县| 南开区| 沙洋县| 惠安县| 于田县| 昌宁县| 嘉兴市| 加查县| 米泉市| 本溪市| 康定县| 大名县| 安丘市| 罗源县| 高州市| 遂宁市| 织金县| 瓮安县| 肃南| 平邑县| 通城县| 仪征市| 泰来县| 大埔区| 荔浦县| 罗源县| 全南县| 微博| 祁连县| 当涂县| 山西省| 阿城市| 祁阳县| 武功县| 青龙|