[Chrome扩展插件开发之通信方式 - 掘金](https://juejin.cn/post/6994731393263599653 )]
概述
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("收到响应");
})