Accessing storage from content_scripts directly (plain JS)

[duplxey]

The storage engine itself works great when using it with Redux. But how do I access it directly in content scripts using plain JavaScript? I've tried accessing it through chrome.storage.local, localStorage, storage, but nothing seems to work?

[ssorallen]

According to Chrome's content scripts docs, content scripts are allowed to access the chrome.storage API directly. I have not tried this myself though.

How is your extension declaring its content scripts? What do you mean when you say, "nothing seems to work?"

[duplxey]

I'm building an extension that allows you to create profiles (each has a name, surname and some other data) this profile manager is written in React and Redux. I used your package in order to save data to localStorage so it doesn't get cleared every time I close the extension popup or restart the browser.

I then created a content script called inject.js which runs every time the user opens a webpage. It is declared like this in manifest.json:

  "content_scripts": [
    {
      "matches": [
        "https://*/*", "http://*/*"
      ],
      "exclude_matches": [
        "https://www.google.com/*",
      ],
      "js": [
        "js/content_scripts/inject.js"
      ],
      "all_frames": true
    }
  ]

Now inside of this script I would like to fetch these profiles using plain JavaScript, but I can't figure out where the data is saved or how to access it. I tried dumping localStorage and window.localStorage and they are both undefined as well as trying it the Chrome way like this:

chrome.storage.local.get(['profiles'], function(result) {
  console.log('Value currently is ' + result.profiles);
});

[jakagaal]

I am having the same issue with figuring out where the data is saved, similar as duplxey described...

[duplxey]

After quite a while I figured out a "hacky" way how to access it thanks to storage.onChanged listener. I put the listener in my content_script and the event was triggered everytime I changed something inside React popup. This confirmed that the data is indeed stored in chrome.storage.local.

By debugging a bit I figured out that area=local and key=persist:localStorage. Now the only thing left to do was to access it the Chrome way and parse it like so:

  chrome.storage.local.get(['persist:localStorage'], function(items) {
    const parsed = JSON.parse(items['persist:localStorage']);

    // Keep in mind that you need to parse each reducer separately like this:
    const someReducer = JSON.parse(parsed.someReducer);
    console.log("someKey: " + someReducer.someKey);
  });

This is far from the most optimal/perfect solution, but hey at least it works!
@ssorallen If you come up with a better solution feel free to reopen the issue and tag me.

[ssorallen]

Thanks for writing that up, @duplxey. I will add a section to the README about accessing the stored values from the chrome.storage APIs directly.

[ssorallen]

I added a section called Accessing local/sync storage directly to the README for any future clients of the lib who are also interested.

Thanks for the question and for the write up.