i started to work with electron tabs and i can show the sites, that i wanted. Now i wanted to show my own little html site in the app.
The HTML site has a button and when you click it, there should be a message in the console. But the .js data (renderer) will not be executed. When i just load the site without the tabview, everything works. I found out, that electron don't load the js script in the DOM. But i dont know a solution for this problem. Here the code for the examples:
this worked
main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
webviewTag: true,
nodeIntegration: true,
contextIsolation: false
}
})
// and load the index.html of the app.
mainWindow.loadFile('page.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
html site
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="Hello">Say hello</button>
<p id="text">Guten Tag</p>
<script src="renderer.js"></script>
</body>
</html>
renderer.js
const {dialog} = require ('electron');
const button = document.getElementById("Hello");
console.log (button);
function hello () {
const label = document.getElementById("text");
console.log(label.innerHTML);
label.innerHTML = "Hello";
console.log("hello");
}
if (button) {
button.addEventListener('click',hello);
}
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": "^21.2.0"
},
"dependencies": {
"electron-tabs": "^1.0.1"
}
}
2nd exapmle (didnt work):
is the same code but in the main you load the page.html and the you need the tab.js.
page.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="Hello">Say hello</button>
<p id="text">Guten Tag</p>
<script src="renderer.js"></script>
</body>
</html>
Tabs.js
tabGroup = document.querySelector("tab-group");
tabGroup.on("ready", () => console.info("TabGroup is ready"));
tabGroup.setDefaultTab({
title: "Wikipedia",
src: "https://www.wikipedia.org/",
active: true,
ready: () => console.info("New Tab is ready")
});
tabGroup.addTab({
title: "electron-tabs on NPM",
src: "https://www.npmjs.com/package/electron-tabs",
badge: {
text: "5",
classname: "my-badge"
}
});
tabGroup.addTab({
title: "electron-tabs on Github",
src: "https://www.youtube.com/",
active: true
});
tabGroup.addTab({
title: "My Custom Tab",
src: "page.html",
ready: function(tab) {
tab.element.classList.add("my-custom-tab");
}
});
Related
I've been trying to get a preload script to run on my Electron app but it appears to either not be running at all or just not working properly.
I currently have a main file, a preload file, a render file, and a html. I'm just trying to do the stuff from the Electron tutorial on using preload files, so right now my code is something like this:
// main.js
const {app, BrowserWindow, ipcMain, Menu} = require('electron');
const url = require('url');
const path = require('path');
let mainWindow;
const createWindow = () => {
// Create a window
mainWindow = new BrowserWindow({
show: false,
autoHideMenuBar: true,
webPreferences: ({
preload: path.join(__dirname, 'scripts', 'preload.js'),
nodeIntegration: true,
}),
});
mainWindow.maximize();
mainWindow.show();
// Load HTML into window
mainWindow.loadFile('index.html');
// Open Dev Tools
// mainWindow.webContents.openDevTools();
console.log(versions);
}
// preload.js
const {contextBridge} = require('electron');
contextBridge.exposeInMainWorld('versions', {
node: () => process.version.node,
chrome: () => process.version.chrome,
electron: () => process.version.electron,
});
Index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<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'"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<p id="info"></p>
<script>window.$ = window.jQuery = require('jquery');</script>
<script src="render.js"></script>
</body>
// render.js
const information = document.getElementById('info');
information.innerText = `This app is using Chrome (v${versions.chrome()}),
Node.js (v${versions.node()}), and Electron (v
${versions.electron()})`
Currently my output on the HTML from render.js is "This app is using Chrome (vundefined),Node.js (vundefined), and Electron (vundefined)" and my console.log line in main.js throws up a ReferenceError stating "versions is not defined". Anybody able to shine some light on how I could fix this? Thanks in advance.
I think you made a typo:
In your preload script
contextBridge.exposeInMainWorld('versions', {
node: () => process.version.node,
chrome: () => process.version.chrome,
electron: () => process.version.electron,
});
Should be (add a "s" to process.version
contextBridge.exposeInMainWorld('versions', {
node: () => **process.versions.node,
chrome: () => **process.versions.chrome,
electron: () => **process.versions.electron,
});
Can have a look to the docs:
https://www.electronjs.org/docs/latest/api/process
i'm trying to create a desktop app that can do printing after i clicked some button.
so here is my code.
main.js
const {app,BrowserWindow} = require('electron');
function createWindow(){
const win = new BrowserWindow({
resizable:false
})
win.maximize()
win.removeMenu()
win.loadFile("./index.html")
win.webContents.on('did-create-window',(window,detail)=>{
window.removeMenu()
window.resizable = false
window.webContents.print({silent:false})
})
}
app.whenReady().then(() => {
createWindow()
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
whatever
<button onclick="newPrint()">BIGGIE</button>
</body>
<script>
function newPrint(){
var myWindow = window.open("", "MsgWindow", "width=200,height=100");
myWindow.document.write("<p>This is 'MsgWindow'. I am 200px wide and 100px tall!</p>");
}
</script>
</html>
package.json
{
"name": "electron-print",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^19.0.2"
}
}
So after i clicked the button, the electron app just suddenly close ! i just don't know why it happened.
and i tried re-creating this app on other computer (Mine was running Win 11 and i thought maybe that was the problem) and it worked just fine !
Could it be that Electron is not fully compatible with Win 11 yet ?
This seems very much like this Electron bug, which is fixed in Electron 19.0.2 which you're apparently on.
Can you reinstall your node modules to confirm that you still see the issue in 19.0.2? This issue would have been present in Electron 19.0.1.
This problem is so confusing because i don't know where the issue is.
I used vibrancy in my last project with previous electron versions in same machine and those were work properly but know it does not work, and i don't have any idea what is the problem.
I google it and i did not find any question or github issue.
May be the problem is in electron?!!
Here some information that may needed:
System:
MacOS 11.6 x86_64
Electron Version: 15.0.0
Other Dependencies or DevDependencies: Nothing
This is very simple example, and nothing crazy is going on. very very simple:
// File: index.js
// Process: Main
// Location: Root Directory Of Project
// -----------------------------------
const { app, BrowserWindow } = require('electron');
const { join } = require('path');
const isDarwin = process.platform === 'darwin';
let mainWindow;
app.setName('Electron Sample');
const Ready = () => {
mainWindow = new BrowserWindow({
show: false,
vibrancy: 'content',
visualEffectState: 'followWindow',
title: app.getName(),
backgroundColor: false,
webPreferences: {
contextIsolation: false,
nodeIntegration: true,
nativeWindowOpen: false
}
});
mainWindow.loadFile(join(__dirname, './index.html'));
mainWindow
.once('ready-to-show', () => mainWindow.show())
.once('close', () => (mainWindow = null));
};
app.whenReady().then(Ready);
app.on('window-all-closed', () => {
if (!isDarwin) app.quit();
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) Ready();
});
<!--
File: index.html
Process: Renderer
Location: Root Directory Of Project
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
html,
body {
background-color: transparent;
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<h1>I Confused! ðŸ˜</h1>
</body>
</html>
Project Structure:
node_modules
index.js
index.html
yarn.lock
package.json
This is all information.
The problem is in BrowserWindow Options
This is the correct form of options to enable under-window vibrancy on macOS:
new BrowserWindow({
// Other Options...
transparency: true,
backgroundColor: "#00000000" // transparent hexadecimal or anything with transparency,
vibrancy: "under-window", // in my case...
visualEffectState: "followWindow"
})
more info: Electron BrowserWindow Options
I build an app with Electron an i try to use a webview to display a file loaded from my disk and i need nodeintegration in the webview. Although it is documented in the Electron Documentation here i can`t get it working.
I created a test project with the main.js file, which creates a BrowserWindow, where i load my index.html and index.js files. The index.js file creates a webview with my file loaded and the file is webview.html with webview.js. I call require in webview.js and i can see in the DevTools, that it is giving the error
Uncaught ReferenceError: require is not defined
at webview.js:2
Here are my testfiles, what am i missing or got this feature removed?
I am using Electron ^12.0.2
main.js
const { app, BrowserWindow, BrowserView } = require('electron')
function createWindow () {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
webviewTag: true,
nodeIntegrationInWorker: true,
nodeIntegrationInSubFrames: true
}
})
win.loadFile('index.html')
return win;
}
app.whenReady().then(() => {
let win = createWindow();
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<div class="root">
</div>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
index.js
function createWebview(id, url) {
//creates a webview with the id of the tab and the url loaded
let webview = document.createElement("webview");
webview.setAttribute("id", id);
webview.setAttribute("src", url);
webview.setAttribute("nodeintegration", "");
webview.setAttribute("preload", "./pre.js")
webview.addEventListener('dom-ready', () => {
webview.openDevTools();
});
console.log(webview);
return webview;
}
document.querySelector(".root").appendChild(createWebview("web", `file://${__dirname}/webview.html`));
webview.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
test
<script src="webview.js" charset="utf-8"></script>
</body>
</html>
webview.js
console.log("test");
//a require to test the functionality
const { app, BrowserWindow, ipcMain, Menu, MenuItem } = require('electron');
Edit 1: The preload script is empty.
After thinking much more i came to the solution, that if the webview is similar to the BrowserWindow, then i need to disable contextIsolation in the webPreferences object of the webview. This is definitely something that needs to be added to electron documenten.
I change my index.js file like this
function createWebview(id, url) {
//creates a webview with the id of the tab and the url loaded
let webview = document.createElement("webview");
webview.setAttribute("id", id);
webview.setAttribute("src", url);
webview.setAttribute("nodeintegration", "");
webview.setAttribute("webpreferences", "contextIsolation=false");
webview.addEventListener('dom-ready', () => {
webview.openDevTools();
});
console.log(webview);
return webview;
}
document.querySelector(".root").appendChild(createWebview("web", `file://${__dirname}/webview.html`));
Just add below two attributes in webPreference object to enable nodeIntegration in all js file which contains webView
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
nativeWindowOpen: true,
enableRemoteModule: true,
sandbox:false,
nodeIntegrationInSubFrames:true, //for subContent nodeIntegration Enable
webviewTag:true //for webView
}
don't use webview is not good idea to show external content using webView
it affects performance.!
See docs about webView below
I have a file that contains a function that opens a file open dialog. I want to call that function from the app's menu. But when I use require to use the function from the file I get an error.
Code:
Main.js:
const { app, BrowserWindow, Menu } = require('electron');
const url = require('url');
const path = require('path');
const { openFile } = require('./index.js');
let win;
function createWindow() {
win = new BrowserWindow({
width: 800,
height: 600,
icon: __dirname + 'src/styles/media/icon.ico',
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
},
});
win.loadURL(
url.format({
pathname: path.join(__dirname, 'src/index.html'),
protocol: 'file:',
slashes: true,
})
);
var menu = Menu.buildFromTemplate([
{
label: 'File',
submenu: [
{
label: 'Open File',
click() {
openFile();
},
accelerator: 'CmdOrCtrl+O',
}
]
}]);
Menu.setApplicationMenu(menu);
}
app.on('ready', createWindow);
index.js:
const { dialog } = require('electron').remote;
function openFile() {
dialog.showOpenDialog({
title: 'Open File',
properties: ['openFile'],
});
}
module.exports = {
openFile,
};
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/style.css" />
<title>Stonecutter</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
Error:
When I do the same thing but without the required the code works fine:
// index.js
// --------
// This code works
function openFile() {
console.log('Open file');
}
module.exports = {
openFile,
};
// Main.js is the same
You're using a remote inside the main process. This is what causes the problem. Remote is what you use from Renderer process (scripts required from a BrowserView). So you need to write two different openFile functions for main and renderer processes.
So when you require index.js from main.js this is what cause the error. You need determine where you are in the main process or in the renderer. Watch open-file.js below to see how to do it.
All together it should look like this:
main.js
const { app, BrowserWindow, Menu } = require('electron');
const url = require('url');
const path = require('path');
const {openFile} = require('./open-file')
let win;
function createWindow() {
win = new BrowserWindow({
width: 800,
height: 600,
icon: __dirname + 'src/styles/media/icon.ico',
webPreferences: {
nodeIntegration: true,
enableRemoteModule: true,
},
});
win.loadURL(
url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true,
})
);
}
app.on('ready', () => {
createWindow()
var menu = Menu.buildFromTemplate([
{
label: 'File',
submenu: [
{
label: 'Open File',
click() {
openFile();
},
accelerator: 'CmdOrCtrl+O',
}
]
}]);
Menu.setApplicationMenu(menu);
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles/style.css" />
<title>Stonecutter</title>
</head>
<body>
<button id="open-file">Open file</button>
<script>
const {openFile} = require('./open-file.js')
document.querySelector('#open-file').addEventListener('click', () => openFile())
</script>
</body>
</html>
open-file.js
const electron = require('electron');
// electron.remote for Renderer Process and electron for Main Process
const {dialog} = (electron.remote || electron)
function openFile() {
dialog.showOpenDialog({
title: 'Open File',
properties: ['openFile'],
});
}
module.exports = {
openFile,
};
This examples works as you expect. File open-file.js is what you have in index.js.
This is so because Electron runs its parts in different processes: the first is the Main process. It is where you're getting when running electron main.js. The second is a Renderer process is running in a separate os process. This is where you get calling win.loadURL() and it has slightly different API and set of libraries.