diff --git a/docs/fiddles/features/web-bluetooth/preload.js b/docs/fiddles/features/web-bluetooth/preload.js index 6800eaccd9..1b1c636725 100644 --- a/docs/fiddles/features/web-bluetooth/preload.js +++ b/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) }) diff --git a/docs/fiddles/ipc/pattern-3/preload.js b/docs/fiddles/ipc/pattern-3/preload.js index 0c0402e53f..1df2941caa 100644 --- a/docs/fiddles/ipc/pattern-3/preload.js +++ b/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()) }) diff --git a/docs/fiddles/media/screenshot/take-screenshot/index.html b/docs/fiddles/media/screenshot/take-screenshot/index.html index 264899abdd..ca05880ef4 100644 --- a/docs/fiddles/media/screenshot/take-screenshot/index.html +++ b/docs/fiddles/media/screenshot/take-screenshot/index.html @@ -17,9 +17,6 @@

Clicking the demo button will take a screenshot of your current screen and open it in your default viewer.

- + diff --git a/docs/fiddles/media/screenshot/take-screenshot/main.js b/docs/fiddles/media/screenshot/take-screenshot/main.js index 73b8b97870..2ce55cd94a 100644 --- a/docs/fiddles/media/screenshot/take-screenshot/main.js +++ b/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') } } diff --git a/docs/fiddles/media/screenshot/take-screenshot/preload.js b/docs/fiddles/media/screenshot/take-screenshot/preload.js new file mode 100644 index 0000000000..9af9f2faac --- /dev/null +++ b/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) +}) diff --git a/docs/fiddles/media/screenshot/take-screenshot/renderer.js b/docs/fiddles/media/screenshot/take-screenshot/renderer.js index 4712a2f0ea..6b4329e7df 100644 --- a/docs/fiddles/media/screenshot/take-screenshot/renderer.js +++ b/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 - } -} diff --git a/docs/fiddles/menus/customize-menus/index.html b/docs/fiddles/menus/customize-menus/index.html index 798745c173..1fda8f5ecd 100644 --- a/docs/fiddles/menus/customize-menus/index.html +++ b/docs/fiddles/menus/customize-menus/index.html @@ -119,10 +119,6 @@ - - + diff --git a/docs/fiddles/menus/customize-menus/main.js b/docs/fiddles/menus/customize-menus/main.js index 63289526d9..3fc16f847d 100644 --- a/docs/fiddles/menus/customize-menus/main.js +++ b/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') } }) diff --git a/docs/fiddles/menus/customize-menus/preload.js b/docs/fiddles/menus/customize-menus/preload.js new file mode 100644 index 0000000000..00bc6be37d --- /dev/null +++ b/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') +}) diff --git a/docs/fiddles/menus/customize-menus/renderer.js b/docs/fiddles/menus/customize-menus/renderer.js index 372db5ce68..89ba97dcc5 100644 --- a/docs/fiddles/menus/customize-menus/renderer.js +++ b/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() }) diff --git a/docs/fiddles/menus/shortcuts/main.js b/docs/fiddles/menus/shortcuts/main.js index 1b295eef49..9207702d44 100644 --- a/docs/fiddles/menus/shortcuts/main.js +++ b/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', () => { diff --git a/docs/fiddles/native-ui/dialogs/error-dialog/index.html b/docs/fiddles/native-ui/dialogs/error-dialog/index.html index bce7d0db84..8f694ed265 100644 --- a/docs/fiddles/native-ui/dialogs/error-dialog/index.html +++ b/docs/fiddles/native-ui/dialogs/error-dialog/index.html @@ -73,9 +73,6 @@ ipcMain.on('open-error-dialog', (event) => { - + diff --git a/docs/fiddles/native-ui/dialogs/error-dialog/main.js b/docs/fiddles/native-ui/dialogs/error-dialog/main.js index bfedd4a3be..149cf4e0f5 100644 --- a/docs/fiddles/native-ui/dialogs/error-dialog/main.js +++ b/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') } }) diff --git a/docs/fiddles/native-ui/dialogs/error-dialog/preload.js b/docs/fiddles/native-ui/dialogs/error-dialog/preload.js new file mode 100644 index 0000000000..e47c74f614 --- /dev/null +++ b/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') +}) diff --git a/docs/fiddles/native-ui/dialogs/error-dialog/renderer.js b/docs/fiddles/native-ui/dialogs/error-dialog/renderer.js index 0dff640bf8..20ae84f772 100644 --- a/docs/fiddles/native-ui/dialogs/error-dialog/renderer.js +++ b/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() }) diff --git a/docs/fiddles/native-ui/dialogs/information-dialog/index.html b/docs/fiddles/native-ui/dialogs/information-dialog/index.html index 4823946cb8..8e28f86362 100644 --- a/docs/fiddles/native-ui/dialogs/information-dialog/index.html +++ b/docs/fiddles/native-ui/dialogs/information-dialog/index.html @@ -96,9 +96,6 @@ ipcMain.on('open-information-dialog', (event) => { - + diff --git a/docs/fiddles/native-ui/dialogs/information-dialog/main.js b/docs/fiddles/native-ui/dialogs/information-dialog/main.js index bb0196e817..bbe460464c 100644 --- a/docs/fiddles/native-ui/dialogs/information-dialog/main.js +++ b/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 diff --git a/docs/fiddles/native-ui/dialogs/information-dialog/preload.js b/docs/fiddles/native-ui/dialogs/information-dialog/preload.js new file mode 100644 index 0000000000..5191aacea2 --- /dev/null +++ b/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') +}) diff --git a/docs/fiddles/native-ui/dialogs/information-dialog/renderer.js b/docs/fiddles/native-ui/dialogs/information-dialog/renderer.js index f6fe51bac7..57c8fcc006 100644 --- a/docs/fiddles/native-ui/dialogs/information-dialog/renderer.js +++ b/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 }) diff --git a/docs/fiddles/native-ui/dialogs/open-file-or-directory/index.html b/docs/fiddles/native-ui/dialogs/open-file-or-directory/index.html index 226888218f..9443a62ce9 100644 --- a/docs/fiddles/native-ui/dialogs/open-file-or-directory/index.html +++ b/docs/fiddles/native-ui/dialogs/open-file-or-directory/index.html @@ -100,9 +100,6 @@ ipc.on('open-file-dialog-sheet', function (event) { - + diff --git a/docs/fiddles/native-ui/dialogs/open-file-or-directory/main.js b/docs/fiddles/native-ui/dialogs/open-file-or-directory/main.js index 52ead02c9d..5721c69869 100644 --- a/docs/fiddles/native-ui/dialogs/open-file-or-directory/main.js +++ b/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 diff --git a/docs/fiddles/native-ui/dialogs/open-file-or-directory/preload.js b/docs/fiddles/native-ui/dialogs/open-file-or-directory/preload.js new file mode 100644 index 0000000000..ace7c2d165 --- /dev/null +++ b/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') +}) diff --git a/docs/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js b/docs/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js index 0c5efd6735..badfd8776e 100644 --- a/docs/fiddles/native-ui/dialogs/open-file-or-directory/renderer.js +++ b/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}` }) diff --git a/docs/fiddles/native-ui/dialogs/save-dialog/index.html b/docs/fiddles/native-ui/dialogs/save-dialog/index.html index 6165af46ae..d8e97edbf8 100644 --- a/docs/fiddles/native-ui/dialogs/save-dialog/index.html +++ b/docs/fiddles/native-ui/dialogs/save-dialog/index.html @@ -83,9 +83,6 @@ ipcMain.on('save-dialog', (event) => { - + diff --git a/docs/fiddles/native-ui/dialogs/save-dialog/main.js b/docs/fiddles/native-ui/dialogs/save-dialog/main.js index d33fa33d32..44c8fa1a1e 100644 --- a/docs/fiddles/native-ui/dialogs/save-dialog/main.js +++ b/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 diff --git a/docs/fiddles/native-ui/dialogs/save-dialog/preload.js b/docs/fiddles/native-ui/dialogs/save-dialog/preload.js new file mode 100644 index 0000000000..6d63c2e455 --- /dev/null +++ b/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') +}) diff --git a/docs/fiddles/native-ui/dialogs/save-dialog/renderer.js b/docs/fiddles/native-ui/dialogs/save-dialog/renderer.js index ae06226891..c36088c775 100644 --- a/docs/fiddles/native-ui/dialogs/save-dialog/renderer.js +++ b/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}` }) diff --git a/docs/fiddles/native-ui/drag-and-drop/index.html b/docs/fiddles/native-ui/drag-and-drop/index.html index 5f7d4853c3..0ed547401f 100644 --- a/docs/fiddles/native-ui/drag-and-drop/index.html +++ b/docs/fiddles/native-ui/drag-and-drop/index.html @@ -68,9 +68,6 @@ ipcMain.on('ondragstart', (event, filepath) => { - + diff --git a/docs/fiddles/native-ui/drag-and-drop/main.js b/docs/fiddles/native-ui/drag-and-drop/main.js index 2186de038c..b4dce1a663 100644 --- a/docs/fiddles/native-ui/drag-and-drop/main.js +++ b/docs/fiddles/native-ui/drag-and-drop/main.js @@ -1,5 +1,7 @@ // Modules to control application life and create native browser window const { app, BrowserWindow, ipcMain, nativeImage, 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. let mainWindow @@ -10,8 +12,7 @@ function createWindow () { width: 800, height: 600, webPreferences: { - contextIsolation: false, - nodeIntegration: true + preload: path.join(__dirname, 'preload.js') } }) @@ -58,7 +59,8 @@ app.on('activate', function () { } }) -ipcMain.on('ondragstart', (event, filepath) => { +ipcMain.on('ondragstart', (event) => { + const filepath = path.join(__dirname, 'renderer.js') const icon = nativeImage.createFromDataURL('data:image/png;base64,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') event.sender.startDrag({ diff --git a/docs/fiddles/native-ui/drag-and-drop/preload.js b/docs/fiddles/native-ui/drag-and-drop/preload.js new file mode 100644 index 0000000000..bad5ed4c84 --- /dev/null +++ b/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') +}) diff --git a/docs/fiddles/native-ui/drag-and-drop/renderer.js b/docs/fiddles/native-ui/drag-and-drop/renderer.js index 48df46b460..031601023d 100644 --- a/docs/fiddles/native-ui/drag-and-drop/renderer.js +++ b/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() }) diff --git a/docs/fiddles/native-ui/external-links-file-manager/index.html b/docs/fiddles/native-ui/external-links-file-manager/index.html index 32e6dd1da2..83788b8e4f 100644 --- a/docs/fiddles/native-ui/external-links-file-manager/index.html +++ b/docs/fiddles/native-ui/external-links-file-manager/index.html @@ -95,10 +95,6 @@ for (const link of links) { - - + diff --git a/docs/fiddles/native-ui/external-links-file-manager/main.js b/docs/fiddles/native-ui/external-links-file-manager/main.js index f3e3c0ec62..b98a8669b0 100644 --- a/docs/fiddles/native-ui/external-links-file-manager/main.js +++ b/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') } }) diff --git a/docs/fiddles/native-ui/external-links-file-manager/preload.js b/docs/fiddles/native-ui/external-links-file-manager/preload.js new file mode 100644 index 0000000000..9be85a13ea --- /dev/null +++ b/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) +}) diff --git a/docs/fiddles/native-ui/external-links-file-manager/renderer.js b/docs/fiddles/native-ui/external-links-file-manager/renderer.js index 7bbea2ca1a..6903268fd0 100644 --- a/docs/fiddles/native-ui/external-links-file-manager/renderer.js +++ b/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') }) diff --git a/docs/fiddles/native-ui/notifications/index.html b/docs/fiddles/native-ui/notifications/index.html index 27725a448d..0eb9e213d5 100644 --- a/docs/fiddles/native-ui/notifications/index.html +++ b/docs/fiddles/native-ui/notifications/index.html @@ -59,9 +59,6 @@ - + diff --git a/docs/fiddles/native-ui/notifications/main.js b/docs/fiddles/native-ui/notifications/main.js index f3e3c0ec62..f880a67a49 100644 --- a/docs/fiddles/native-ui/notifications/main.js +++ b/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. diff --git a/docs/fiddles/system/system-app-user-information/app-information/index.html b/docs/fiddles/system/system-app-user-information/app-information/index.html index b08a8d0c82..f8b0e38c3f 100644 --- a/docs/fiddles/system/system-app-user-information/app-information/index.html +++ b/docs/fiddles/system/system-app-user-information/app-information/index.html @@ -18,9 +18,6 @@ - + \ No newline at end of file diff --git a/docs/fiddles/system/system-app-user-information/app-information/main.js b/docs/fiddles/system/system-app-user-information/app-information/main.js index 7ec2bd5d32..247bad8f52 100644 --- a/docs/fiddles/system/system-app-user-information/app-information/main.js +++ b/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') } } diff --git a/docs/fiddles/system/system-app-user-information/app-information/preload.js b/docs/fiddles/system/system-app-user-information/app-information/preload.js new file mode 100644 index 0000000000..92e3efa325 --- /dev/null +++ b/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') +}) diff --git a/docs/fiddles/system/system-app-user-information/app-information/renderer.js b/docs/fiddles/system/system-app-user-information/app-information/renderer.js index 62705b3770..35b201bf40 100644 --- a/docs/fiddles/system/system-app-user-information/app-information/renderer.js +++ b/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 }) diff --git a/docs/fiddles/system/system-information/get-version-information/index.html b/docs/fiddles/system/system-information/get-version-information/index.html index de0a39b423..3bd06b382e 100644 --- a/docs/fiddles/system/system-information/get-version-information/index.html +++ b/docs/fiddles/system/system-information/get-version-information/index.html @@ -20,7 +20,5 @@ - + diff --git a/docs/fiddles/system/system-information/get-version-information/main.js b/docs/fiddles/system/system-information/get-version-information/main.js index 14ffef1acd..e1a7434a52 100644 --- a/docs/fiddles/system/system-information/get-version-information/main.js +++ b/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') } } diff --git a/docs/fiddles/system/system-information/get-version-information/preload.js b/docs/fiddles/system/system-information/get-version-information/preload.js new file mode 100644 index 0000000000..fa4eab9154 --- /dev/null +++ b/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) diff --git a/docs/fiddles/system/system-information/get-version-information/renderer.js b/docs/fiddles/system/system-information/get-version-information/renderer.js index 40f7f2cf2c..3e7c22e5c2 100644 --- a/docs/fiddles/system/system-information/get-version-information/renderer.js +++ b/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 }) diff --git a/docs/fiddles/windows/manage-windows/frameless-window/index.html b/docs/fiddles/windows/manage-windows/frameless-window/index.html index 5041b1939e..69ef074f23 100644 --- a/docs/fiddles/windows/manage-windows/frameless-window/index.html +++ b/docs/fiddles/windows/manage-windows/frameless-window/index.html @@ -68,10 +68,6 @@ - - + diff --git a/docs/fiddles/windows/manage-windows/frameless-window/main.js b/docs/fiddles/windows/manage-windows/frameless-window/main.js index 021679fc5e..507242962a 100644 --- a/docs/fiddles/windows/manage-windows/frameless-window/main.js +++ b/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') } }) diff --git a/docs/fiddles/windows/manage-windows/frameless-window/preload.js b/docs/fiddles/windows/manage-windows/frameless-window/preload.js new file mode 100644 index 0000000000..0feaa67675 --- /dev/null +++ b/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) +}) diff --git a/docs/fiddles/windows/manage-windows/frameless-window/renderer.js b/docs/fiddles/windows/manage-windows/frameless-window/renderer.js index b8aafe29d1..7638f56099 100644 --- a/docs/fiddles/windows/manage-windows/frameless-window/renderer.js +++ b/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,

Hello World!

Close this Window' - ipcRenderer.send('create-frameless-window', { url }) + window.electronAPI.createFramelessWindow({ url }) }) diff --git a/docs/fiddles/windows/manage-windows/manage-window-state/index.html b/docs/fiddles/windows/manage-windows/manage-window-state/index.html index eca1d0a475..9c6236dd77 100644 --- a/docs/fiddles/windows/manage-windows/manage-window-state/index.html +++ b/docs/fiddles/windows/manage-windows/manage-window-state/index.html @@ -55,10 +55,6 @@ - - + diff --git a/docs/fiddles/windows/manage-windows/manage-window-state/main.js b/docs/fiddles/windows/manage-windows/manage-window-state/main.js index f41240b46f..afb4223392 100644 --- a/docs/fiddles/windows/manage-windows/manage-window-state/main.js +++ b/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') } }) diff --git a/docs/fiddles/windows/manage-windows/manage-window-state/preload.js b/docs/fiddles/windows/manage-windows/manage-window-state/preload.js new file mode 100644 index 0000000000..d604ee529c --- /dev/null +++ b/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()) +}) diff --git a/docs/fiddles/windows/manage-windows/manage-window-state/renderer.js b/docs/fiddles/windows/manage-windows/manage-window-state/renderer.js index 2efe3199a8..c152fd5ae1 100644 --- a/docs/fiddles/windows/manage-windows/manage-window-state/renderer.js +++ b/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() }) diff --git a/docs/fiddles/windows/manage-windows/new-window/index.html b/docs/fiddles/windows/manage-windows/new-window/index.html index 19e3c33e0b..3cd5df4a17 100644 --- a/docs/fiddles/windows/manage-windows/new-window/index.html +++ b/docs/fiddles/windows/manage-windows/new-window/index.html @@ -9,17 +9,14 @@

