如何从 popup.js 实时更新 content.js？

从 popup.js 实时更新 content.js

问题概述

在扩展程序开发中，有时需要将值从弹出窗口（popup.js）传输到内容脚本（content.js）。然而，在某些情况下，content.js 无法实时接收弹出窗口中更新后的值。

解决方法

解决此问题的方法是使用 Chrome 存储事件监听器和触发 Chrome 存储事件：

1. 使用 Chrome 存储事件监听器：

   • 在 content.js 中添加一个 Chrome 存储事件监听器，侦听特定键的更改。
   • 当检测到更改时，使用新的值更新 content.js 中的内容。

2. 触发 Chrome 存储事件：

   • 在 popup.js 中，在更新键值后触发 Chrome 存储事件。
   • 这将通知 content.js 发生了更改，触发事件处理程序并更新内容。

详细步骤

popup.js：

1. 使用 chrome.storage.sync.set() 设置键值。
2. 设置后，使用 chrome.storage.sync.set() 触发 Chrome 存储事件（将键值设置为 null）。

content.js：

1. 添加 chrome.storage.onChanged 监听器，侦听键值的更改。
2. 在事件处理程序中，如果检测到键值更改，则使用新值更新内容。

代码示例

popup.js：

button.addEventListener('click', () => {
    chrome.storage.sync.set({ 
      text: form.textContent
    }, () => {
        chrome.storage.sync.set({ text: null });
    });
});

content.js：

chrome.storage.onChanged.addListener(function(changes, namespace) {
    for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
        if (key === "text") {
            pageText.textContent = newValue;
        }
    }
});

总结

通过使用 Chrome 存储事件监听器和触发 Chrome 存储事件，你可以实现从 popup.js 中的值的实时传输到 content.js。这种方法允许你将弹出窗口中的更改立即反映在扩展程序的内容脚本中。

常见问题解答

1. 为什么使用 Chrome 存储事件监听器？

   • Chrome 存储事件监听器允许你侦听 Chrome 存储中的特定键的更改，从而在发生更改时立即采取行动。

2. 为什么要触发 Chrome 存储事件？

   • 触发 Chrome 存储事件会通知 content.js 发生了更改，从而触发事件处理程序并更新内容。

3. 这种方法是否有任何限制？

   • 这需要 popup.js 和 content.js 都可以访问 Chrome 存储 API。

4. 如何处理多重更新？

   • 事件处理程序将依次接收每个更新。你可以使用一个队列来处理并发更新。

5. 如何确保性能？

   • 只侦听你感兴趣的键的更改，并尽可能在事件处理程序中执行轻量级操作。