每次页面加载时自动将本地存储数据从chrome扩展名传递到内容脚本

Question

I wrote an chrome extension, which saves user input to the local storage via chrome.storage.sync.set/get... and sends this data via chrome.tabs.sendMessage to a content script, which listens via chrome.runtime.onMessage.addListener . This whole load and send process is triggered, when the user opens the extension per mouse click and presses a button. Before this happens the content script has not the needed data to do its task and is waiting.

Concrete requirements / questions:

• I want, that the local storage data gets loaded (and sent to the content script) automatically on every page load without any user interaction needed.

• Which callback do I have to implement or where do I have to put my code in order to achieve this?

The whole code looks like this ( Tag and Pass are the mentioned user data):

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);
});

What I already tried:

Of course I tried to start the process inside the callback function for DOMContentLoaded , but that is not working since this event only gets fired when the user manually opens the extensions by clicking on it. Thats not what I want.

I also tried to put the specific lines of code into a BackgroundScript , with no success.

Answer 1

You do not need to pass data from extension to content script. You can access it directly in content script. ie: chrome.storage.local and chrome.storage.sync are available to content scripts.

Your extension's content scripts can directly access user data without the need for a background page.

storage docs