chrome浏览器扩展的事件处理

关于chrome扩展开发的栗子已经有很多了，问问度娘基本能满足你的欲望， 我想说的是扩展和页面间的数据传递问题。

我们知道写扩展有个必须的文件就是“manifest.json”， 这个里面定义了一个和页面打交道的文件“content.js”， 该js可以访问页面中的任何元素；但不幸的是页面却无法访问content.js中的任何方法（写扩展页面的除外啊，我说的页面是浏览器中的普通页面）。那么问题就来了：怎么才能触发content.js中的事件呢？

官方当然给出解决方案：content.js中写按钮的监听事件，比如一般button的click事件

 //bt1 是页面按钮id
 document.getElementById('bt1')..addEventListener(“click”,function(){
     //做一些自己的事情，和background.js打交道等等
 },false);

这么做当然没有问题。

但是……

如果页面中没有bt1按钮呢 ？

如果我不知道是哪个按钮调用的呢 ？

或者说，content.js中有一个方法，需要页面上随时可以调用 。。。。

解决办法就是，页面添加一个固定的按钮就叫bt1，其他的都不能叫这个名字，content.js这样就可以绑定事件了， 谁用谁调用一下bt1的click事件。

其实还有个解决办法：自定义事件 ， 看代码

 //页面中定义一个事件
 //name 事件名称，msg传递的消息值
  createCustomEvent:function(name,msg){
             var evt = document.createEvent("CustomEvent");
             evt.initCustomEvent(name, true, false, msg);
             document.dispatchEvent(evt);
 },

content.js写一个事件监听

 //content.js中的监听方法
 //name要和页面name相同
 //evt 就是得到的结果
 document.addEventListener(name, function(evt) {
    var data =evt.detail;  //data就是上面的msg值

    //todo

 }

这样整个流程就通了，页面随时可以创建一个事件来调用扩展方法。

不过明白人已经看出来了，返回值呢？ 是的，该方法只能传递值却不能得到结果，并且msg只能传递字符串，也没法定义回调。如果想得到返回值只能再content.js中也定义一个自定义事件，页面做监听，反过来使用上面的代码。（感觉很矬……）

这还没有完， 该方案不支持并发。当有两个地方同时调用该方法时，页面监听事件无法区分那个的返回值，得到的结果根本无法使用。

怎么办呢？ 我又想到一个更矬的办法来，调用的时候传递一个回调，然后保存起来。

说不明白，看代码吧。页面代码

 var  sendMessage=function(msg,callback){
     //获取一个自增序列当key，页面唯一
     var key=getIndex();
     //保存到hashtable里面，evtMap是个自定义hashtable
     evtMap.add(key,callback);
     //'调用自定义事件，把key带上
      createCustomEvent(eventName,{"evtId":key,"msg":msg});

    }

content.js可以得到这个key，回调的时候再把这个可以传过来，看看content.js

 document.addEventListener(listenerName, function(evt) {

     var data =evt.detail;
     //todo 得到msg

     var res={"evtId":data.evtId,"msg":msg }; //把页面传递的key再传回去

     var evt = document.createEvent("CustomEvent");
     evt.initCustomEvent(backEventName, true, false, res);
     document.dispatchEvent(evt);

 }, false);

再回到页面js代码

     document.addListener(listenerName,function(response){
        //通过key从hasttable中再次获取callback函数
     var evtId=response.evtId;
     var callback=evtMap.getValue(evtId);
     if (callback) {
         callback(response.msg);
     };
     });

上面就是一种比较矬的解决扩展和页面数据交互的一种方案，如果哪位高手有更好的方案不舍赐教～！！ 感谢

下面把JS的Hashtable贴一下，其实度娘怀里就有

  var HashTable=function(){
        var size = 0;
        var entry = new Object();

        this.add = function (key,value){
            if(!this.containsKey(key)){
                size ++ ;
            }
            entry[key] = value;
        }
        this.getValue = function (key) {
            return this.containsKey(key) ? entry[key] : null;
        }
        this.remove = function(key){
            if( this.containsKey(key) && ( delete entry[key] ) ) {
                size --;
            }
        }
        this.containsKey = function(key){
            return (key in entry);
        }
        this.containsValue = function(value){
            for(var prop in entry) {
                if(entry[prop] == value){
                    return true;
                }
            }
            return false;
        }
        this.getValues = function () {
            var values = new Array();
            for(var prop in entry) {
                values.push(entry[prop]);
            }
            return values;
        }
        this.getKeys = function () {
            var keys = new Array();
            for(var prop in entry) {
                keys.push(prop);
            }
            return keys;
        }
        this.getSize = function () {
            return size;
        }
        this.clear = function () {
            size = 0;
            entry = new Object();
        }
    }