扩展页面间的通信

参考原文

知识点：

• runtime.sendMessage
• runtime.onMessage

---

Chrome 提供了 4 个有关扩展页面间相互通信的接口，分别是：

• runtime.sendMessage
• runtime.onMessage
• runtime.connect
• runtime.onConnect

做为一部入门级教程，此节将只讲解 runtime.sendMessage 和 runtime.onMessage 接口，runtime.connect 和 runtime.onConnect 做为更高级的接口请读者依据自己的兴趣自行学习，你可以在 http://developer.chrome.com/extensions/extension 得到有关这两个接口的完整官方文档。

请注意，Chrome 提供的大部分 API 是不支持在 content_scripts 中运行的，但 runtime.sendMessage 和 runtime.onMessage 可以在 content_scripts 中运行，所以扩展的其他页面也可以同 content_scripts 相互通信。

---

runtime.sendMessage 完整的方法为：

chrome.runtime.sendMessage(extensionId, message, options, callback)

参数说明：

• extensionId 为所发送消息的目标扩展，如果不指定这个值，则默认为发起此消息的扩展本身

• message 为要发送的内容，类型随意，内容随意，比如可以是 'Hello'，也可以是 {action: 'play'}、2013 和 ['Jim', 'Tom', 'Kate'] 等等

• options 为对象类型，包含一个值为布尔型的 includeTlsChannelId 属性，此属性的值决定扩展发起此消息时是否要将 TLS 通道 ID 发送给监听此消息的外部扩展（此属性仅在扩展和网页间通信时才会用到。），有关 TLS 的相关内容可以参考 http://www.google.com/intl/zh-CN/chrome/browser/privacy/whitepaper.html#tls，这是有关加强用户连接安全性的技术，如果这个参数你捉摸不透，不必理睬它，options是一个可选参数

• callback 是回调函数，用于接收返回结果，同样是一个可选参数。

---

runtime.onMessage完整的方法为：

chrome.runtime.onMessage.addListener(callback)

此处的 callback 为必选参数，为回调函数。callback 接收到的参数有三个，分别是 message、sender 和 sendResponse，即消息内容、消息发送者相关信息和相应函数。

其中 sender 对象包含4个属性，分别是 tab、id、url 和 tlsChannelId，tab 是发起消息的标签。

---

下面我们写一个小例子来说明。

编写 manifest.json 文件：

{
    "manifest_version": 2,
    "name": "扩展内部通信Demo",
    "version": "1.0",
    "description": "扩展内部通信Demo",
    
    "browser_action": {
        "default_popup": "popup.html"
    },

    "background": {
        "scripts": [
            "js/background.js"
        ]
    }
}

我们的 popup.html 不需写入任何内容，只需引入一段 JS：

编写 popup.js 文件：

// 发送消息，回调函数把接收到的回应写到网页中
chrome.runtime.sendMessage('Hello', function(response){
    document.write(response);
});

我们在 background 接收信息并处理，现在编写 background.js 文件：

// 接收消息，如果收到的消息是 'Hello'，发送回应
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse){
    if(message == 'Hello'){
        sendResponse('Hello from background.');
    }
});

最后插件的效果：