Now I use chrome.extension.sendMessage in content script and chrome.extension.onMessage.addListener in background script. But the problem appears when I need to sync to extension's local storage in real time (several checkboxes with options in extension popup).

Popup with checkbox (to control content-script.js options) -> checkbox state stored in extension's local storage.

Content script need to know changes made by user in popup window -> send request to Background page to access extension's local storage keys.

Background page -> send response to Content script -> callback function replicate all keys from extension's local storage to web local storage.

Content script read replicated keys and turn on/off it's options.

But this process is not real-time and I need it to be reactive.

Content-script.js:

chrome.extension.sendMessage({
    name: "cache"
},
function(response) {
    var status = response.url;
    if (status == 'enabled') {
        localStorage['cache'] = 'enabled';
    }
    if (status == 'disabled') {
        localStorage['cache'] = 'disabled';
    }
}
);

Backround.js:

chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
    console.log("request recieved is " + request);
    if (request.name == "cache") {
        sendResponse({
            url: JSON.parse(localStorage['cache']).status
        });
    } else {}
}
);

Thanks for your help!

Now I use chrome.extension.sendMessage in content script and chrome.extension.onMessage.addListener in background script. But the problem appears when I need to sync to extension's local storage in real time (several checkboxes with options in extension popup).

Popup with checkbox (to control content-script.js options) -> checkbox state stored in extension's local storage.

Content script need to know changes made by user in popup window -> send request to Background page to access extension's local storage keys.

Background page -> send response to Content script -> callback function replicate all keys from extension's local storage to web local storage.

Content script read replicated keys and turn on/off it's options.

But this process is not real-time and I need it to be reactive.

Content-script.js:

chrome.extension.sendMessage({
    name: "cache"
},
function(response) {
    var status = response.url;
    if (status == 'enabled') {
        localStorage['cache'] = 'enabled';
    }
    if (status == 'disabled') {
        localStorage['cache'] = 'disabled';
    }
}
);

Backround.js:

chrome.extension.onMessage.addListener(
function(request, sender, sendResponse) {
    console.log("request recieved is " + request);
    if (request.name == "cache") {
        sendResponse({
            url: JSON.parse(localStorage['cache']).status
        });
    } else {}
}
);

Thanks for your help!

• javascript
• google-chrome-extension

• From your content-script I see that localStorage['cache'] is a string, but in your background.js you seem to be doing a JSON.parse() on it. Is that the error you are referring to? – source.rar Commented Jun 11, 2014 at 20:17
• No, it's not error. I'm parsing extension local storage record that has a value like {"status":"enabled"}. The problem is in real-time syncing between extension and web local storage. I need the same record as in extension local storage when user opened extension's popup, clicked checkbox and it's state changed, then script made record in extension local storage. – Glebcha Commented Jun 11, 2014 at 20:21
• So you use the key "cache" for the extension's localStorage as well as for the website's localStorage, but on the extension it's a JSON string whereas on the website it's a simple string? – devnull69 Commented Jun 11, 2014 at 20:25
• Just saying, chrome.extension.sendMessage and friends are deprecated in favour of chrome.runtime.sendMessage – Xan Commented Jun 11, 2014 at 20:35
• Doesn't matter, I can fully replicate keys with JSON values or not. It is only sample, the main idea is to sync keys in real time. – Glebcha Commented Jun 11, 2014 at 20:35

1 Answer 1

Have you looked into the chrome.storage API? One of the specific use cases it's designed for (an advantage over localStorage) is that content scripts can access this API directly, removing the need for messaging to municate with your background page. (You might even be able to eliminate the background page altogether.)

https://developer.chrome./extensions/storage