chrome.storage.local.get not getting data

Question

I am trying to make an extension that requires saving some text (URLs). The setting of the data seems fine, but trying to retrieve the data is the problem.

The extension manifest has both the popup JavaScript and the content JavaScript in the content scripts area.

{
    "manifest_version": 2,
    "name": "Extension_Name",
    "version": "0.0.1",
    "browser_action": {
        "default_title": "Extension_title",
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": ["storage"],
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": ["content.js","popup.js"]
        }
    ]
}

The URLs are stored in the Chrome local storage area:

var b = document.getElementById("l"); //l is a button
b.onmouseup = function () {
    var r = prompt("Please enter the website to add.");
    var g = [];
    chrome.storage.local.get("whitelist", function (i) {
        if (i['whitelist'] !== undefined) {
            var g = i['whitelist'];
        }
    });
    g.push(r);
    chrome.storage.local.set({
        "whitelist": g
    }, function () {
        console.log("done")
    });
}

This seems to work, and I can manually type in the get function for the data. However I can not find a way for the data to be used in the content.js

//getting website whitelist
d = null;
var inw = false;
chrome.storage.local.get("whitelist", function (p) {
    d = p['whitelist'];
}); //why doesnt this work???
console.log(d); //testing (returns null in the console...)
for (var j in d) { //this script doesnt run because d is not set to an array
    alert(window.location.host.replace(/\./g, ""));
    if (d[j].replace(/\./g, "").replace(/:\/\//g, ".")
                               .split(".")[1] === window.location.host.replace(/\./g, "")) {
        inw = true;
        alert("true");
    }
}

related: [How do I return the response from an asynchronous call?](https://stackoverflow.com/q/14220321) — Makyen, Sep 15 '17 at 01:41

score 0 · Accepted Answer · answered Sep 15 '17 at 00:26

I see a few possible problems:

In your second snippet, the var g = i['whitelist'] is declared in a new narrower scope, and the original g is not used. Also, the g in g.push(r) is still [], because it is executed before chrome.storage.local.get() calls its callback function with the existing whitelist to use.

// edited version
var g = [];
chrome.storage.local.get("whitelist", function(i) {
    if (i['whitelist'] !== undefined) {
        g = i['whitelist'];
    }
    g.push(r);
    chrome.storage.local.set({"whitelist": g}, function(){console.log("done")});
});

In the third snippet, you are not using the value returned in the callback, and your console.log(d) is null because it is running before d is changed by the callback.

// edited version
chrome.storage.local.get("whitelist", function(p) {
    d = p['whitelist'];
    console.log(d);
    for (var j in d) ...
});

chrome.storage.local.get not getting data

1 Answers1