docs: enable contextIsolation in fiddles (#39613)

docs/fiddles/features/web-bluetooth/preload.js

@@ -1,7 +1,7 @@
 const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
-  cancelBluetoothRequest: (callback) => ipcRenderer.send('cancel-bluetooth-request', callback),
-  bluetoothPairingRequest: (callback) => ipcRenderer.on('bluetooth-pairing-request', callback),
+  cancelBluetoothRequest: () => ipcRenderer.send('cancel-bluetooth-request'),
+  bluetoothPairingRequest: (callback) => ipcRenderer.on('bluetooth-pairing-request', () => callback()),
   bluetoothPairingResponse: (response) => ipcRenderer.send('bluetooth-pairing-response', response)
 })

docs/fiddles/ipc/pattern-3/preload.js

@@ -1,5 +1,5 @@
 const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
-  handleCounter: (callback) => ipcRenderer.on('update-counter', callback)
+  handleCounter: (callback) => ipcRenderer.on('update-counter', () => callback())
 })

docs/fiddles/media/screenshot/take-screenshot/index.html

@@ -17,9 +17,6 @@
           <p>Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.</p>
         </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/media/screenshot/take-screenshot/main.js

@@ -1,14 +1,38 @@
-const { BrowserWindow, app, screen, ipcMain, desktopCapturer } = require('electron/main')
+const { BrowserWindow, app, screen, ipcMain, desktopCapturer, shell } = require('electron/main')
+const fs = require('node:fs').promises
+const os = require('node:os')
+const path = require('node:path')
 
 let mainWindow = null
 
-ipcMain.handle('get-screen-size', () => {
-  return screen.getPrimaryDisplay().workAreaSize
-})
+function determineScreenShotSize (devicePixelRatio) {
+  const screenSize = screen.getPrimaryDisplay().workAreaSize
+  const maxDimension = Math.max(screenSize.width, screenSize.height)
+  return {
+    width: maxDimension * devicePixelRatio,
+    height: maxDimension * devicePixelRatio
+  }
+}
 
-ipcMain.handle('get-sources', (event, options) => {
-  return desktopCapturer.getSources(options)
-})
+async function takeScreenshot (devicePixelRatio) {
+  const thumbSize = determineScreenShotSize(devicePixelRatio)
+  const options = { types: ['screen'], thumbnailSize: thumbSize }
+
+  const sources = await desktopCapturer.getSources(options)
+  for (const source of sources) {
+    const sourceName = source.name.toLowerCase()
+    if (sourceName === 'entire screen' || sourceName === 'screen 1') {
+      const screenshotPath = path.join(os.tmpdir(), 'screenshot.png')
+
+      await fs.writeFile(screenshotPath, source.thumbnail.toPNG())
+      shell.openExternal(`file://${screenshotPath}`)
+
+      return `Saved screenshot to: ${screenshotPath}`
+    }
+  }
+}
+
+ipcMain.handle('take-screenshot', (event, devicePixelRatio) => takeScreenshot(devicePixelRatio))
 
 function createWindow () {
   const windowOptions = {
@@ -16,8 +40,7 @@ function createWindow () {
     height: 300,
     title: 'Take a Screenshot',
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   }
 

docs/fiddles/media/screenshot/take-screenshot/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  takeScreenshot: () => ipcRenderer.invoke('take-screenshot', window.devicePixelRatio)
+})

docs/fiddles/media/screenshot/take-screenshot/renderer.js

@@ -1,37 +1,7 @@
-const { shell, ipcRenderer } = require('electron/renderer')
-
-const fs = require('node:fs').promises
-const os = require('node:os')
-const path = require('node:path')
-
 const screenshot = document.getElementById('screen-shot')
 const screenshotMsg = document.getElementById('screenshot-path')
 
 screenshot.addEventListener('click', async (event) => {
   screenshotMsg.textContent = 'Gathering screens...'
-  const thumbSize = await determineScreenShotSize()
-  const options = { types: ['screen'], thumbnailSize: thumbSize }
-
-  const sources = await ipcRenderer.invoke('get-sources', options)
-  for (const source of sources) {
-    const sourceName = source.name.toLowerCase()
-    if (sourceName === 'entire screen' || sourceName === 'screen 1') {
-      const screenshotPath = path.join(os.tmpdir(), 'screenshot.png')
-
-      await fs.writeFile(screenshotPath, source.thumbnail.toPNG())
-      shell.openExternal(`file://${screenshotPath}`)
-
-      const message = `Saved screenshot to: ${screenshotPath}`
-      screenshotMsg.textContent = message
-    }
-  }
+  screenshotMsg.textContent = await window.electronAPI.takeScreenshot()
 })
