[DevTools Bug]: Electron support broken in 4.27

Kilian commented 1 year ago

Website or app

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: https://github.com/facebook/react/pull/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] https://github.com/electron/electron/issues/36545 and https://github.com/MarshallOfSound/electron-devtools-installer/issues/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[bot] commented 1 year ago

@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[bot] commented 1 year ago

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

mondaychen commented 1 year ago

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

Kilian commented 1 year ago

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

serg06 commented 1 year ago

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 commented 1 year ago

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

mondaychen commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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

Download this special Manifest V2 build of the extension
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.
Update the path in loadExtension.

eltaurito commented 1 year ago

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 commented 1 year ago

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

xupea commented 1 year ago

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

eltaurito commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

@jonluca what issues did you get?

yuwanlin commented 1 year ago

@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 commented 11 months ago

I have a similar problem with Electron 25.2.

mulgurul commented 10 months ago

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

mulgurul commented 10 months ago

Any news regarding this matter yet?

Arkellys commented 9 months ago

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 commented 4 months ago

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

Bartel-C8 commented 4 months ago

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

https://github.com/facebook/react/issues/27749

duddsA commented 4 months ago

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

facebook / react