Modify local storage via popup, and use stored values in contentscript

问题

I'm trying my hand at creating a chrome extension, but am running into a wall.

I want to be able to use the browser-action popup to write/modify values into local storage (extension storage).

Then, I want to use the stored values in a content script.

From what I've read, it looks like I need a background file? but I'm not sure.

Some coded examples would be extremely appreciated!

Thanks for your help!

回答1:

You can avoid using a background page as a proxy if you use chrome.storage API. It's a storage solution that is available from Content Scripts directly.

Here is a comparison between it and localStorage in the context of Chrome extensions.

---

An important thing to note is that it's asynchronous, making code slightly more complicated than using localStorage:

/* ... */
chrome.storage.local.get('key', function(value){
  // You can use value here
});
// But not here, as it will execute before the callback
/* ... */

But to be fair, if you go with the background being the proxy for data, message passing is still asynchronous.

---

One can argue that once the data is passed, localStorage works as a synchronous cache.

But that localStorage object is shared with the web page, which is insecure, and nobody stops you from having your own synchronous storage cache, initialized once with chrome.storage.local.get(null, /*...*/) and kept up to date with a chrome.storage.onChanged listener.

回答2:

Background pages can access the localStorage variables saved by your extension. Your content script only has access to the localStorage of the website open in a specific tab. You will therefore need to send the variables from the background page to the content script. The content script can then access these variables.

The following code saves a localStorage variable in the background script and then sends it to the content script for use.

Since you requested a coded example, I've written you one. This project would have a background page and a content script. Using localStorage in your popup will allow the background page to access these variables for use in the content script.

Something like this:

background.js

// When a tab is updated
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo) {

    // When the tab has loaded
    if(changeInfo.status == 'complete') {

        // Query open tabs
        chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {

            // Get URL of current tab
            var tabURL = tabs[0].url;

            // If localStorage is not empty
            if(localStorage.length != 0) {

                // Set a local storage variable
                localStorage.helloworld = "Hello World";

                // Send message to content script
                chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

                    // Send request to show the notification
                    chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {

                    });
                });
            }
        });
    }
});

contentscript.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

    // Use the local storage variable in some way
    if(request.greeting == "hello") {

        var hello = localStorage.helloworld;

        // do something with the variable here
    }
});

Once you have this working, consider switching to chrome.storage

来源：https://stackoverflow.com/questions/25559438/modify-local-storage-via-popup-and-use-stored-values-in-contentscript