Skip to content

Instantly share code, notes, and snippets.

@ckerr

ckerr/index.html

Created February 11, 2021 18:01
Show Gist options
  • Save ckerr/d467fb8d1c884b306b0c5fc0f4d36fd5 to your computer and use it in GitHub Desktop.
Save ckerr/d467fb8d1c884b306b0c5fc0f4d36fd5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
Raw
main.js
/*jshint esversion: 8 */
const { BrowserView, BrowserWindow, app } = require('electron');
const path = require('path'); //to be used in the preload options
function appInit() {
const mainWindow = new BrowserWindow({
width: 1301,
height: 800,
minWidth: 1024,
minHeight: 700,
backgroundColor: '#2E2E2E'
});
const mainView = new BrowserView();
mainWindow.addBrowserView(mainView);
mainView.webContents.openDevTools();
mainView.setBounds({
x: 0,
y: 0,
width: 961,
height: 800,
minWidth: 665,
webPreferences: {
preload: path.join(__dirname, '/preload.js'), //this does not work!
nodeIntegration: true //This does not seem to work either
}
});
mainView.setAutoResize({ horizontal: true });
let mainViewURL = 'http://www.electronjs.org/';
mainView.webContents.loadURL(mainViewURL);
const sideView = new BrowserView();
mainWindow.addBrowserView(sideView);
sideView.webContents.openDevTools();
sideView.setBounds({
x: 961,
y: 0,
width: 360,
height: 800,
resizable: false,
minWidth: 360,
maxWidth: 360,
webPreferences: {
preload: path.join(__dirname, '/preload.js'), //this does not work!
nodeIntegration: true ,//This does not seem to work either
nodeIntegrationInWorker: true //This does not seem to work either
}
});
sideView.webContents.loadFile(__dirname + '/index.html');
app.on('window-all-closed', () => {
mainWindow.removeBrowserView(mainView);
mainWindow.removeBrowserView(sideView);
app.quit();
});
}
app.whenReady().then(appInit);
Raw
package.json
{
"name": "electron-quick-start",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^11.2.3"
}
}
Raw
preload.js
//This script does not seem to be preloaded in BrowserViews
console.log('preload.js 0');//not running...
alert('preload.js 0');//not running...
require('fs');//example nodejs function that should run if node is available.
Raw
renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.
@Shu-Ji
Copy link

Shu-Ji commented Mar 23, 2021

The webPreferences should push into the constructor of new BrowserView()(if you use typescript, you will do the correct):

But what's worse, it's also not wok :(

const view = new BrowserView({
            webPreferences: {
                partition: `persist:${args.id}`,  // this works
                nodeIntegration: true,  // not work
                contextIsolation: false,  // not work
                preload: '/tmp/preload.js',  // now work
            },
        });

The setBounds just receive a Rectangle:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment