[DevTools Bug]: Electron support broken in 4.27

[Kilian]

Website or app

Electron.js

Repro steps

React devtools 4.27 no longer works in Electron[1] because chrome.scripting isn't implemented, which it started using due to the manifest v3 upgrade: #25145

When opening React devtools 4.27 in any Electron project (installed with `electron-devtools-installer for example) you'll see that the devtools panel is shown but no React components are ever found. Earlier versions worked well with Electron

[1] electron/electron#36545 and MarshallOfSound/electron-devtools-installer#232

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[github-actions]

@Kilian: We're sorry you've seen this error. ❤️

It looks like you forgot to specify a valid URL. (This means that we will not be able to reproduce the problem you're reporting.)

Please help us by providing a link to a CodeSandbox (https://codesandbox.io/s/new), a repository on GitHub, or a minimal code example that reproduces the problem. (Screenshots or videos can also be helpful if they help provide context on how to repro the bug.)

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

Issues without repros are automatically closed but we will re-open if you update with repro info.

[github-actions]

Thank you for providing repro steps! Re-opening issue now for triage.

[mondaychen]

Ah I see. I'll try implement a fallback logic and release a fix.

[Kilian]

I wrote up some quick downgrade instructions for Electron apps (replace "Polypane" with your app name): https://polypane.app/docs/downgrading-react-devtools/

[serg06]

Thanks @Kilian ; I turned your fix into a script, tested on Windows in Git Bash

extension="/path/to/your/data/extensions/fmkadmapgofadopljbjfkapdkoienihi"
manifest="$extension/manifest.json"

if ! [ -f $manifest ]; then
  echo manifest doesn\'t exist, cannot patch
  exit 0
fi

md5=`md5sum $manifest | awk '{split($0,a," "); print a[1]}'`
if [ "$md5" = "e821851e1ba9ff96244025afa8178b06" ]; then
  echo manifest is already correct
  exit 0
fi

echo fixing extension
curl https://polypane.app/fmkadmapgofadopljbjfkapdkoienihi.zip --output extensions-fix.zip
rm -r $extension
mkdir $extension
unzip extensions-fix.zip -d $extension
rm extensions-fix.zip

[filipefborba]

@mondaychen Hey, can I work on this issue? Any tips on how to start? Would be glad to help!

[mondaychen]

@filipefborba sorry, I think I put the "good first issue" label there by mistake. It's a bit to complex to set things up if you are new to this project.

[mondaychen]

Also my apologies to people who are impacted by this: I wanted to work on this earlier, but we are extremely understaffed at this moment, and I got pretty swamped in the past a few weeks. I should be able to work on this no later than next week.

[filipefborba]

@mondaychen no worries! If you find anything other "good first issue" or want/need some help, let me know. Also, I'm sorry that you've been swamped, that's never cool. Hope everything gets better! =)

[mondaychen]

tldr; This should be considered an Electron issue. For now, please follow the instructions at the end of this comment.

Hi everyone,

After some digging into the issue, I realized that it's not possible to create a version that works on both the latest Chrome & Electron, because:

• the old method of connecting to React requires an unsafe CSP, which is no longer allowed in Manifest V3
• the new method requires chrome.scripting to work, which is not available in Electron
• the fallback method does not work on Electron
• It's not possible to dynamically provide a manifest.json file for an extension.

The only possible solution here is to revert the Manifest V3 upgrade. IMO that would be the wrong move. Chrome has announced that it will drop support for Manifest V2 by Jan 2023 (see https://developer.chrome.com/blog/mv2-transition/). Although they have decided to push back the hard deadline, it's unlikely that it will be pushed back forever. It's especially ironic that Electron also warns you "Manifest version 2 is deprecated and support will be removed in 2023" when you load an extension, while they don't have the API of Manifest V3.

So, in my opinion, Electron should add support for chrome.scripting as soon as possible. Before that, here is what I recommend:

Workaround

1. Download this special Manifest V2 build of the extension
2. Instead of replacing the existing extension in your Chrome data folder, unzip it to another location, because it's possible that our next release will overwrite it.
3. Update the path in loadExtension.

[eltaurito]

Hi guys!

Is this problem still there?

I tried to get the latest version of Electron React Boilerplate, and i still have problems with the DevTools extension.

Do we have any news?

Thanks!

Davide

[madenney]

@eltaurito I just ran into the same problem with ERB as well

[xupea]

@Kilian @eltaurito @madenney try this repo: https://github.com/xupea/electron-devtools-installer, which may ease your pain

[eltaurito]

this

Thank you @xupea !

I've installed the package:
"electron-devtools-assembler": "^1.2.0"

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

...

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

...

But this is what i get on the console:

Added Extension:  React Developer Tools
[14836:0328/133251.298:ERROR:extensions_browser_client.cc(58)] Extension Error:
  OTR:     false
  Level:   2
  Source:  chrome-extension://ednhkiadhfhgjhonpebdamaajgpllfom/build/background.js
  Message: Uncaught TypeError: Cannot read properties of undefined (reading 'registerContentScripts')
  ID:      ednhkiadhfhgjhonpebdamaajgpllfom
  Type:    RuntimeError
  Context: chrome-extension://ednhkiadhfhgjhonpebdamaajgpllfom/build/background.js
  Stack Trace:
    {
      Line:     107
      Column:   1
      URL:      chrome-extension://ednhkiadhfhgjhonpebdamaajgpllfom/build/background.js
      Function: (anonymous function)
    }

And if I try to run my project and open the Components extension i get this:

[xupea]

@eltaurito seems it's still using v3 of react devtool, and chrome.scripting.registerContentScripts is not supported by electron, can you try to delete the Electron extension folder in your %APPDATA% , then npm start

[eltaurito]

@eltaurito seems it's still using v3 of react devtool, and chrome.scripting.registerContentScripts is not supported by electron, can you try to delete the Electron extension folder in your %APPDATA% , then npm start

I deleted the extension folder, now it works perfectly 👍👍 👍

Thank you a lot @xupea !

[kitschpatrol]

@xupea That worked for me as well, thanks so much.

On a Mac you can find Electron extensions here: ~/Library/Application Support/Electron/extensions

[jonluca]

That version seems to be having issues with electron 24.

Also that repo redirects CRX requests to the developers domain, instead of downloading directly from the chrome webstore. (see here https://github.com/xupea/electron-devtools-installer/blob/master/src/downloadChromeExtension.ts#L24) - I now realize this is required, because google doesn't let you download historical chrome versions, unfortunately

I published https://www.npmjs.com/package/electron-extension-installer to fix that (source code here)

import { installExtension, REACT_DEVELOPER_TOOLS } from "electron-extension-installer";

app.on("ready", async () => {
  await installExtension(REACT_DEVELOPER_TOOLS, {
    loadExtensionOptions: {
      allowFileAccess: true,
    },
  });
});

[xupea]

@jonluca what issues did you get?

[Sanford284]

@xupea, delete extensions still load failed.

import installer, { REACT_DEVELOPER_TOOLS, MOBX_DEVTOOLS } from 'electron-devtools-assembler';
// when ready
await installer(REACT_DEVELOPER_TOOLS, {
                loadExtensionOptions: {
                    allowFileAccess: true,
                },
            })
                .then((name) => this.logger.log(`Added Extension:  ${name}`))
                .catch((err) => this.logger.error('An error occurred: ', err));

electron version is 22，node version is 16.14.0

[Nantris]

I have a similar problem with Electron 25.2.

[mulgurul]

Kilian, the script link does not exist anymore: "Page not found"
https://polypane.app/docs/downgrading-react-devtools/
BR Peter

[mulgurul]

Any news regarding this matter yet?

[Arkellys]

Kilian, the script link does not exist anymore: "Page not found"
https://polypane.app/docs/downgrading-react-devtools/
BR Peter

Using Wayback Machine, edited with the original instructions from author:

1. Download React-devtools 4.25

[Polypane] have prepared a zip file with react-devtools 4.25 here:
fmkadmapgofadopljbjfkapdkoienihi.zip

2. Open [your app] extensions folder

Open the following folder in your explorer/finder:

• Windows: %APPDATA%/[your app]/extensions/
• macOS: ~/Library/Application Support/[your app]/extensions/
• Linux: ~/.config/[your app]/extensions/

3. Add or replace the current version with the version downloaded in step 1

If you have installed react-devtools:

• Find the folder fmkadmapgofadopljbjfkapdkoienihi and open it
• Remove all the files
• Extract the files from the zip file from step 1

If you do not have react-devtools installed:

• Create a folder fmkadmapgofadopljbjfkapdkoienihi and open it
• Extract the files from the zip file from step 1

4. Restart [your app]

After restarting [your app], react-devtools should work again. [Your app] will not automatically download new versions so unless you manually refresh, they should continue to work.

[Arkellys]

Should be fixed with Electron v27.0.0+ (and also v25.9.0 and v26.3.0) with this pull request.

[Bartel-C8]

But DevTools 4.27.5+ has a bug with loading local file URLs in Electron:

#27749

[duddsA]

6127570289

…

On Mon, Feb 19, 2024, 1:57 AM Bartel Eerdekens ***@***.***> wrote: But DevTools 4.27.5+ has a bug with loading local file URLs in Electron: #27749 <#27749> — Reply to this email directly, view it on GitHub <#25843 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AK54M6KYNVVOYLUT3RMB4DTYUMAXVAVCNFSM6AAAAAASWZU6DKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJRHA3TONZUGQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[JordanDC2]

It appears chrome.scripting is available in Electron now. Can we update this project to use manifest version 3 now?

[goosewobbler]

@JordanDC2 I think it's already using manifest v3... there are other issues getting React Devtools working in Electron though:

#27749
electron/electron#41613
electron/electron#43092