主页 > 知识库 > firefox 扩展开发技巧

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

标签:日照 山南 防城港 定州 宜宾 内蒙古 巴彦淖尔 96

巨人网络通讯声明:本文标题《firefox 扩展开发技巧》,本文关键词  firefox,扩展,开发,技巧,firefox,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《firefox 扩展开发技巧》相关的同类信息!
  • 本页收集关于firefox 扩展开发技巧的相关信息资讯供网民参考!
  • 推荐文章