关于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();
}
}

chrome浏览器扩展的事件处理的更多相关文章

  1. Chrome浏览器扩展开发系列之十七:扩展中可用的chrome.events API

    chrome.events中定义了一些常见的事件类型,可以供Chrome浏览器扩展程序发出对应的事件对象. 对于关注的事件,首先要通过addListener()在对应的事件上注册监听器,示例如下: c ...

  2. 哇塞,原来自己写 Google Chrome 浏览器扩展(插件)这么容易!

    1. 首先新建一个记事本,命名为 manifest.json,这是写 Google Chrome 浏览器扩展必须的文件 { "manifest_version": 2, " ...

  3. Chrome浏览器扩展开发系列之十四

    Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 时间:2015-10-08 16:17:59      阅读:1361      评论:0      收藏:0    ...

  4. chrome浏览器扩展--QQ群查看器(1)

    QQ群查看器--chrome浏览器扩展 源码及程序下载地址:http://pan.baidu.com/share/link?shareid=3636190804&uk=1678089569 关 ...

  5. Chrome浏览器扩展开发系列之十九:扩展开发示例

    翻译总结了这么多的官网内容,下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例,介绍Chrome浏览器扩展程序的开发,开发环境为Eclipse IDE+Chrome Browser. “沪深 ...

  6. Chrome浏览器扩展开发系列之十八:扩展的软件国际化chrome.i18n API

    i18n是internationalization 的简写,这里将讨论软件国际化的问题.熟悉软件国际化的朋友应该知道,软件国际化要求,页面中所有用户可见的字符串都必须置于资源属性文件中.资源属性文件中 ...

  7. Chrome浏览器扩展开发系列之十六:扩展中可用的Chrome浏览器API

    除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...

  8. Chrome浏览器扩展开发系列之十五:跨域访问的XMLHttpRequest对象

    XMLHttpRequest对象是W3C的标准API,用于访问服务器资源.XMLHttpRequest对象支持多种文本格式,如XML和JSON等.XMLHttpRequest对象可以通过HTTP和HT ...

  9. Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging

    通过将浏览器所在客户端的本地应用注册为Chrome浏览器扩展的“本地消息主机(native messaging host)”,Chrome浏览器扩展还可以与客户端本地应用之间收发消息. 客户端的本地应 ...

随机推荐

  1. Cadence学习之——多部分元件原理图封装的画法

    在这里以NE5532为例 1.打开新建元件的属性设置框 (1)这里的Package per Pkg设置框就是用来设置元件共有几个部分的. (2)Package Type有两个选项Homogeneous ...

  2. IOS设计模式第一篇之MVC

    设计模式的好处:我们可以写出容易理解,重用度很高的代码.降低代码的耦合度,符合软件工程的思想. 设计模式主要分为三类:创造型的:单例和抽象工厂.结构类型的: MVC  Decorator, Adapt ...

  3. AsyncTask的缺陷以及解决方法

    1.AsyncTask常用于进行耗时操作,完成后更新主线程的UI. 2.缺陷:AsyncTask中维护着一个长度为128的线程池,同时可以执行5个工作线程,还有一个缓冲队列,当线程池中已有128个线程 ...

  4. redis在windows中的安装

    之前介绍过了redis的相关知识,以及在linux平台上安装redis,为了方便学习,这里记录一下redis在windows平台上的安装步骤 1.下载redis下载地址https://github.c ...

  5. LeetCode(五)

    Minimum Depth of Binary Tree public class Solution { public int minDepth(TreeNode root) { if(root==n ...

  6. Odoo10 变化

    官方在 https://www.odoo.com/forum/help-1/question/fyi-what-has-odoo-r-d-been-working-on-lately-106945 发 ...

  7. VS2010中使用GDAL(一)

    初次使用visual studio 对工具不熟悉,有些步骤可以配置的 (1)在VS2005中新建win32控制台程序 testGDALconsole,(向导中附加选项不能选为空项目) 将C:\GDAL ...

  8. Java入门1dayCode

    public class HelloWorld { /* * 多行注释方式 * main()方法: java语言的入口方法(函数) */ public static void main(String[ ...

  9. module中build.gradle文件参数含义

    主要是module的build.gradle,截图如下: 01行:apply plugin: 'com.android.application'    表示该module是这个应用程序的module ...

  10. onSaveInstanceState & onRestoreInstanceState

    一.onSaveInstanceState Called to retrieve per-instance state from an activity before being killed so ...