Failed to read the 'localStorage' property from 'Window'

When installing the extension, I get an error for the Chrome extension that says the following:

Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

This error is preventing the React tabs from showing up in the Chrome Devtools for me.

Chrome Version 74.0.3729.169

Feel free to close if you have no idea.

Sorry. This is the first I've seen or heard of this. 😦

Do you have "Block third-party cookies and site data" checked in Chrome's "Content Settings" ?

https://www.chromium.org/for-testers/bug-reporting-guidelines/uncaught-securityerror-failed-to-read-the-localstorage-property-from-window-access-is-denied-for-this-document

Related https://github.com/apollographql/apollo-client-devtools/pull/185/files

Chrome extensions will fail to access window.localStorage if 3rd party cookies are blocked.

Looks like the Apollo DevTools replaced window.localStorage with a wrapper around chrome.storage.local. We could do that here, except that localStorage is used in the injected renderer to support reload-and-profile:

react-devtools-experimental/shells/browser/shared/src/injectGlobalHook.js

Lines 65 to 68 in 92c2d83

    
           // If we have just reloaded to profile, we need to inject the renderer interface before the app loads. 
        
           if (localStorage.getItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') { 
        
             const rendererURL = chrome.runtime.getURL('build/renderer.js'); 
        
             let rendererCode;

react-devtools-experimental/src/backend/renderer.js

Lines 2193 to 2196 in 92c2d83

    
           // Automatically start profiling so that we don't miss timing info from initial "mount". 
        
           if (localStorage.getItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') { 
        
             startProfiling(); 
        
           }

Maybe we could add an abstraction that used both localStorage and chrome.storage.local (depending on the context) and wrapped localStorage access with try/catch blocks in case it's not supported. This would mean that some features wouldn't work at all (e.g. reload and profile) in restricted contexts but at least others would.

Do you have "Block third-party cookies and site data" checked in Chrome's "Content Settings" ?

Yes. I unchecked it and now the extension loads correctly! Thanks a lot 💯

Good to know. Thanks for the report. I'll try to see that it degrades more gracefully in this case.

After thinking about this more, I believe it's a Chrome bug. Disabling cookies for a website shouldn't disable the localStorage API for an extension, given that those two contexts are separate.

Unfortunately it looks like this has been reported to Chrome before, without any action being taken:

I think working around it by using (the asynchronous) chrome.storage API is pretty tricky, because of timing issues during initialization. At best we would have to completely drop support for the "reload and profile" feature. It would also make user settings in more complicated in general, particularly component filters.

For now, I've filed a new crbug (since the above two have been closed):

https://bugs.chromium.org/p/chromium/issues/detail?id=971848

For now I have at least fixed the runtime error by wrapping all calls to localStorage/sessionStorage in try/catch so the extension doesn't fail. (71bfb34)

Should be able to install the latest to get this fix. Going to close this issue in our repo for now, since I don't plan to act on it further (at least not yet, pending more info on the crbug).

Hope this works for you. It worked for me

Hi, trying to do this on the browserless chrome image.
https://hub.docker.com/r/browserless/chrome/

Any idea how I unset the "block third party cookies and site data" setting in cli mode?

cheers,
Ben

Nope, sorry. You'll have to search the Chrome docs.

	// If we have just reloaded to profile, we need to inject the renderer interface before the app loads.
	if (localStorage.getItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
	const rendererURL = chrome.runtime.getURL('build/renderer.js');
	let rendererCode;

	// Automatically start profiling so that we don't miss timing info from initial "mount".
	if (localStorage.getItem(LOCAL_STORAGE_RELOAD_AND_PROFILE_KEY) === 'true') {
	startProfiling();
	}