I'm looking for a storage mechanism which will persist across websites. I've got primitive data types numbers / strings which I need to store. localStorage doesn't work for me because it falls under the same origin policy. I need my data to be the same across all websites but much be tab specific and accessed via contentscripts.

Could someone suggest a suitable mechanism for achieveing this?

EDIT: I'm currently implementing the first answers code and not having much look. I've got the following...

background.html

note: tabStorage is a class variable in this function

    function store(){
    chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if(request.req == "save") {
        tabStorage[sender.tab.id] = request.data;
       }

    if(request.req == "load") {
        sendResponse(tabStorage[sender.tab.id]);
    }
    });
}

contentscript.js

response is returning undefined

 chrome.extension.sendRequest({req: "load"}, function(response) {
            console.log("getting stak");
            console.log(response.data);
 });

what am I doing wrong? the code is accessing both load and save so I know it's getting there and back but undefined is returning. why?

I'm looking for a storage mechanism which will persist across websites. I've got primitive data types numbers / strings which I need to store. localStorage doesn't work for me because it falls under the same origin policy. I need my data to be the same across all websites but much be tab specific and accessed via contentscripts.

Could someone suggest a suitable mechanism for achieveing this?

EDIT: I'm currently implementing the first answers code and not having much look. I've got the following...

background.html

note: tabStorage is a class variable in this function

    function store(){
    chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if(request.req == "save") {
        tabStorage[sender.tab.id] = request.data;
       }

    if(request.req == "load") {
        sendResponse(tabStorage[sender.tab.id]);
    }
    });
}

contentscript.js

response is returning undefined

 chrome.extension.sendRequest({req: "load"}, function(response) {
            console.log("getting stak");
            console.log(response.data);
 });

what am I doing wrong? the code is accessing both load and save so I know it's getting there and back but undefined is returning. why?

• javascript
• google-chrome-extension
• storage

1 Answer 1

You need to use extension's own localStorage which you access from a background page. If you need this information in a content script, you need to send a request to a background page using messaging, read it there, and send a result back to a content script in a response.

UPDATE If you don't need the storage to keep values between browser restarts then you don't need the localStorage. Just store everything in a background page and identify tabs by their ids. Background page will keep the values as long as the browser is opened. For example:

content script:

//save
chrome.extension.sendRequest({cmd: "save", data: {param1: "value1", param2: "value2"});
...
//load
chrome.extension.sendRequest({cmd: "load"}, function(response) {
    console.log("tab data:", response)
});

background page:

var tabStorage = [];
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
    if(request.cmd == "save") {
        tabStorage[sender.tab.id] = request.data;
    }

    if(request.cmd == "load") {
        sendResponse(tabStorage[sender.tab.id]);
    }
});