fix: Allow devtools extensions to be installed

On the first startup in dev mode, Electron must be able to download the
devtools extensions and wait for them to be installed.

Loosens the UI process request filter a bit, but the behavior should
match production mode in all cases except chrome webstore URLs.
Nevertheless, only production mode should be considered secure.

Fixes #6

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

1 files changed, 13 insertions, 10 deletions

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