3

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!

Tory
  • 916
  • 1
  • 11
  • 19
  • 2
    If you use [`chrome.storage`](https://developer.chrome.com/extensions/storage) instead, you won't have this problem. See [window.localStorage vs chrome.storage.local](http://stackoverflow.com/questions/24279495/window-localstorage-vs-chrome-storage-local/24281357#24281357) – Xan Aug 28 '14 at 23:20
  • @Xan This looks like what I want! What's the deal with the callback function on the get and sets though? I've never encountered something like this, and the documentation is a bit ominous. I think I have it done correctly on the set, but do I do something special for the get? Thanks again! – Tory Aug 28 '14 at 23:34
  • 1
    [This answer](http://stackoverflow.com/questions/11688171/after-calling-chrome-tabs-query-the-results-are-not-available/11689804#11689804) by Rob W, though dealing with another API function, explains the pitfalls of callbacks very nicely. You just have to wrap your head around it once. – Xan Aug 28 '14 at 23:39
  • @Xan I've got it reading and writing now. Didn't click that I had to write my code within the callback. Thanks for all your help! – Tory Aug 29 '14 at 03:29
  • @Xan Will you please restate your comments as an answer, so that I can mark this question as closed? Thanks again! – Tory Sep 02 '14 at 13:41

2 Answers2

3

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.

Community
  • 1
  • 1
Xan
  • 74,770
  • 16
  • 179
  • 206
1

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

Peter Butcher
  • 156
  • 1
  • 8