Add electron devtools installer back

package.json

@@ -77,6 +77,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,40 +133,13 @@ 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
 function launchExtensionBackgroundWorkers( appSession = session.defaultSession ) {
+	const extensionApi = ( appSession.extensions as Electron.Extensions | undefined ) || appSession;
 	return Promise.all(
-		appSession.extensions.getAllExtensions().map( async ( extension ) => {
+		extensionApi.getAllExtensions().map( async ( extension ) => {
 			const manifest = extension.manifest;
 			if ( manifest.manifest_version === 3 && manifest?.background?.service_worker ) {
 				await appSession.serviceWorkers.startWorkerForScope( extension.url );
@@ -285,7 +263,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();
 		}
 

src/tests/index.test.ts

@@ -24,6 +24,11 @@ jest.mock( 'atomically', () => ( {
 	readFile: jest.fn(),
 	writeFile: jest.fn(),
 } ) );
+jest.mock( 'electron-devtools-installer', () => ( {
+	installExtension: jest.fn( () => Promise.resolve( { id: 'test-extension' } ) ),
+	REACT_DEVELOPER_TOOLS: { id: 'fmkadmapgofadopljbjfkapdkoienihi' },
+	REDUX_DEVTOOLS: { id: 'lmhkpmbekcpmknklioeibfkpmmfibljd' },
+} ) );
 
 ( readFile as jest.Mock ).mockResolvedValue( JSON.stringify( { sites: [] } ) );
 require( 'fs' ).__setFileContents( normalize( '/path/to/app/temp/com.wordpress.studio/' ), '' );