react: [DevTools Bug]: Electron support broken in 4.27

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.

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.

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

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

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

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 https://github.com/facebook/react/issues/27749

— Reply to this email directly, view it on GitHub https://github.com/facebook/react/issues/25843#issuecomment-1951877744, or unsubscribe https://github.com/notifications/unsubscribe-auth/AK54M6KYNVVOYLUT3RMB4DTYUMAXVAVCNFSM6AAAAAASWZU6DKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJRHA3TONZUGQ . You are receiving this because you are subscribed to this thread.Message ID: @.***>

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.

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

@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

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

@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.

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

Any news regarding this matter yet?

@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

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