docs: enable contextIsolation in fiddles (#39613)

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