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"?>

// 下面的参数是必须要添加的

// <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>

<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可以随便设置的

//申明要用到的.js文件

//申明要用到的属性多语言字符串

</stringbundleset>

//添加xul元素到firefox界面上

//相关xul元素特性请查看xul教程

//参考：http://developer.mozilla.org/en/XUL_Tutorial

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

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

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

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

</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