Add electron devtools installer back

package.json

@@ -18,6 +18,7 @@
 	},
 	"scripts": {
 		"prestart": "npm run cli:build",
+		"setup:devtools": "ts-node ./scripts/setup-dev-extensions.ts",
 		"start": "electron-vite dev --outDir=dist --watch",
 		"start-wayland": "npm run prestart && electron-forge start -- --enable-features=UseOzonePlatform --ozone-platform=wayland .",
 		"postinstall": "patch-package && ts-node ./scripts/download-wp-server-files.ts && node ./scripts/download-available-site-translations.mjs && npx @electron/rebuild -o fs-ext",
@@ -77,6 +78,7 @@
 		"@wp-playground/blueprints": "^3.0.22",
 		"cross-env": "^7.0.3",
 		"electron": "^39.2.7",
+		"electron-devtools-installer": "^4.0.0",
 		"electron-playwright-helpers": "^2.1.0",
 		"electron-vite": "^5.0.0",
 		"eslint": "^9.39.2",

patches/electron-devtools-installer+4.0.0.patch

@@ -0,0 +1,35 @@
+diff --git a/node_modules/electron-devtools-installer/dist/index.js b/node_modules/electron-devtools-installer/dist/index.js
+index c428018..2b9b8a2 100644
+--- a/node_modules/electron-devtools-installer/dist/index.js
++++ b/node_modules/electron-devtools-installer/dist/index.js
+@@ -26,7 +26,8 @@ async function installExtension(extensionReference, options = {}) {
+     else {
+         throw new Error(`Invalid extensionReference passed in: "${extensionReference}"`);
+     }
+-    const installedExtension = targetSession.getAllExtensions().find((e) => e.id === chromeStoreID);
++    const extensionApi = (targetSession.extensions) || targetSession;
++    const installedExtension = extensionApi.getAllExtensions().find((e) => e.id === chromeStoreID);
+     if (!forceDownload && installedExtension) {
+         return installedExtension;
+     }
+@@ -38,16 +39,16 @@ async function installExtension(extensionReference, options = {}) {
+         const unloadPromise = new Promise((resolve) => {
+             const handler = (_, ext) => {
+                 if (ext.id === installedExtension.id) {
+-                    targetSession.removeListener('extension-unloaded', handler);
++                    extensionApi.removeListener('extension-unloaded', handler);
+                     resolve();
+                 }
+             };
+-            targetSession.on('extension-unloaded', handler);
++            extensionApi.on('extension-unloaded', handler);
+         });
+-        targetSession.removeExtension(installedExtension.id);
++        extensionApi.removeExtension(installedExtension.id);
+         await unloadPromise;
+     }
+-    return targetSession.loadExtension(extensionFolder, loadExtensionOptions);
++    return extensionApi.loadExtension(extensionFolder, loadExtensionOptions);
+ }
+ exports.default = installExtension;
+ exports.EMBER_INSPECTOR = {

src/index.ts

@@ -13,6 +13,11 @@ import path from 'path';
 import { pathToFileURL } from 'url';
 import * as Sentry from '@sentry/electron/main';
 import { __, _n, sprintf } from '@wordpress/i18n';
+import {
+	installExtension,
+	REACT_DEVELOPER_TOOLS,
+	REDUX_DEVTOOLS,
+} from 'electron-devtools-installer';
 import { PROTOCOL_PREFIX } from 'common/constants';
 import {
 	bumpStat,
@@ -128,34 +133,6 @@ async function setupSentryUserId() {
 	}
 }
 
-// Load DevTools extensions from the extensions directory
-// Extension IDs are hardcoded Chrome extension IDs for React DevTools and Redux DevTools
-const EXTENSION_IDS = {
-	REACT_DEVELOPER_TOOLS: 'fmkadmapgofadopljbjfkapdkoienihi',
-	REDUX_DEVTOOLS: 'lmhkpmbekcpmknklioeibfkpmmfibljd',
-};
-
-async function loadDevToolsExtensions( appSession = session.defaultSession ) {
-	const extensionsPath = path.join( app.getPath( 'userData' ), 'extensions' );
-
-	for ( const [ name, extensionId ] of Object.entries( EXTENSION_IDS ) ) {
-		const extensionPath = path.join( extensionsPath, extensionId );
-		try {
-			// Check if extension directory exists
-			const fs = await import( 'fs/promises' );
-			await fs.access( extensionPath );
-
-			// Load extension using the new API with allowFileAccess option
-			await appSession.extensions.loadExtension( extensionPath, {
-				allowFileAccess: true,
-			} );
-			console.log( `Loaded ${ name } extension from ${ extensionPath }` );
-		} catch ( error ) {
-			console.warn( `Failed to load ${ name } extension:`, error );
-		}
-	}
-}
-
 // This is a workaround to ensure that the extension background workers are started
 // If you are updating Electron, confirm if this is still needed
 // https://github.com/electron/electron/issues/41613
@@ -285,7 +262,8 @@ async function appBoot() {
 	app.on( 'ready', async () => {
 		const locale = await getUserLocaleWithFallback();
 		if ( process.env.NODE_ENV === 'development' ) {
-			await loadDevToolsExtensions();
+			await installExtension( REACT_DEVELOPER_TOOLS );
+			await installExtension( REDUX_DEVTOOLS );
 			await launchExtensionBackgroundWorkers();
 		}