Latest Release Breaks in Electron

[mikerourke]

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]

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]

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]

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:
9bd1e03
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]

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]

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