Opera 扩展包括有“后台脚本”、“注入脚本”、“弹窗脚本”等,所谓“消息”,各脚本间的数据传递就是通过消息实现的。

Opera 扩展发送消息的方式有3种,postMessage()/broadcastMessage()/消息通道。

例如在后台脚本和注入脚本之间传递数据:

可以使用 broadcastMessage() 来发送消息。你可以在后台脚本中这样写:

opera.extension.broadcastMessage("Hello there");

注入脚本需要接收消息,像这样:

var thecatch;
opera.extension.onmessage = function(event){
thecatch = event.data; // event.data 在这个实例中将包含字符串 "Hello there"
}

需要注意的是,broadcastMessage() 方法会将消息发送到所有的注入脚本,例如你让注入脚本改变网页的字体,那么浏览器所有包含注入脚本的标签页都会改变。如果想只对一个注入脚本发消息应该使用 postMessage() 或者“消息通道”。

在后台脚本和弹窗脚本之间传递数据:

后台脚本和弹窗脚本之间传递实际上和后台脚本和注入脚本之间传递数据是一样的。

在注入脚本和弹窗脚本之间传递数据:

注入脚本和弹窗脚本无法直接传递数据,而需要一个专有的“消息通道(MessageChannel)”来通信,这个消息通道是由注入脚本建立的,并且需要后台脚本把这个消息通道告诉给弹窗脚本,然后弹窗脚本就能和注入脚本通过这个消息通道直接通信了。

过程是这样:

1.注入脚本发消息给后台脚本

2.后台脚本发消息给弹窗脚本

3.弹窗脚本和注入脚本建立连接,可直接传递数据了

首先,我们有一个叫 port 的全局变量,晚些的时候会用到.让我们看到 onconnect 事件这里:

opera.extension.onconnect = function( event ){
if( port )
event.source.postMessage( "响应通道", [port] );
}

详细过程:

注入脚本载入时创建一个新的消息通道.一个消息通道将包含两个端口来收发消息.在这里,我们确保确保第2个端口发送数据,第1个端口收数据.然后我们使用postMessage()通过这个消息通道发送给后台脚本

var channel = new MessageChannel();
opera.extension.postMessage( "我通过这个消息通道发消息", [channel.port2] );

这时,后台脚本接收到了注入脚本的消息–注入脚的消息通道,存储到变量 port 中

opera.extension.onmessage = function( event ) {
if (event.ports)
port = event.ports[0];
}

当弹窗脚本载入后,后台脚本给它发送消息:

opera.extension.onconnect = function( event ){
if( port ){
event.source.postMessage( "Respond to the port", [port] );
}
}

然而,这次,port变量的值不在是空的.它包含了注入脚本第2个通道的引用。

这时弹窗脚本接受到了后台脚本的消息–注入脚本的消息通道。所以可以通过消息通道给注入脚本发消息了:

opera.extension.onmessage = function( event ){
if( event.ports ){
event.ports[0].postMessage( "Hi from popups side!" );
}
}

同时,注入脚本也可以通过这个通道接受后台脚本的消息了:

channel.port1.onmessage = function( event ){
opera.postError("Here is what i got in the injected script for port1: " + event.data);
}

这里,注入脚本监听消息通道的port1端口.当接收到消息的时候,那么发送一个包含了来自弹窗脚本消息的句子到错误控制台.

概述,下列的事情发生了:

注入脚本载入

在后台脚本中, onconnect 事件被触发,发送消息到注入脚本

注入脚本收到消息然后设置一个消息通道

注入脚本使用第2个端口发送消息到后台脚本

后台脚本监听消息,但更重要的是保存这个端口的引用

现在弹窗脚本连接后台脚本

后台脚本中的onconnect的事件再次被触发,这次使用从注入脚本接收消息的端口发送消息.

弹窗端口监听消息,检查消息是否有一个端口的引用(是否是通过端口发送过来的).如果是,发送自己的消息到这个端口(这个端口是消息通道的 port2)

注入脚本的消息通道监听消息!将收到的消息写入到错误控制台.

在这种情况下,后台脚本就是媒人,首先媒人找到第一个人(注入脚本).第一个人给出他的编号(第2个端口)给媒人,媒人记下这个.然后另外一个人(弹窗脚本)联系到媒人:媒人立刻发送第一个人(注入脚本)的编号给第2个人(弹窗脚本).现在两个人可以直接进行那个更详细的交谈了.而不需要媒人(后台脚本)了.

标签:,