Latest Release Breaks in Electron

mikerourke commented 2 months ago

I'm using electron-devtools-installer to set up the Redux DevTools extension for debugging Redux in an Electron app. I set the forceDownload option to true, which means it fetches the latest version of the Chrome extension on launch. I haven't tried running the app in over a week, and now I'm seeing this error when I start it:

Debugger listening on ws://127.0.0.1:9229/4e89d8f4-6a1a-4903-914a-c13269216877
For help, see: https://nodejs.org/en/docs/inspector
DevTools listening on ws://127.0.0.1:65150/devtools/browser/4b7ee0fb-9e8b-4619-b68f-0e8c7a5c8b67
[28323:0826/112312.833741:ERROR:extensions_browser_client.cc(70)] Extension Error:
  OTR:     false
  Level:   2
  Source:  chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/background.bundle.js
  Message: Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked')
  ID:      lmhkpmbekcpmknklioeibfkpmmfibljd
  Type:    RuntimeError
  Context: chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/background.bundle.js
  Stack Trace:
    {
      Line:     1
      Column:   1
      URL:      chrome-extension://lmhkpmbekcpmknklioeibfkpmmfibljd/background.bundle.js
      Function: (anonymous function)
    }
[28323:0826/112312.834218:ERROR:extensions_browser_client.cc(70)] Extension Error:
  OTR:     false
  Level:   1
  Source:  manifest.json
  Message: Service worker registration failed. Status code: 15
  ID:      lmhkpmbekcpmknklioeibfkpmmfibljd
  Type:    ManifestError

Here's the version information for the libraries I'm using:

electron v32.0.1
electron-devtools-installer v3.2.0

I created a minimal reproducible example at mikerourke/electron-redux-devtools-issue.

I'm guessing this was a result of the upgrade to Manifest v3? I'm not very familiar with the Manifest v3 changes, but from what I remember reading, it's a little more restrictive in terms of what you can do. Is there any way to mitigate this? I can do some of my own research, but if this is a quick fix from someone with more knowledge of Chrome extensions, I'd prefer to defer to their expertise.

Methuselah96 commented 2 months ago

I will take a look when I get a chance, I am not super familiar with using Redux DevTools on Electron. If there is a way to install an earlier version of Redux DevTools, that would be a good workaround, I know that Electron was having some issues supporting MV3 and React DevTools somewhat recently.

mikerourke commented 2 months ago

I will take a look when I get a chance, I am not super familiar with using Redux DevTools on Electron. If there is a way to install an earlier version of Redux DevTools, that would be a good workaround, I know that Electron was having some issues supporting MV3 and React DevTools somewhat recently.

I think I should be able to get something working if I just download the older extension bundle and manually install it (i.e. opt out of electron-devtools-installer). In the interim, I'll clone this repo and see if I can get the extension running in dev mode. If I end up coming up with a fix, I'll submit a PR. Thanks for the help!

vladloom commented 1 month ago

Hey all, I just ran into the same problem, and wanted to provide some context:

The chrome extension support inside Electron does not cover 100% of APIs. "Electron supports a subset of the Chrome Extensions API..." https://www.electronjs.org/docs/latest/api/extensions
redux-devtools recently upgraded from Chrome Extension Manifest v2 to v3, which uses a different set of APIs (This is why a problem might be coming up now, but not a month ago)

I'm not seeing documentation on exactly which APIs are supported and which are not, but I get a hint as to which permissions I cannot use when I spin up my Electron app.

(node:1232) ExtensionLoadWarning: Warnings loading extension at /Users/vvengrenyuk/Library/Application Support/Electron/extensions/lmhkpmbekcpmknklioeibfkpmmfibljd:
  Permission 'notifications' is unknown or URL pattern is malformed.
  Permission 'contextMenus' is unknown or URL pattern is malformed.

(Use `Electron --trace-warnings ...` to show where the warning was created)

Okay so notifications and contextMenus are no good. redux-devtools is actually written 100% correctly against the chrome APIs here, it's electron that breaks them. Let's look at the error:

Message: Uncaught TypeError: Cannot read properties of undefined (reading 'onClicked')

So what's failing here are calls like

chrome.contextMenus.onClicked.addListener()
chrome.notifications.onClicked.addListener()

and they're failing because contextMenus is undefined, and notifications is undefined.

Here's a hacky fix that proves this: https://github.com/reduxjs/redux-devtools/commit/9bd1e03b1cd72bddcf5b9278b96c71d507445f70 If we build the above, and load it into our electron app, suddenly we can see our redux debugger again:

Anyways I'm not sure what the cleanest fix here is, since it's almost like Electron and Chrome are two different platforms, with two different APIs, but that's why it's breaking.

Methuselah96 commented 1 month ago

Good catch! We already mock the Chrome API to avoid this issue, but I prematurely removed those mocks from the background page in #1714, since background service workers are not allowed to access window.

This should be fixed in #1748 and released shortly as v3.2.4.

mikerourke commented 1 month ago

@vladloom Thanks for fixing this. You're a lifesaver!

henrikbjorn commented 1 week ago

In 3.2.7 it seems to be broken again.

Methuselah96 commented 1 week ago

Can you create a new issue with steps to reproduce? This sounds like a separate bug, and the Electron tests are passing, so not sure how to diagnose the issue.

henrikbjorn commented 6 days ago

@Methuselah96 done in #1784

reduxjs / redux-devtools

Latest Release Breaks in Electron #1730