本文根据 Opera 官方文档编写,介绍扩展中各脚本消息传递相关的内容。

消息传递有两种方式,一种是简单的通信,一种是高级的通信。

简短的通信

直接通过 runtime.sendMessage()tabs.sendMessage() 方法发送消息,通过用 runtime.onMessage() 方法接收消息。

后台脚本消息发送消息用 tabs.sendMessage(),内容脚本发送消息用 runtime.sendMessage()

一个简单的例子:

点击按钮发送消息给当前标签

chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.query({currentWindow: true, active: true}, function(tab) {//选择当前浏览的标签
       chrome.tabs.sendMessage(tab[0].id, {hi: 'hi,content'}); //发送消息
    });
});

内容脚本接收到消息,并发送消息给后台脚本

chrome.runtime.onMessage.addListener(//监听消息
    function (request, sender){
        alert(request.hi);        chrome.runtime.sendMessage({hello:'hello,background'});//发送消息
});

同样的方法,后台脚本接受消息

chrome.runtime.onMessage.addListener(//监听消息
    function (request, sender) {
        chrome.browserAction.setBadgeText({text: "ok"}); //在按钮徽章上显示ok
});

更高级的通信

首先需要用 runtime.connect()tabs.connect() 建立一个连接,和简单的通信一样,前者用于内容脚本,后者用于后台脚本。作为连接的另一方则需要通过 runtime.onConnect.addListener() 监听是否有连接被创建。

一个简单的例子

内容脚本建立连接

var port = chrome.runtime.connect({name: "敲门"});//建立连接
port.postMessage({joke: "敲门"});
port.onMessage.addListener(function(msg) {
  if (msg.question == "是谁?")
    port.postMessage({answer: "小白兔"});
  if (msg.question == "请进")
    port.postMessage({answer: "谢谢"});
});

后台脚本接受消息

chrome.runtime.onConnect.addListener(function(port) {//监听是否有连接
    port.onMessage.addListener(function(msg) {
      if (msg.joke == "敲门")
        port.postMessage({question: "是谁?"});
      else if (msg.answer == "小白兔")
        port.postMessage({question: "请进"});
    });
}

标签: 扩展

添加新评论