2 files changed, 27 insertions, 10 deletions

diff --git a/packages/main/src/devTools.ts b/packages/main/src/devTools.ts
index 7c7c86a..398904c 100644
--- a/packages/main/src/devTools.ts
+++ b/packages/main/src/devTools.ts
@@ -21,6 +21,20 @@
 import type { BrowserWindow } from 'electron';
 
 /**
+ * URL prefixes Sophie is allowed load in dev mode.
+ *
+ * In dev mode, in addition to the application itself,
+ * Sophie must be able do download and load the devtools and related extensions,
+ * so we have to make exceptions in the UI process request filter.
+ */
+export const DEVMODE_ALLOWED_URL_PREFIXES = [
+  'chrome-extension:',
+  'devtools:',
+  'https://clients2.google.com/service/update2/crx',
+  'https://clients2.googleusercontent.com/crx',
+];
+
+/**
  * Installs the react and redux developer tools extensions.
  *
  * We use the redux devtools and connect the mobx store to it with `mst-middlewares`,
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index ff14332..7c6bfd5 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -42,6 +42,7 @@ import { URL } from 'url';
 
 import { init } from './compositionRoot.js';
 import {
+  DEVMODE_ALLOWED_URL_PREFIXES,
   installDevToolsExtensions,
   openDevToolsWhenReady,
 } from './devTools.js';
@@ -73,14 +74,6 @@ app.commandLine.appendSwitch(
   'HardwareMediaKeyHandling,MediaSessionService',
 );
 
-// It doesn't seem to cause a race condition to start installing the extensions this early.
-if (isDevelopment) {
-  app.whenReady().then(installDevToolsExtensions).catch((err) => {
-    console.error('Failed to install devtools extensions', err);
-    process.exit(1);
-  });
-}
-
 // Remove sophie and electron from the user-agent string to avoid detection.
 const originalUserAgent = app.userAgentFallback;
 const userAgent = originalUserAgent.replaceAll(/\s(sophie|Electron)\/\S+/g, '');
@@ -127,7 +120,7 @@ function shouldCancelMainWindowRequest(url: string, method: string): boolean {
     return true;
   }
   if (isDevelopment) {
-    if (normalizedUrl.startsWith('devtools:') || normalizedUrl.startsWith('chrome-extension:')) {
+    if (DEVMODE_ALLOWED_URL_PREFIXES.some((prefix) => normalizedUrl.startsWith(prefix))) {
       return false;
     }
     if (import.meta.env.VITE_DEV_SERVER_URL !== undefined) {
@@ -315,7 +308,17 @@ app.on('window-all-closed', () => {
   }
 });
 
-app.whenReady().then(createWindow).catch((err) => {
+app.whenReady().then(async () => {
+  if (isDevelopment) {
+    try {
+      await installDevToolsExtensions();
+    } catch (err) {
+      console.error('Failed to install devtools extensions', err);
+    }
+  }
+
+  return createWindow();
+}).catch((err) => {
   console.error('Failed to create window', err);
   process.exit(1);
 });