Can't find local storage set in chrome extension using inspector [duplicate]

Question

Good day,

I'm working on a chrome extension and I am setting local storage variables within my background.js. Now I am trying to debug my extension and am trying to find the keys and values I set, but no matter what I inspect (whether the service worker or the application itself), local storage and session storage is always empty. View images below:

How I set data in background.js:

const userData = JSON.stringify("authcode_123");
const nodeData = JSON.stringify("node_123");

chrome.storage.local.set(
    { userStatus: signIn, user_info: userData,
        node_info: nodeData, extStatus: true },
    function (response) {
        if (chrome.runtime.lastError) resolve('fail');
        user_signed_in = signIn;
        resolve('success');
    }
);

When I test it using following code:

chrome.storage.local.get(
    ['userStatus', 'user_info', 'node_info', 'extStatus'],
    function (result) {
        console.log(result);
    }
);

I get the correct values:

But everywhere the application memory is empty:

Anyone has any ideas what else I could inspect or do I have to reload the application storage somehow to see it?

Answer 1

It turns out that the "local storage" accessible from the chrome.storage API is not the same as the Browser local storage from the "web storage API". They make this distinction, albeit subtly, in the storage api page for extensions. (I certainly missed it!)

https://developer.chrome.com/docs/extensions/reference/api/storage#usage

Can extensions use web storage APIs? While extensions can use the Storage interface (accessible from window.localStorage) in some contexts (popup and other HTML pages), we don't recommend it for the following reasons: ...

There is, afaik, no built-in way to see the extension storage other than by console logging all over the place. But the extension described here works:

https://stackoverflow.com/a/30633531/20479

Yes, it's an extension to debug extensions. To see it, you need to open regular dev-tools (typically on your extension's service-worker) and look at the tab on the far right.