REDUX_DEV_TOOLS Failed to fetch extension

[squidjam]

electron-devtools-installer is working properly for React Development Tools but not for Redux DevTools.

Given: "electron-devtools-installer": "^3.2.0" "electron": "^9.4.4"

in electron.js: `const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require ( 'electron-devtools-installer' );

app.whenReady ().then ( () => {
    installExtension( REDUX_DEVTOOLS, {forceDownload: true, loadExtensionOptions: { allowFileAccess: true }  } )
        .then( ( name ) => console.log( `Added Extension:  ${ name }` ) )
        .catch( ( err ) => console.error( 'An error occurred "redux_devtools": ', err ) );
    installExtension( REACT_DEVELOPER_TOOLS )
        .then( ( name ) => console.log( `Added Extension:  ${ name }` ) )
        .catch( ( err ) => console.error( 'An error occurred "react_devtools": ', err ) );
} )

`

Output shows:

Failed to fetch extension, trying 3 more times ... Failed to fetch extension, trying 2 more times Failed to fetch extension, trying 1 more times Failed to fetch extension, trying 0 more times An error occurred "redux_devtools": Error: net::ERR_BLOCKED_BY_RESPONSE at SimpleURLLoaderWrapper. (electron/js2c/browser_init.js:93:6395) at SimpleURLLoaderWrapper.emit (events.js:223:5)

Observed behavior: Redux devtools isn't downloaded.

[aabuelenin]

I've the same issue but it affects all extensions not just REDUX_DEVTOOLS.

Here's what I know so far:

• electron-devtools-installer makes a request to: https://clients2.google.com/service/update2/crx?response=redirect&acceptformat=crx2,crx3&x=id%3Dfmkadmapgofadopljbjfkapdkoienihi%26uc&prodversion=32
• it gets redirected to a URL such as: https://clients2.googleusercontent.com/crx/blobs/Acy1k0YPCCw7_6kyVvR3KPdqEXPd5F3KNJJeK035UMnlLHI6yzEjofXyx-PZKe5JR8Wqtxaw5ZGKZQgLCVO6XvblG2ERSHWWAAn7LKerrPN69tVXnOM3AMZSmuXTTAOgKDAvhdTSbraRZcSHsS1sEw/extension_4_24_0_0.crx
• on the second response, Cross-Origin-Resource-Policy is set to 'same-site'. When I intercept the response using a proxy and remove that response header before the response is set to electron, everything works fine.

So the culprit is CORS. I tried removing the response header by listening to onBeforeSendHeaders, onHeadersReceived and onBeforeRedirect; and modifying requests/responses. But (and this might be a bug in electron) onHeadersReceived doesn't get called for the second request, maybe because it's the result of a redirection?

[dialqueza]

electron-devtools-installer is working properly for React Development Tools but not for Redux DevTools.

Given: "electron-devtools-installer": "^3.2.0" "electron": "^9.4.4"

in electron.js: `const { default: installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = require ( 'electron-devtools-installer' );

app.whenReady ().then ( () => {
    installExtension( REDUX_DEVTOOLS, {forceDownload: true, loadExtensionOptions: { allowFileAccess: true }  } )
        .then( ( name ) => console.log( `Added Extension:  ${ name }` ) )
        .catch( ( err ) => console.error( 'An error occurred "redux_devtools": ', err ) );
    installExtension( REACT_DEVELOPER_TOOLS )
        .then( ( name ) => console.log( `Added Extension:  ${ name }` ) )
        .catch( ( err ) => console.error( 'An error occurred "react_devtools": ', err ) );
} )

`

Output shows:

Failed to fetch extension, trying 3 more times ... Failed to fetch extension, trying 2 more times Failed to fetch extension, trying 1 more times Failed to fetch extension, trying 0 more times An error occurred "redux_devtools": Error: net::ERR_BLOCKED_BY_RESPONSE at SimpleURLLoaderWrapper. (electron/js2c/browser_init.js:93:6395) at SimpleURLLoaderWrapper.emit (events.js:223:5)

Observed behavior: Redux devtools isn't downloaded.

We're also experiencing this in VueJS Devtools as well. What's the workaround solution for this?

[mduclehcm]

@dialqueza I have created a workaround patch you can try this

"electron-devtools-installer": "git+https://github.com/mduclehcm/electron-devtools-installer#mduclehcm-patch-1",

[LegacyOfKain]

For me what works is to duplicate the code by adding the install extension code twice

app.whenReady ().then ( () => { installExtension( REDUX_DEVTOOLS, {forceDownload: true, loadExtensionOptions: { allowFileAccess: true } } ) .then( ( name ) => console.log( Added Extension: ${ name } ) ) .catch( ( err ) => console.error( 'An error occurred "redux_devtools": ', err ) ); installExtension( REACT_DEVELOPER_TOOLS ) .then( ( name ) => console.log( Added Extension: ${ name } ) ) .catch( ( err ) => console.error( 'An error occurred "react_devtools": ', err ) ); .... .... createWindow(); ..... } )

app.whenReady ().then ( () => { installExtension( REDUX_DEVTOOLS, {forceDownload: true, loadExtensionOptions: { allowFileAccess: true } } ) .then( ( name ) => console.log( Added Extension: ${ name } ) ) .catch( ( err ) => console.error( 'An error occurred "redux_devtools": ', err ) ); installExtension( REACT_DEVELOPER_TOOLS ) .then( ( name ) => console.log( Added Extension: ${ name } ) ) .catch( ( err ) => console.error( 'An error occurred "react_devtools": ', err ) ); } )