The BrowserWindow module gives you the ability to create new windows in your app.

There are a lot of options when creating a new window. A few are in this demo, but visit the documentation(opens in new window) -

-

ProTip

- Use an invisible browser window to run background tasks. -

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 show property to false when defining the new window.

- 
var win = new BrowserWindow({
+  

+    
ProTip

+    Use an invisible browser window to run background tasks.
+    
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 show property to false when defining the new window.

+    
var win = new BrowserWindow({
   width: 400, height: 225, show: false
 })

-          

-    
+
+ diff --git a/docs/fiddles/windows/manage-windows/new-window/main.js b/docs/fiddles/windows/manage-windows/new-window/main.js index 4e2f9c6beb..109055ac80 100644 --- a/docs/fiddles/windows/manage-windows/new-window/main.js +++ b/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') } }) diff --git a/docs/fiddles/windows/manage-windows/new-window/preload.js b/docs/fiddles/windows/manage-windows/new-window/preload.js new file mode 100644 index 0000000000..53019d908f --- /dev/null +++ b/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) +}) diff --git a/docs/fiddles/windows/manage-windows/new-window/renderer.js b/docs/fiddles/windows/manage-windows/new-window/renderer.js index ce4b7a4b51..22caea84a3 100644 --- a/docs/fiddles/windows/manage-windows/new-window/renderer.js +++ b/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 }) }) diff --git a/docs/fiddles/windows/manage-windows/window-events/index.html b/docs/fiddles/windows/manage-windows/window-events/index.html index 028a70b6c1..5c05a3c9a2 100644 --- a/docs/fiddles/windows/manage-windows/window-events/index.html +++ b/docs/fiddles/windows/manage-windows/window-events/index.html @@ -49,10 +49,6 @@ - - + diff --git a/docs/fiddles/windows/manage-windows/window-events/main.js b/docs/fiddles/windows/manage-windows/window-events/main.js index a7fd20cc92..5f10651d24 100644 --- a/docs/fiddles/windows/manage-windows/window-events/main.js +++ b/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', () => { diff --git a/docs/fiddles/windows/manage-windows/window-events/preload.js b/docs/fiddles/windows/manage-windows/window-events/preload.js new file mode 100644 index 0000000000..b33f860a64 --- /dev/null +++ b/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()) +}) diff --git a/docs/fiddles/windows/manage-windows/window-events/renderer.js b/docs/fiddles/windows/manage-windows/window-events/renderer.js index 99f9909526..814605ecbe 100644 --- a/docs/fiddles/windows/manage-windows/window-events/renderer.js +++ b/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() })