• FF扩展,与页面的交互。


    做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里的toolbarID,如果不起这个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);
        }
    }

    在页面上的: 

     代码

    1 var myExtension = {
    2     handlerEvt:function(e){
    3         alert("FF_Name:"+e.target.getAttribute("FF_Name")+"\r\n 描述:"+e.target.getAttribute("desc"));
    4     }};
    5 
    6     document.addEventListener("MyCustomEvt",function(e){myExtension.handlerEvt(e);},false,true);  

     不过我们得先打开页面,好让触发事件的监听功能,然后再去触发FF extension里的创建事件的FUN吧。

     最后给个安装包吧,可以解压出来看下源代码。不过写得有点乱。

    /Files/SeaSun/FF.rar 

  • 相关阅读:
    1600802101
    Android第二次作业
    android 第一次作业
    团队作业—项目答辩
    软件工程—团队作业2.2
    软件工程—团队作业2
    软件工程—团队作业1
    第一篇博客
    Android第四次作业
    作业3
  • 原文地址:https://www.cnblogs.com/SeaSun/p/FF_extension_page.html
Copyright © 2020-2023  润新知