Repository: electron
Issue: [Bug]: React devtools doesn't attach to devtools on launch, reload needed
Labels: bug :beetle:,has-repro-comment,29-x-y,stale-exempt

### Preflight Checklist

- [X] I have read the [Contributing Guidelines](https://github.com/electron/electron/blob/main/CONTRIBUTING.md) for this project.
- [X] I agree to follow the [Code of Conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project adheres to.
- [X] I have searched the [issue tracker](https://www.github.com/electron/electron/issues) for a bug report that matches the one I want to file, without success.

### Electron Version

29.1.4

### What operating system are you using?

Windows

### Operating System Version

Windows 11 Home 23H2

### What arch are you using?

x64

### Last Known Working Electron version

_No response_

### Expected Behavior

When I launch my Electron app on developer mode, React Devtools are installed and attached to my app.

### Actual Behavior

React Devtools are installed, but not attached to my app. A manual reload or force reload is required to attach it. Same problem if I installed React Devtools manually from Chrome extensions, have to reload manually.
<img width="308" alt="bug01" src="https://github.com/electron/electron/assets/47071792/bbb0c9bd-872f-409a-bcab-6155d94d1ce5">
<img width="681" alt="bug02" src="https://github.com/electron/electron/assets/47071792/a2050880-d0d8-4d42-8488-e600b35c63d5">
![bug03](https://github.com/electron/electron/assets/47071792/30550e3b-306b-4b8f-8516-53951f684b21)
<img width="549" alt="bug04" src="https://github.com/electron/electron/assets/47071792/47826aa8-91b6-4ee3-89b6-accfe807dfa2">


### Testcase Gist URL

_No response_

### Additional Information

My code :

```
// Import required modules
const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
const path = require('path');
const { app, BrowserWindow } = require('electron');

// Initialize mainWindow variable
let mainWindow;

// Function to create the main window
const createWindow = async () => {
  const isDev = await import('electron-is-dev');

  // Configure the main window
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true, // Enable Node.js integration
      enableRemoteModule: true, // Enable remote module
      contextIsolation: false, // Disable context isolation
      autoHideMenuBar: true, // Auto-hide menu bar
      devTools: isDev.default, // Show DevTools in development
    },
  });

  // Hide the menu bar
  mainWindow.setMenuBarVisibility(true);

  // Load the appropriate URL based on the environment
  mainWindow.loadURL(
    isDev.default
      ? 'http://localhost:3000' // Development URL
      : `file://${path.join(__dirname, '../build/index.html')}` // Production URL
  );
};

// Create the main window when the app is ready
app.whenReady().then(() => {
  installExtension(REACT_DEVELOPER_TOOLS,  { loadExtensionOptions: { allowFileAccess: true }})
      .then((name) => {
        console.log(`Added Extension: ${name}`);
        // Create the window and the React application
        createWindow();
      })
      .catch((err) => console.log('An error occurred: ', err));
});

// Quit the app when all windows are closed (except on macOS)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

// Create a new window when the app is activated (macOS)
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});
```

I tried also reloading the window on my code or adding a timer to reload the window but without success.