做FF的扩展,有时候避免不了与页面做些交互。其实FF与页面的交互利用的是事件的机制。
原理大概是这样,如果我想从页面传一值给FF的extension。
1.在extension里监听一个事件,(这事件是我们自定义的)。
在页面上该怎么做呢?既然有监听,当然也有创建咯。
对了,就是在页面上创建自定义的事件。
2.不过创建事件之前也先创建一个自定义的元素,放到documentElement里去。
3.然后给这个元素添加一些属性,注意:这里属性就是要传的值。
4;接着创建事件,初始化后再把元素里的属性分配到事件里 。OK,这样当监听到这个事件就可以获取事件的对象,那么这个事件的所有信息也可以获取到了。
如果想从FF传值给页面。那就反过来呗~~
现在我就简单地示范一下:
我们先来做一个怎么将一些值从页面传给FF扩展。
以下是一个页面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function getFFproms(e)
{
alert(e.target.id);
}
function createElm()
{
var elm = document.createElement("MyExtensionElm");//创建自定义元素。
elm.setAttribute("name","seasun");//设置属性
elm.setAttribute("age",24);
document.documentElement.appendChild(elm);//放进到DOM里去
var evt = document.createEvent("Events");//创建事件,Events表示事件类型
evt.initEvent("MyExtensionEvent",true,false);//初始化事件。自定义事件名,true表示事件冒泡,false表示不可以利用preventDefault()取消事件。
elm.dispatchEvent(evt);//分派属性到事件里去。
}
</script>
</HEAD>
<BODY>
<button id="btGetProm" onClick="createElm()" >给FF Extension传值</button>
</BODY>
</HTML>
接着我们到xul文件(扩展的UI文件)里去监听 MyExtensionEvent这个事件。(其实是要先监听,再创建事件的。)
<?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="chrome://sample/content/sample.js"></script>
<script type="application/x-javascript">
var myExtension = {
myListener: function(evt) {
alert("从页面传过来的参数 " +
evt.target.getAttribute("attribute1") + "/" +
evt.target.getAttribute("attribute2")+"\r\n"+evt.target.getAttribute("name")+"\r\n"+evt.target.getAttribute("age"));
}
}
document.addEventListener("MyExtensionEvent", function(e) { myExtension.myListener(e); }, false, true);
//第三个为false表示事件冒泡,为true表示捕获
//第四个参数为true表示接受不安全的代码
</script>
<toolbox id="navigator-toolbox">
<toolbar id="FaceBrew-Toolbar" toolbarname="FaceBrew Toolbar" accesskey="F"
class="chromeclass-toolbar" context="toolbar-context-menu" hidden="false" persist="hidden">
<toolbaritem flex="0">
<toolbarbutton id="FaceBrew-Web-Button" tooltiptext="" label="Run"
oncommand="FaceBrew_rtlSelection()"/>
</toolbaritem>
</toolbar>
</toolbox>
</overlay>
看script里的代码就行了,不过这里既然写了出来,我就顺便说下:
<toolbox id="navigator-toolbox">
这个ID
并不是随便起的,这个可是
browser.xul
里的
toolbar
的
ID,
如果不起这个
ID
的话,那么我们在自己的
XUL
里写的
UI
就不会出现在浏览器的顶部,而是在最底。有兴趣的同志可以试下。
然后重启FF
,在
FF
里打开刚才的页面,按下
button
,就会弹出一个对话框,这个是由
XUL
里触发的。
这个就是页面给extension传值的办法了。
反过来呢,一样,不过我们在FF里做创建事件的时候,注意得给每个浏览器标签加,一个浏览器可以打开多个标签。
给段部分的代码:
function toDataForPage()
{
var browser_count = gBrowser.browsers.length;
for(var i =0;i<browser_count;i++)
{
var cur_browser = gBrowser.getBrowserAtIndex(i);
var elm = cur_browser.contentDocument.createElement("MyCustomElm");
elm.setAttribute("FF_Name","ffseasun");
elm.setAttribute("desc","extensions 初学者");
cur_browser.contentDocument.documentElement.appendChild(elm);
var evt = cur_browser.contentDocument.createEvent("Events");
evt.initEvent("MyCustomEvt",true,false);//true表示事件可以冒泡,false表示不可以用 preventDefault() 方法取消事件。
elm.dispatchEvent(evt);
}
}
在页面上的:
var myExtension = {
handlerEvt:function(e){
alert("FF_Name:"+e.target.getAttribute("FF_Name")+"\r\n 描述:"+e.target.getAttribute("desc"));
}};
document.addEventListener("MyCustomEvt",function(e){myExtension.handlerEvt(e);},false,true);
不过我们得先打开页面,好让触发事件的监听功能,然后再去触发FF extension里的创建事件的FUN吧。
最后给个安装包吧,可以解压出来看下源代码。不过写得有点乱。
/Files/SeaSun/FF.rar
分享到:
相关推荐
一个Firefox扩展插件,主要实现开启FF后,自动登陆某网站,并完成相关的操作,可以自动设置登陆网站账号密码。通过本系统可以方便修改为登陆其他网站,执行其他相关操作,比如登陆某火车票网站,自动抓取特定的火车...
LiveHTTPHeaders的官方网站是https://addons.mozilla.org/zh-CN/firefox/addon/live-http-headers/ TamperData的官方网站是https://addons.mozilla.org/zh-cn/firefox/addon/tamper-data/versions/ firebug的官方...
产品需求文档、需求结构图、数据字典、全局说明、用例描述、逻辑流程、页面交互、登录注册、词汇表、数据统计、用户表设计、接口需求、功能清单、业务流程图、Axure原型、prd、产品需求文档实例 Axure原型演示地址...
Mozilla Firefox(正式缩写为 Fx,非正式缩写为FF),俗称火狐(目前无官方中文名),是由Mozilla基金会与开源团体共同开发的网页浏览器。Firefox是从Mozilla Application Suite派生出来的网页浏览器,从2005年开始...
FF14 ACT一键整合 安装包 ff14插件集辅助
2.“镭拓FF原心跳灯固件201506”修复早期个别FF鼠标底盘DPI拨码开关1600DPI与800DPI档位无法正常切换的问题。 3.“镭拓FF呼吸灯固件151125”可将LOGO灯切换成呼吸模式。 4.两个固件等级相同,可按自己选择无限刷新。
Ford folcerson algotitm
HF3FF与HF3FD系列 5脚 单刀双掷继电器封装及其应用说明-HF3FF_D.rar
IE与FF的兼容问题 IE浏览器和火狐浏览器兼容问题——CSS篇 IE浏览器和Firefox(火狐)浏览器兼容性——Javascript篇
英飞凌 IGBT FF300R12KT4中文资料 英飞凌 IGBT FF300R12KT4中文资料
ffftp 免费 下载 ffftp 免费 下载
CSS样式表下FF与IE的区别,可以做出在IE和FF里显示一样的网页
ff14插件,加载MOD,修改MOD制作MOD
ff缓存查看器 mozillacacheview
工具软件生成固定大小bin文件,填充FF,自己备份
与asp js交互数据实现 ------------------------------ import fl.controls.Button; import fl.core.UIComponent; var TF : TextFormat = new TextFormat(); TF.size = 16; TF.color = 0x0000ff; key.setStyle(...
简单的FF14游戏市场爬虫,并存入资料库内
PA FF 中文协议
你可以随心所欲地控制你页面的任何部分的内容被复制。---- javascrpt