首页 > 其他分享> > Chrome扩展插件开发之通信方式

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

2021-11-11 11:33:00 作者：互联网

[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("收到响应");
})

标签：插件,popup,script,Chrome,扩展,content,chrome,background
来源： https://www.cnblogs.com/ministep/p/15539033.html

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