Chrome 扩展程序：如何将数据从面板窗口发送到弹出窗口？

Question

我正在开发 Chrome 扩展程序，单击扩展程序图标会弹出一个窗口（@98​​7654321@），其中包含视频播放按钮。单击该按钮会打开另一个按钮，该按钮是使用window.create 类型的panel 创建的。单击popup.html 上的播放按钮后，会执行以下操作：

• 启用 DIV
• 通过调用名为mypanel.html 的window.create 创建新窗口。它使用panel.js 进行ajax 调用和DOM 更改功能。
• 进行 Ajax 调用、获取数据并播放视频

现在，我通过 panel.js 中的 AJAX 调用获得的数据。我想将该数据发送回pop.html，它本身正在使用文件popup.js。 如何将面板窗口中的数据发送回弹出窗口？

Answer 1

扩展部分之间通信的标准方法在Messaging documentation 中进行了描述。

但是，您需要记住，一旦弹出窗口关闭，它就会被卸载，并且 JavaScript 上下文也会随之销毁。所以它在关闭时无法接收消息，并且在重新打开时会丢失所有状态。

有两种解决方案：

1. 您可以使用background page 来保持状态（如果设置为持久）并在扩展的各个部分之间路由消息，例如弹出窗口可以在打开时请求当前状态。 这是一个老式的解决方案。

2. 如果您只需要传递/保留一些数据，您可以轻松地使用chrome.storage.local 来完成它。您可以使用panel.js 保存数据并使用chrome.storage.onChanged event 对更改做出反应。额外的好处是，当弹出窗口重新打开时，它可以简单地读取存储来构建其初始状态。