如果你正在开发一个 chrome 扩展程序，你可能需要浏览器操作、后台脚本和内容脚本之间进行通信。这篇文章将介绍在 chrome 扩展程序中实现这种通信的不同上下文和方法，并提供一些示例代码。
上下文
在 chrome 扩展中，有三个主要的上下文：
- 浏览器操作：在浏览器窗口的右上角出现的小图标，用户可以点击该图标来打开扩展的弹出窗口。
- 后台脚本：在后台运行的脚本，可以让扩展在浏览器关闭时一直保持运行状态。
- 内容脚本：注入到网页中的脚本，可以修改页面的 DOM 或者与页面交互。
这三个上下文之间的通信可以通过以下几种方法来实现。
方法
1. Message Passing
消息传递是 chrome 扩展中最常用的通信机制。它允许不同上下文之间发送和接收信息。
1.1 发送消息
要向其他上下文发送消息，使用 chrome.runtime.sendMessage() 函数。例如，在浏览器操作中发送消息：
chrome.runtime.sendMessage({ greeting: "hello" });要在后台脚本中发送消息：
chrome.runtime.sendMessage({ greeting: "hello" }, function(response) {
console.log(response.farewell);
});1.2 接收消息
要接收消息，需要在目标上下文中监听 chrome.runtime.onMessage 事件。例如，在内容脚本中监听事件：
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.greeting === "hello") {
sendResponse({ farewell: "goodbye" });
}
});2. 使用 chrome.storage
chrome.storage API 允许开发者在不同上下文之间存储和读取数据。
2.1 存储数据
要在浏览器操作或后台脚本中存储数据，使用 chrome.storage.sync.set() 函数。例如：
chrome.storage.sync.set({ key: value }, function() {
console.log("Data saved");
});2.2 读取数据
要在内容脚本中读取数据，使用 chrome.storage.sync.get() 函数。例如：
chrome.storage.sync.get(["key"], function(result) {
console.log(result.key);
});3. 使用 Custom Events
Custom Events 允许开发者在不同上下文之间发送和接收自定义事件。
3.1 发送事件
要在浏览器操作或后台脚本中发送事件，使用 dispatchEvent() 函数。例如：
var event = new CustomEvent("myEvent", { detail: { data: "hello" } });
document.dispatchEvent(event);3.2 接收事件
要在内容脚本中接收事件，使用 addEventListener() 函数。例如：
document.addEventListener("myEvent", function(event) {
console.log(event.detail.data);
});结论
在 chrome 扩展程序中，不同上下文之间的通信可以通过消息传递、chrome.storage 和 Custom Events 等方式实现。开发者应该根据具体场景选择适当的方法来实现通信。
以上是本篇文章的全部内容，希望能对正在开发 chrome 扩展程序的读者提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31034