Error when installing React devtools and Redux devtools

[mierak]

With the following code:

import installExtension, { REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } from 'electron-devtools-installer';

app.whenReady().then(() => {
    if (!isProd) {
        installExtension([REDUX_DEVTOOLS, REACT_DEVELOPER_TOOLS])
            .then((name) => console.log(`Added Extension:  ${name}`))
            .catch((err) => console.log('An error occurred: ', err));
    }
});

After app starts I get following errors thrown in terminal:

Redux devtools work if i reopen chrome devtools, but throw following:

(node:15492) ExtensionLoadWarning: Warnings loading extension at C:\Users\<username>\AppData\Roaming\<appname>\extensions\lmhkpmbekcpmknklioeibfkpmmfibljd: Unrecognized manifest key 'commands'. Unrecognized manifest key 'homepage_url'. Unrecognized manifest key 'page_action'. Unrecognized manifest key 'short_name'. Unrecognized manifest key 'update_url'. Permission 'notifications' is unknown or URL pattern is malformed. Permission 'contextMenus' is unknown or URL pattern is malformed. Permission 'tabs' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.

React devtools dont work, the downloaded crx file has 0 filesize:

An error occurred:  Error: Invalid header: Does not start with Cr24
    at crxToZip (D:\users\<username>\desktop\projects\<appname>\.webpack\main\index.js:28783:15)
    at D:\users\<username>\desktop\projects\<appname>\.webpack\main\index.js:28808:32
    at callHanler (D:\users\<username>\desktop\projects\<appname>\.webpack\main\index.js:29739:16)
    at tryCatcher (D:\users\<username>\desktop\projects\<appname>\.webpack\main\index.js:29456:32)
    at D:\users\<username>\desktop\projects\<appname>\.webpack\main\index.js:29595:38
    at flush (D:\users\<username>\desktop\projects\<appname>\.webpack\main\index.js:29498:17)
    at processTicksAndRejections (internal/process/task_queues.js:76:11)

"electron-devtools-installer": "^3.1.0" "electron": "^9.1.0" using electron-forge with webpack plugin version 6.0.0-beta.52

Manually copying react-devtools to /extensions folder makes the extension work without issues, so the problem here is probably with download.

Edit: Just noticed this pull request https://github.com/MarshallOfSound/electron-devtools-installer/pull/140 which should fix the react issue. And since the issue with redux devtools isnt fatal you can consider closing this. Thanks!

[peterupton]

I still have this issue on 3.2, it looks like the PR did not fix this issue.

[lekoaf]

This problem also affects APOLLO_DEVELOPER_TOOLS.

ExtensionLoadWarning: Warnings loading extension at <path>/extensions/jdkknkkbebbapilgoeccciglkfbmbnfm:
Unrecognized manifest key 'author'.
Unrecognized manifest key 'page_action'.
Unrecognized manifest key 'update_url'.
Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.

[lekoaf]

I get the exact same problem when using electrons own methods of initializing extensions. So this might be an electron bug?

session.defaultSession
    .loadExtension(
      '/home/username/.config/google-chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.13.5_0'
    )
    .catch((err) => {
      console.log(
        '<<<<<<<<< FAILED TO INITIALIZE react-devtools >>>>>>>>>>',
        err
      )
    })

[BlackHole1]

I submitted a PR for a fix for this issue: https://github.com/MarshallOfSound/electron-devtools-installer/pull/177

But this PR never got a reply from the author

[lekoaf]

I submitted a PR for a fix for this issue: #177

But this PR never got a reply from the author

I took a look at your PR. Like I wrote, the "warnings" seems to come from Electron itself, so I don't see a point in hiding an Electron "bug" in this repository.

React-devtools actually worked for me, despite getting the warnings. Couldn't get the Apollo-devtools to work, but that's probably my own fault.