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 ) );
} )