docs: enable contextIsolation in fiddles (#39613)

This commit is contained in:
Milan Burda 2023-08-29 21:52:16 +02:00 committed by GitHub
parent 2e79f34c84
commit 9280b79112
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
61 changed files with 206 additions and 233 deletions

View file

@ -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>

View file

@ -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')
}
})

View file

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

View file

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

View file

@ -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>

View file

@ -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

View file

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

View file

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

View file

@ -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>

View file

@ -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

View file

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

View file

@ -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}`
})

View file

@ -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>

View file

@ -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

View file

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

View file

@ -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}`
})

View file

@ -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>

View file

@ -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({

View file

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

View file

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

View file

@ -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>

View file

@ -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')
}
})

View file

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

View file

@ -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')
})

View file

@ -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>

View file

@ -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.