docs: enable contextIsolation in fiddles (#39613)

docs/fiddles/menus/customize-menus/index.html

@@ -119,10 +119,6 @@
         </div>
       </div>
     </div>
-
-    <script>
-      // You can also require other files to run in this process
-      require("./renderer.js");
-    </script>
+    <script src="renderer.js"></script>
   </body>
 </html>

docs/fiddles/menus/customize-menus/main.js

@@ -9,6 +9,7 @@ const {
   dialog,
   autoUpdater
 } = require('electron/main')
+const path = require('node:path')
 
 const menu = new Menu()
 menu.append(new MenuItem({ label: 'Hello' }))
@@ -295,8 +296,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/menus/customize-menus/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  showContextMenu: () => ipcRenderer.send('show-context-menu')
+})

docs/fiddles/menus/customize-menus/renderer.js

@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 // Tell main process to show the menu when demo button is clicked
 const contextMenuBtn = document.getElementById('context-menu')
 
 contextMenuBtn.addEventListener('click', () => {
-  ipcRenderer.send('show-context-menu')
+  window.electronAPI.showContextMenu()
 })