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页面会输出我是背景页