chrome插件通讯模块transport
介绍
这个模块是用于谷歌浏览器插件content_script和background进行通讯的。
做过chrome插件的人应该都知道google通讯方式很多,下面这个模块使用的google长连接进行通讯。
通过监听不同的key来进行不同的调用,chrome插件使用起这个来就不用很繁琐。
模块地址:https://gitee.com/home-zy/cigarette_plugin_library/blob/master/GoogleExtensions/transport.js
模块使用
引入模块我就不说了吧,相信做过的人都知道。
下面来看一下content页面如何跟background进行通讯。
首先来看一下经典案例
//初始化监听
var info=transport.bg();
//监听key_test消息
info.add('key_test',function(obj){
console.log(obj)
//给content中的key_content发送信息
info.postMessage('key_content',"我是background页面")
})
在来看一下content页面吧
//初始化监听
var info=transport.cs();
//监听key_test消息
info.add('key_content',function(obj){
console.log(obj)
})
好了现在background和content都准备就绪了。
现在我们在content页面给background页面发送消息吧。
info.postMessage('key_test',"我是content页面,向你问好")
来我们一起看一下效果,先看一下content页面
下面是background页面接受到的消息
核心方法
相信通过上面的案例大家对于transport通讯模块有一个基础的了解了吧。
transport不管content还是background都有几个核心方法。
监听
info.add(key,callback)
删除监听
info.rm(key)
发送消息
info.postMessage(key,message)
相信大家应该都看出来了,transport模块核心通讯都是根据key来进行的。
那么又有个问题来了,如果同一个key绑定多个方法?
这在transport中是不允许的,一个key只能绑定一个方法,如果再次绑定则会替换掉之前的,始终执行最后绑定的方法。
在监听方法中有2个模块自动传入的参数,第一个参数当然就是message了,第二个参数则是port对象。
关于port对象大家可以去官网查看,这里提一下本模块对原生的postMessage进行的封装,若使用原生的postMessage可以使用port._postMessage。
在background页面发送消息时是向所有content页面发送,而不是单个发送,如需单个发送可以使用监听方法中的第二个参数port.postMessage(key,message)
。
info.add(key,(message,port)=>{
//向发送来的content发送消息
port.postMessage(key,message)
})
更新
最新版本已经实现了回调功能,如我在背景页监听
//初始化监听
var info=transport.cs();
//监听key_test消息
info.add('key_content',function(obj,port,callback){
console.log(obj,port)
callback("我是背景页");
})
那么在content页面发送
//初始化监听
var info=transport.cs();
//监听key_test消息
info.postMessage('key_content',"我是content页面",function(str){
console.log(str)
})
执行结果,在content页面会输出我是背景页
請問有維信嗎?df780919,想找你寫谷歌插件
加QQ464312406,就可以了
用chrome.runtime.sendMessage就可以了
谢谢分享,日常打卡~ 滴滴~