feat: install chrome devtools

Author: KatoakDR

electron/main/app.ts

@@ -19,6 +19,9 @@ const appEnv = process.env.APP_ENV ?? 'production';
 const appEnvIsProd = appEnv === 'production';
 const appEnvIsDev = appEnv === 'development';
 
+// Only load dev tools when running in development.
+const appEnableDevTools = appEnvIsDev && !app.isPackaged;
+
 const appPath = app.getAppPath();
 const appElectronPath = path.join(appPath, 'electron');
 const appBuildPath = path.join(appElectronPath, 'build');
@@ -65,7 +68,7 @@ const createMainWindow = async (): Promise<void> => {
     show: false, // hidden until window loads contents to avoid a blank screen
     webPreferences: {
       preload: path.join(appPreloadPath, 'index.js'),
-      devTools: !app.isPackaged,
+      devTools: appEnableDevTools,
       /**
        * Security Best Practices
        * https://www.electronjs.org/docs/latest/tutorial/security
@@ -114,6 +117,12 @@ const createMainWindow = async (): Promise<void> => {
 // Prepare the renderer once the app is ready
 app.on('ready', () => {
   runInBackground(async () => {
+    if (appEnableDevTools) {
+      const { installChromeExtensions } = await import(
+        './chrome/install-extension'
+      );
+      await installChromeExtensions();
+    }
     await createMainWindow();
   });
 });

electron/main/chrome/install-extension.ts

@@ -0,0 +1,20 @@
+import {
+  REACT_DEVELOPER_TOOLS,
+  installExtension,
+} from 'electron-extension-installer';
+
+// The recommended module for installing extensions for electron doesn't work.
+// Using another one from the community.
+// https://github.com/MarshallOfSound/electron-devtools-installer/issues/238#issuecomment-1499578154
+
+export const installChromeExtensions = async (): Promise<void> => {
+  await installReactDevTools();
+};
+
+export const installReactDevTools = async (): Promise<void> => {
+  await installExtension(REACT_DEVELOPER_TOOLS, {
+    loadExtensionOptions: {
+      allowFileAccess: true,
+    },
+  });
+};