Chrome扩展插件开发之通讯方式

Chrome扩展插件开发之通讯方式

概述

Chrome扩展插件涉及到部分能够分为web页面、popup、background、content-script四个部分，其中web页面不属于插件的内容，但有些时候页面存在须要与插件交互的场景，所以这里把页面与插件之间的通讯也一并讨论。

须要注意的是，popup和background都是运行在插件上下文中，而content-script则是运行在web页面的上下文中的。所以，在这里我把扩展插件的通讯分为如下几种情景：

• 插件内部脚本的通讯：popup和background之间的通讯；
• web页面与content-script的通讯；
• 插件内部脚本与content-script之间的通讯。

下面对以上几种情景进行详细描述。

popup与background通讯

因为二者运行在同一上下文中，理论上，只要获得了对方的window对象，即可以随意互相访问，所以对于这二者之间的通讯，直接事例演示~

background.js

var popup = chrome.extension.getViews({ type: "popup" })[0]
// 随心所欲
popup.GetMessageFromBackground("给个人兄弟popup点东西~")
​
function GetMessageFromPopup(data){
    console.log("popup给个人东西~",data)
}
复制代码

popup.js

var background = chrome.extension.getBackgroundPage(); // 获得background页的windows对象
// 接下来随心所欲~
background.GetMessageFromPopup("给个人兄弟background点东西")
​
function GetMessageFromBackground(data){
    console.log("background给个人东西~",data)
}
复制代码

web页面与content-script通讯

这两兄弟之间的通讯也比较简单，经过window.addEventListener和window.postMessage便可完成，给上示例

// 接收端
window.addEventListener("message",function(ev){
    console.log(ev.data)
})
​
// 发送端
window.postMessage(data,"*")
复制代码

插件内部脚本与content-script通讯

这二者之间的通讯则是经过chrome提供的api chrome.runtime.sendMessage\chrome.runtime.onMessage.addListener进行，二者之间能够互相接发消息，但须要注意的是，当前者向后者发送消息时，是经过chrome.tabs.sendMessage这个api，示例以下：

接收端

chrome.runtime.onMessage.addListener(function (msg, sender, response) {
  console.log(msg, sender);
  response();
});
复制代码

content-script向插件内部脚本发送

chrome.runtime.sendMessage("data", function () {
  console.log("收到响应");
});
复制代码

插件内部脚本向content-script发送

chrome.tabs.sendMessage(tabId, "data", function () {
    console.log("收到响应");
})
复制代码