firefox 扩展开发技巧

程序员文章站 2022-04-26 22:03:49

firefox extension参考：http://developer.mozilla.org/en/extensions 目录结构： chrome.mainfes...

firefox extension
参考：http://developer.mozilla.org/en/extensions

目录结构：
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="#" xmlns:em="#">
<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="">

    //申明要用到的.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

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

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

上一篇： Firebug 1.2 技巧手册

下一篇： SEO优化和竞价哪一个行业薪资更高前途更好?

firefox 扩展开发技巧

Java开发工具Eclipse使用技巧全局搜索和更替

MySQL开发规范与使用技巧总结

Android编程开发之性能优化技巧总结

火狐浏览器firefox42不能安装未注册扩展程序

php开发文档怎么写（php扩展开发参考手册）

十款提高开发效率的Firefox插件图文教程

python编程开发之textwrap文本样式处理技巧

Android开发技巧之ViewStub控件惰性装载

Android开发技巧之像QQ一样输入文字和表情图像

Android开发技巧之在a标签或TextView控件中单击链接弹出Activity(自定义动作)