背景
Chrome 扩展程序是一种可以增强浏览器功能的小型程序。在扩展程序中，我们常常需要使用 popup 页面和 background 页面来分别实现用户交互和后台逻辑处理。
有时候，这两个页面之间需要进行通信，例如 popup 页面需要向 background 页面发送请求或获取数据，或者 background 页面需要主动向 popup 页面发送消息更新 UI 界面。那么，该如何在 popup.js 和 background.js 之间进行通信呢？
方案
在 Chrome 扩展程序中，popup 页面和 background 页面是两个不同的 HTML 页面，它们无法直接访问对方的 JavaScript 对象。因此，我们需要使用 Chrome Extension API 提供的消息传递机制来实现它们之间的通信。
具体来说，Chrome Extension API 提供了 chrome.runtime.sendMessage() 和 chrome.runtime.onMessage 两个函数，可以帮助我们在不同的页面之间发送和接收消息。其中，chrome.runtime.sendMessage() 函数用于向指定的页面发送消息，chrome.runtime.onMessage 函数用于监听来自其他页面的消息。
下面是一个简单的示例代码，演示如何在 popup.js 和 background.js 之间发送和接收消息：
-- - -------- ------ -------------
------------------------------------- --------- ------------------ -
-------------------------------
---
-- - ------------- ----- -------- ---
------------------------------------------------------ ------- ------------- -
-- ----------------- -- -------- -
----------------------- ------------
-
---在这个示例中，我们在 popup.js 中使用 chrome.runtime.sendMessage() 函数向 background.js 发送一条带有 "hello" 问候语的消息。同时，我们在 sendMessage() 函数中传递了一个回调函数，用于接收来自 background.js 的响应。
在 background.js 中，我们使用 chrome.runtime.onMessage 函数监听来自 popup.js 的消息，并根据消息内容进行相应的处理。在这个例子中，我们判断如果收到的是 "hello" 消息，则返回一个带有 "goodbye" 再见语的响应。
总结
通过使用 Chrome Extension API 提供的消息传递机制，我们可以在 popup.js 和 background.js 之间实现方便的通信。这种通信方式可以让我们更加灵活地控制扩展程序的交互和行为，提升用户体验和扩展程序的功能性。
当然，除了以上提到的简单通信方式之外，还有很多高级的通信技巧和方法，例如使用 Promise 对象、WebSocket 等。关于这些更深入的内容，读者可以进一步查阅相关文档和资料，深入学习和实践。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29932