如何实现popup.js修改chrome.storage后实时同步到content.js

问题根源：你的content.js仅在getInterval调用时读取存储值，没有监听存储变化或接收popup的主动更新通知，所以只有刷新页面才会重新读取。下面提供两种可行的实时同步方案：

方案一：监听chrome.storage变化（多标签页自动同步） #

利用Chrome扩展的chrome.storage.onChanged事件，让content脚本自动感知存储值的变化并更新。

修改后的content.js代码：

// 页面加载时初始化获取值
function getInterval() {
    chrome.storage.sync.get(["text"]).then((result) => {
        pageText.textContent = result.text;
    });
}
getInterval();

// 监听存储变化，实时更新内容
chrome.storage.onChanged.addListener((changes, namespace) => {
    // 只处理sync空间下的text字段变化
    if (namespace === 'sync' && changes.text) {
        pageText.textContent = changes.text.newValue;
    }
});

popup.js无需额外修改（你的现有代码已经能正确修改存储）。这种方法的优势是：只要存储值改变，所有已加载该扩展content脚本的标签页都会自动更新。

方案二：popup主动发送消息通知当前标签页 #

在popup修改存储后，直接向当前活跃标签页的content脚本发送消息，触发更新操作。

修改后的popup.js： #

button.addEventListener('click', async () => {
    // 先更新存储
    await chrome.storage.sync.set({ 
        text: form.textContent
    });
    // 获取当前活跃标签页
    const [activeTab] = await chrome.tabs.query({active: true, currentWindow: true});
    // 向content脚本发送更新消息
    if (activeTab.id) {
        chrome.tabs.sendMessage(activeTab.id, {
            action: 'updateText',
            text: form.textContent
        });
    }
    // 更新popup自身的显示
    const result = await chrome.storage.sync.get(["text"]);
    pageText.textContent = result.text;
});

// 初始化popup显示存储值
chrome.storage.sync.get(["text"]).then((result) => {
    pageText.textContent = result.text;
});

对应的content.js： #

// 页面加载时初始化获取值
function getInterval() {
    chrome.storage.sync.get(["text"]).then((result) => {
        pageText.textContent = result.text;
    });
}
getInterval();

// 监听popup发来的消息，实时更新
chrome.runtime.onMessage.addListener((request) => {
    if (request.action === 'updateText') {
        pageText.textContent = request.text;
    }
});

这种方法更直接，仅通知当前操作的标签页更新，适合不需要多标签同步的场景。

内容的提问来源于stack exchange，提问作者T02my