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