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

[Chrome扩展插件开发之通信方式 - 掘金](https://juejin.cn/post/6994731393263599653 )]

概述

Chrome扩展插件涉及到部分可以分为web页面、popupbackgroundcontent-script四个部分,其中web页面不属于插件的内容,但有些时候页面存在需要与插件交互的场景,因此这里把页面与插件之间的通信也一并讨论。

需要注意的是,popupbackground都是运行在插件上下文中,而content-script则是运行在web页面的上下文中的。因此,在这里我把扩展插件的通信分为以下几种情景:

  • 插件内部脚本的通信:popupbackground之间的通信;
  • web页面与content-script的通信;
  • 插件内部脚本与content-script之间的通信。

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

popupbackground通信

由于两者运行在同一上下文中,理论上,只要得到了对方的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.addEventListenerwindow.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("收到响应");
})
上一篇:Jeecg-boot中的popup弹窗增加模糊搜索


下一篇:Uniapp uni-datetime-picker的日历和时间不兼容H5