-
-async function determineScreenShotSize () {
-  const screenSize = await ipcRenderer.invoke('get-screen-size')
-  const maxDimension = Math.max(screenSize.width, screenSize.height)
-  return {
-    width: maxDimension * window.devicePixelRatio,
-    height: maxDimension * window.devicePixelRatio
-  }
-}

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()
 })

docs/fiddles/menus/shortcuts/main.js

@@ -9,11 +9,7 @@ function createWindow () {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 800,
-    height: 600,
-    webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
-    }
+    height: 600
   })
 
   globalShortcut.register('CommandOrControl+Alt+K', () => {

docs/fiddles/native-ui/dialogs/error-dialog/index.html

@@ -73,9 +73,6 @@ ipcMain.on('open-error-dialog', (event) => {
       </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/native-ui/dialogs/error-dialog/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/native-ui/dialogs/error-dialog/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openErrorDialog: () => ipcRenderer.send('open-error-dialog')
+})

docs/fiddles/native-ui/dialogs/error-dialog/renderer.js

@@ -1,7 +1,5 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const errorBtn = document.getElementById('error-dialog')
 
-errorBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-error-dialog')
+errorBtn.addEventListener('click', () => {
+  window.electronAPI.openErrorDialog()
 })

docs/fiddles/native-ui/dialogs/information-dialog/index.html

@@ -96,9 +96,6 @@ ipcMain.on('open-information-dialog', (event) => {
       </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/native-ui/dialogs/information-dialog/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -59,16 +59,14 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('open-information-dialog', event => {
+ipcMain.handle('open-information-dialog', async () => {
   const options = {
     type: 'info',
     title: 'Information',
     message: "This is an information dialog. Isn't it nice?",
     buttons: ['Yes', 'No']
   }
-  dialog.showMessageBox(options, index => {
-    event.sender.send('information-dialog-selection', index)
-  })
+  return (await dialog.showMessageBox(options)).response
 })
 
 // In this file you can include the rest of your app's specific main process

docs/fiddles/native-ui/dialogs/information-dialog/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openInformationDialog: () => ipcRenderer.invoke('open-information-dialog')
+})

docs/fiddles/native-ui/dialogs/information-dialog/renderer.js

@@ -1,14 +1,7 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const informationBtn = document.getElementById('information-dialog')
 
-informationBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-information-dialog')
-})
-
-ipcRenderer.on('information-dialog-selection', (event, index) => {
-  let message = 'You selected '
-  if (index === 0) message += 'yes.'
-  else message += 'no.'
+informationBtn.addEventListener('click', async () => {
+  const index = await window.electronAPI.openInformationDialog()
+  const message = `You selected: ${index === 0 ? 'yes' : 'no'}`
   document.getElementById('info-selection').innerHTML = message
 })

docs/fiddles/native-ui/dialogs/open-file-or-directory/index.html

@@ -100,9 +100,6 @@ ipc.on('open-file-dialog-sheet', function (event) {
       </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/native-ui/dialogs/open-file-or-directory/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -59,17 +59,11 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('open-file-dialog', event => {
-  dialog.showOpenDialog(
-    {
-      properties: ['openFile', 'openDirectory']
-    },
-    files => {
-      if (files) {
-        event.sender.send('selected-directory', files)
-      }
-    }
-  )
+ipcMain.handle('open-file-dialog', async () => {
+  const options = {
+    properties: ['openFile', 'openDirectory']
+  }
+  return (await dialog.showOpenDialog(options)).filePaths
 })
 
 // In this file you can include the rest of your app's specific main process

docs/fiddles/native-ui/dialogs/open-file-or-directory/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openFileDialog: () => ipcRenderer.invoke('open-file-dialog')
+})

docs/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js

@@ -1,11 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const selectDirBtn = document.getElementById('select-directory')
 
-selectDirBtn.addEventListener('click', event => {
-  ipcRenderer.send('open-file-dialog')
-})
-
-ipcRenderer.on('selected-directory', (event, path) => {
+selectDirBtn.addEventListener('click', async () => {
+  const path = await window.electronAPI.openFileDialog()
   document.getElementById('selected-file').innerHTML = `You selected: ${path}`
 })

docs/fiddles/native-ui/dialogs/save-dialog/index.html

@@ -83,9 +83,6 @@ ipcMain.on('save-dialog', (event) => {
       </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/native-ui/dialogs/save-dialog/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, dialog, shell } = require('electron/main')
+const path = require('node:path')
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +12,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -59,14 +59,12 @@ app.on('activate', function () {
   }
 })
 
-ipcMain.on('save-dialog', event => {
+ipcMain.handle('save-dialog', async () => {
   const options = {
     title: 'Save an Image',
     filters: [{ name: 'Images', extensions: ['jpg', 'png', 'gif'] }]
   }
-  dialog.showSaveDialog(options, filename => {
-    event.sender.send('saved-file', filename)
-  })
+  return (await dialog.showSaveDialog(options)).filePath
 })
 
 // In this file you can include the rest of your app's specific main process

docs/fiddles/native-ui/dialogs/save-dialog/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  saveDialog: () => ipcRenderer.invoke('save-dialog')
+})

docs/fiddles/native-ui/dialogs/save-dialog/renderer.js

@@ -1,12 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const saveBtn = document.getElementById('save-dialog')
 
-saveBtn.addEventListener('click', event => {
-  ipcRenderer.send('save-dialog')
-})
-
-ipcRenderer.on('saved-file', (event, path) => {
-  if (!path) path = 'No path'
+saveBtn.addEventListener('click', async () => {
+  const path = await window.electronAPI.saveDialog()
   document.getElementById('file-saved').innerHTML = `Path selected: ${path}`
 })

docs/fiddles/native-ui/drag-and-drop/index.html

@@ -68,9 +68,6 @@ ipcMain.on('ondragstart', (event, filepath) => {
       </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/native-ui/drag-and-drop/preload.js

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

docs/fiddles/native-ui/drag-and-drop/renderer.js

@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const dragFileLink = document.getElementById('drag-file-link')
 
 dragFileLink.addEventListener('dragstart', event => {
   event.preventDefault()
-  ipcRenderer.send('ondragstart', __filename)
+  window.electronAPI.dragStart()
 })

docs/fiddles/native-ui/external-links-file-manager/index.html

@@ -95,10 +95,6 @@ for (const link of links) {
         </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/native-ui/external-links-file-manager/main.js

@@ -1,5 +1,15 @@
 // Modules to control application life and create native browser window
-const { app, BrowserWindow, shell } = require('electron/main')
+const { app, BrowserWindow, shell, ipcMain } = require('electron/main')
+const path = require('node:path')
+const os = require('node:os')
+
+ipcMain.on('open-home-dir', () => {
+  shell.showItemInFolder(os.homedir())
+})
+
+ipcMain.on('open-external', (event, url) => {
+  shell.openExternal(url)
+})
 
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
@@ -11,8 +21,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/native-ui/external-links-file-manager/preload.js

@@ -0,0 +1,6 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  openHomeDir: () => ipcRenderer.send('open-home-dir'),
+  openExternal: (url) => ipcRenderer.send('open-external', url)
+})

docs/fiddles/native-ui/external-links-file-manager/renderer.js

@@ -1,13 +1,10 @@
-const { shell } = require('electron/renderer')
-const os = require('node:os')
-
 const exLinksBtn = document.getElementById('open-ex-links')
 const fileManagerBtn = document.getElementById('open-file-manager')
 
 fileManagerBtn.addEventListener('click', (event) => {
-  shell.showItemInFolder(os.homedir())
+  window.electronAPI.openHomeDir()
 })
 
 exLinksBtn.addEventListener('click', (event) => {
-  shell.openExternal('https://electronjs.org')
+  window.electronAPI.openExternal('https://electronjs.org')
 })

docs/fiddles/native-ui/notifications/index.html

@@ -59,9 +59,6 @@
       </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/native-ui/notifications/main.js

@@ -9,11 +9,7 @@ function createWindow () {
   // Create the browser window.
   mainWindow = new BrowserWindow({
     width: 800,
-    height: 600,
-    webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
-    }
+    height: 600
   })
 
   // and load the index.html of the app.

docs/fiddles/system/system-app-user-information/app-information/index.html

@@ -18,9 +18,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/system/system-app-user-information/app-information/main.js

@@ -1,4 +1,5 @@
 const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 let mainWindow = null
 
@@ -10,8 +11,7 @@ function createWindow () {
     height: 400,
     title: 'Get app information',
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   }
 

docs/fiddles/system/system-app-user-information/app-information/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  getAppPath: () => ipcRenderer.invoke('get-app-path')
+})

docs/fiddles/system/system-app-user-information/app-information/renderer.js

@@ -1,9 +1,7 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const appInfoBtn = document.getElementById('app-info')
 
 appInfoBtn.addEventListener('click', async () => {
-  const path = await ipcRenderer.invoke('get-app-path')
+  const path = await window.electronAPI.getAppPath()
   const message = `This app is located at: ${path}`
   document.getElementById('got-app-info').innerHTML = message
 })

docs/fiddles/system/system-information/get-version-information/index.html

@@ -20,7 +20,5 @@
       </div>
     </div>
   </body>
-  <script>
-    require('./renderer.js')
-  </script>
+  <script src="renderer.js"></script>
 </html>

docs/fiddles/system/system-information/get-version-information/main.js

@@ -1,4 +1,5 @@
 const { app, BrowserWindow, shell } = require('electron/main')
+const path = require('node:path')
 
 let mainWindow = null
 
@@ -8,8 +9,7 @@ function createWindow () {
     height: 400,
     title: 'Get version information',
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   }
 

docs/fiddles/system/system-information/get-version-information/preload.js

@@ -0,0 +1,3 @@
+const { contextBridge } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronVersion', process.versions.electron)

docs/fiddles/system/system-information/get-version-information/renderer.js

@@ -1,8 +1,6 @@
 const versionInfoBtn = document.getElementById('version-info')
 
-const electronVersion = process.versions.electron
-
 versionInfoBtn.addEventListener('click', () => {
-  const message = `This app is using Electron version: ${electronVersion}`
+  const message = `This app is using Electron version: ${window.electronVersion}`
   document.getElementById('got-version-info').innerHTML = message
 })

docs/fiddles/windows/manage-windows/frameless-window/index.html

@@ -68,10 +68,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/windows/manage-windows/frameless-window/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 ipcMain.on('create-frameless-window', (event, { url }) => {
   const win = new BrowserWindow({ frame: false })
@@ -12,8 +13,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/windows/manage-windows/frameless-window/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  createFramelessWindow: (args) => ipcRenderer.send('create-frameless-window', args)
+})

docs/fiddles/windows/manage-windows/frameless-window/renderer.js

@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const newWindowBtn = document.getElementById('frameless-window')
 
 newWindowBtn.addEventListener('click', () => {
   const url = 'data:text/html,<h2>Hello World!</h2><a id="close" href="javascript:window.close()">Close this Window</a>'
-  ipcRenderer.send('create-frameless-window', { url })
+  window.electronAPI.createFramelessWindow({ url })
 })

docs/fiddles/windows/manage-windows/manage-window-state/index.html

@@ -55,10 +55,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/windows/manage-windows/manage-window-state/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 ipcMain.on('create-demo-window', (event) => {
   const win = new BrowserWindow({ width: 400, height: 275 })
@@ -22,8 +23,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/windows/manage-windows/manage-window-state/preload.js

@@ -0,0 +1,6 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  createDemoWindow: () => ipcRenderer.send('create-demo-window'),
+  onBoundsChanged: (callback) => ipcRenderer.on('bounds-changed', () => callback())
+})

docs/fiddles/windows/manage-windows/manage-window-state/renderer.js

@@ -1,13 +1,11 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const manageWindowBtn = document.getElementById('manage-window')
 
-ipcRenderer.on('bounds-changed', (event, bounds) => {
+window.electronAPI.onBoundsChanged((event, bounds) => {
   const manageWindowReply = document.getElementById('manage-window-reply')
   const message = `Size: ${bounds.size} Position: ${bounds.position}`
   manageWindowReply.textContent = message
 })
 
 manageWindowBtn.addEventListener('click', (event) => {
-  ipcRenderer.send('create-demo-window')
+  window.electronAPI.createDemoWindow()
 })

docs/fiddles/windows/manage-windows/new-window/index.html

@@ -9,17 +9,14 @@
   <button id="new-window">View Demo</button>
   <p>The <code>BrowserWindow</code> module gives you the ability to create new windows in your app.</p>
   <p>There are a lot of options when creating a new window. A few are in this demo, but visit the <a href="https://www.electronjs.org/docs/latest/api/browser-window">documentation<span>(opens in new window)</span></a>
-<div>
-            <h2>ProTip</h2>
-            <strong>Use an invisible browser window to run background tasks.</strong>
-            <p>You can set a new browser window to not be shown (be invisible) in order to use that additional renderer process as a kind of new thread in which to run JavaScript in the background of your app. You do this by setting the <code>show</code> property to <code>false</code> when defining the new window.</p>
-            <pre><code><span>var</span> win = <span>new</span> BrowserWindow({
+  <div>
+    <h2>ProTip</h2>
+    <strong>Use an invisible browser window to run background tasks.</strong>
+    <p>You can set a new browser window to not be shown (be invisible) in order to use that additional renderer process as a kind of new thread in which to run JavaScript in the background of your app. You do this by setting the <code>show</code> property to <code>false</code> when defining the new window.</p>
+    <pre><code><span>var</span> win = <span>new</span> BrowserWindow({
   <span>width</span>: <span>400</span>, <span>height</span>: <span>225</span>, <span>show</span>: <span>false</span>
 })</code></pre>
-          </div>
-    <script>
-    // You can also require other files to run in this process
-    require('./renderer.js')
-  </script>
+  </div>
+  <script src="renderer.js"></script>
 </body>
 </html>

docs/fiddles/windows/manage-windows/new-window/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 ipcMain.on('new-window', (event, { url, width, height }) => {
   const win = new BrowserWindow({ width, height })
@@ -12,8 +13,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 

docs/fiddles/windows/manage-windows/new-window/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  newWindow: (args) => ipcRenderer.send('new-window', args)
+})

docs/fiddles/windows/manage-windows/new-window/renderer.js

@@ -1,8 +1,6 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const newWindowBtn = document.getElementById('new-window')
 
 newWindowBtn.addEventListener('click', (event) => {
   const url = 'https://electronjs.org'
-  ipcRenderer.send('new-window', { url, width: 400, height: 320 })
+  window.electronAPI.newWindow({ url, width: 400, height: 320 })
 })

docs/fiddles/windows/manage-windows/window-events/index.html

@@ -49,10 +49,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/windows/manage-windows/window-events/main.js

@@ -1,5 +1,6 @@
 // Modules to control application life and create native browser window
 const { app, BrowserWindow, ipcMain, shell } = require('electron/main')
+const path = require('node:path')
 
 function createWindow () {
   // Create the browser window.
@@ -7,8 +8,7 @@ function createWindow () {
     width: 800,
     height: 600,
     webPreferences: {
-      contextIsolation: false,
-      nodeIntegration: true
+      preload: path.join(__dirname, 'preload.js')
     }
   })
 
@@ -30,6 +30,7 @@ function createWindow () {
     demoWindow = new BrowserWindow({ width: 600, height: 400 })
     demoWindow.loadURL('https://electronjs.org')
     demoWindow.on('close', () => {
+      demoWindow = undefined
       mainWindow.webContents.send('window-close')
     })
     demoWindow.on('focus', () => {

docs/fiddles/windows/manage-windows/window-events/preload.js

@@ -0,0 +1,9 @@
+const { contextBridge, ipcRenderer } = require('electron/renderer')
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  showDemoWindow: () => ipcRenderer.send('show-demo-window'),
+  focusDemoWindow: () => ipcRenderer.send('focus-demo-window'),
+  onWindowFocus: (callback) => ipcRenderer.on('window-focus', () => callback()),
+  onWindowBlur: (callback) => ipcRenderer.on('window-blur', () => callback()),
+  onWindowClose: (callback) => ipcRenderer.on('window-close', () => callback())
+})

docs/fiddles/windows/manage-windows/window-events/renderer.js

@@ -1,5 +1,3 @@
-const { ipcRenderer } = require('electron/renderer')
-
 const listenToWindowBtn = document.getElementById('listen-to-window')
 const focusModalBtn = document.getElementById('focus-on-modal-window')
 
@@ -15,13 +13,13 @@ const showFocusBtn = (btn) => {
   focusModalBtn.addEventListener('click', focusWindow)
 }
 const focusWindow = () => {
-  ipcRenderer.send('focus-demo-window')
+  window.electronAPI.focusDemoWindow()
 }
 
-ipcRenderer.on('window-focus', hideFocusBtn)
-ipcRenderer.on('window-close', hideFocusBtn)
-ipcRenderer.on('window-blur', showFocusBtn)
+window.electronAPI.onWindowFocus(hideFocusBtn)
+window.electronAPI.onWindowClose(hideFocusBtn)
+window.electronAPI.onWindowBlur(showFocusBtn)
 
 listenToWindowBtn.addEventListener('click', () => {
-  ipcRenderer.send('show-demo-window')
+  window.electronAPI.showDemoWindow()
 })