FF(Mozilla)扩展，与页面的交互
做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" 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