Question

我编写了一个Chrome扩展程序，它通过chrome.storage.sync.set/get...将用户输入保存到本地存储，并通过chrome.tabs.sendMessage将此数据发送到内容脚本，该脚本通过chrome.runtime.onMessage.addListener进行侦听。当用户每次单击鼠标并按下按钮打开扩展名时，将触发整个加载和发送进程。在此之前，内容脚本没有执行任务所需的数据并且正在等待。

具体要求/问题：

我希望本地存储数据在每次加载页面时自动加载（并发送到内容脚本），无需任何用户交互。
我必须实施哪些回调，或者我必须在哪里放置代码才能实现此目的？

整个代码看起来像这样（ Tag 和 Pass 是提到的用户数据）：

function clickHandler(e) {
    var tag = document.getElementById(DOM_TAG).value, pass = document.getElementById(DOM_PASS).value;
    // ...query for the active tab...
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {
            from: 'popup',
            subject: 'init',
            tag: tag,
            pass: pass
        });
    });
    // Save data to local storage.
    chrome.storage.sync.set({DOM_TAG: tag, DOM_PASS: pass}, function() {
        // Notify that we saved.
    });
}
// Once the DOM is ready...
window.addEventListener('DOMContentLoaded', function() {
    // Load data from local storage.
    chrome.storage.sync.get({DOM_TAG: 'defaultTag', DOM_PASS: 'defaultPass'}, function(items) {
        document.getElementById(DOM_TAG).value = items.DOM_TAG;
        document.getElementById(DOM_PASS).value = items.DOM_PASS;
    });
    document.querySelector('button').addEventListener('click', clickHandler);
});

我已经尝试过：

当然，我尝试在callback的{{1}}函数中启动该过程，但这不起作用，因为当用户通过单击手动打开扩展时，此事件才会被触发。那不是我想要的。

我还尝试将特定的代码行放入DOMContentLoaded，但没有成功。

Answer 1

您无需将数据从扩展程序传递到内容脚本。您可以直接在内容脚本中访问它。即：chrome.storage.local和chrome.storage.sync可用于内容脚本。

您的扩展程序的内容脚本可以直接访问用户数据，而无需后台页面。

storage docs

在每个页面上自动将本地存储数据从chrome扩展程序传递到内容脚本

具体要求/问题：

我已经尝试过：

1 个答案: