I'm new to Electron.js, I just did the initial configurations of Electron and I'm trying to open a URL, the problem is that when I run npm start it opens the following and not the page of the url, how do I solve it?
const { app, BrowserWindow } = require('electron')
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600
})
win.loadURL('https://www.google.com/')
}
app.whenReady().then(() => {
createWindow()
})
I would follow the Electron Quickstart and replace win.loadFile('index.html') with win.loadURL('https://google.com').
Related
main.js
//...
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, './preload/preload.js')
}
});
//...
preload.js
const { contextBridge, ipcRenderer } = require('electron');
const qrcode = require('qrcode');
contextBridge.exposeInMainWorld('electronAPI', {
qrc: qrcode
})
the error
Unable to load preload script: F:\project\bluetools\preload\preload.js
Error: module not found: qrcode
Although direct exposure is not a good behavior, but I need to do it; and the example in the official documentation can be exposed directly, although it is not recommended; but why I require any third-party package in preloadjs shows "module not found: xxx"
Just add nodeIntegration: true to webPreferences. Like that.
//...
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, './preload/preload.js')
}
});
//...
I refer to here, I have got a solution, but it seems to be more troublesome, but what is this compared to security and normative?
ipc.js
module.exports = {
xxx_req: (argements) => {
const { ipcMain, winb: win } = argements;
ipcMain.on('xxx_req', (event, response) => {
win.webContents.send("xxx", "hello");
});
}
}
main.js
const ipcm = require('./ipc.js');
const createWindow = () => {
const win = new BrowserWindow({...});
ipcm.xxx_req({ ipcMain, winb: win })
}
preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
xxx_req: (response) => ipcRenderer.send('xxx_req',response),
xxx: (callback) => ipcRenderer.on('xxx',callback),
})
index.js(render process)
window.electronAPI.xxx_req("hello");
window.electronAPI.qrcode((event, detail) => {
console.log(detail)
});
If you still don't understand why I did this, please refer to here.
I am getting this error whilst using the latest version of Electron. I have nodeIntegration set to true in my main javascript file. I have copy and pasted this code from a working Electron application but it doesn't seem to work with my new app.
Electron Version: ^12.0.0
My main JS
//Require Electron
const { BrowserWindow, app, autoUpdater, globalShortcut, ipcMain } = require('electron');
const main = require('electron-reload');
//Electron reload
const electron_reload = require('electron-reload')(__dirname);
//Disable security warnings
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
//Main window
function createMain() {
const main = new BrowserWindow({
minWidth: 425,
minHeight: 524,
width: 1600,
height: 900,
frame: null,
icon: './assets/icon.png',
webPreferences: {
nodeIntegration: true,
nodeIntegrationInWorker: true,
nodeIntegrationInSubFrames: true,
enableRemoteModule: true,
}
});
main.loadFile('./HTML/index.html');
main.setMenu(null);
main.webContents.toggleDevTools();
main.webContents.on('did-finish-load', function () {
main.show();
//Ctrl+Shift+I - Open Developer Tools
globalShortcut.register('CommandOrControl+Shift+I', () => {
console.log('Developer Tools Opened');
main.webContents.toggleDevTools();
});
//Make full screen
globalShortcut.register('F11', () => {
main.maximize();
})
});
//Tries to quit the application when main window is closed
main.on('closed', function () {
app.quit();
});
}
//Once the Electron application is initialised (when it is ready) the function createMain is called
app.whenReady()
.then(createMain)
.then(console.log('Launching ChecklistsPro'));
//When the application is launched, if it has no windows open then it will call the createMain function
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createMain();
}
});
Trying to use require
const electron = require('electron');
I have had the same issue.
It comes with the update from electron 11.x to 12.x See here: https://www.electronjs.org/releases/stable#release-notes-for-v1200
You have to disable contextisolation, which changed from beeing true by default in the new electron version.
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
win.loadFile('index.html')
}
Another solution is to downgrade to electron 11.x where contextIsolation: false is the default.
My sources:
https://www.reddit.com/r/electronjs/comments/lxjva0/required_not_defined_but_nodeintegration_set_to/
Picture of electron Changelog
I have created a pdf document with jsPDF and jspdf-autotable but I am not able to print it with electron.
Electron just allows me to print the contents on the web/html, it is not allowing me to pass the document in any function a print it directly
I also tried window.print() but it crashes my application
Solutions are welcome....
window.print() crashes the application
// Electron Configuration
const { app, BrowserWindow } = require('electron')
let mainWindow = null;
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadFile('./index.html')
})
//HTML configuration
<script>
const jsPDF = require('jspdf')
const pdf = () => {
var doc = new jsPDF();
doc.text('hahahahaha', 10,10)
window.print(doc.output('bloburl'), 'Print')
}
</script>
I am expecting the electron app to print my jsPDF document.
I'm currently trying to implement a new Window on my Electron App.
So I want to include a button, and when you click on this Button, a new Window should be opened.
I didn't find anything in the Electron documentation, maybe one of you can help me.
Perhaps something like this:
const button = document.getElementById('<your_button_id>');
button.addEventListener('click', () => {
createBrowserWindow();
});
function createBrowserWindow() {
const remote = require('electron').remote;
const BrowserWindow = remote.BrowserWindow;
const win = new BrowserWindow({
height: 600,
width: 800
});
win.loadURL('<url>');
}
I believe the answer that has been taken as correct is outdated.
I have managed to do it with the ipc module and with the solution given by Nishkal.
Please, read the ipc module, I'm new to electron and not very experienced with programming. I'm sure you can come with better solutions.
Code I added in order for it to work:
my main.js
const {app, BrowserWindow} = require('electron');
const path = require('path');
//ipc
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
createWindow();
})
const createWindow = () => {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
},
});
win.loadFile('index.html');
}
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
})
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') app.quit();
})
my preload.js
window.addEventListener('DOMContentLoaded', () => {
const { ipcRenderer } = require('electron')
ipcRenderer.on('asynchronous-reply', (event, arg) => {
console.log(arg) // prints "pong"
})
//button and its event listener
const b1 = document.getElementById('b1');
b1.addEventListener('click', () => {
ipcRenderer.send('asynchronous-message', 'ping')
})
})
To open a window from the renderer:
window.open("https://github.com", "_blank", "top=500,left=200,frame=false,nodeIntegration=no");
https://www.electronjs.org/docs/latest/api/window-open
i'm very new to electron, but loving it. However, i am stuck on one thing, so after some guidance if possible.
i have a small test app, that i will be using for users to login in to a page.
in my main.js file i set the mainWindow properties as below:
function createWindow() {
mainWindow = new BrowserWindow({frame:false,
width: 1024,
height: 565,
minWidth: 1024,
minHeight: 565,
frame: false,
resizable: false,
show: false,
center: true,
backgroundColor: '#312450',
icon: path.join(__dirname, 'assets/icons/png/64x64.png')
})
mainWindow.loadURL(`file://${__dirname}/login.html`)
mainWindow.once('ready-to-show', () => {
mainWindow.show()
})
//mainWindow.webContents.openDevTools({detach: true})
mainWindow.on('closed', function() {
mainWindow = null
})
}
and then launch this in the app.on event.
This is all good so far.
I also add an eventlistener to a button in the login.html page as follows:
btnSignIn.addEventListener('click', function(){
const email = txtEmail.value;
const pass = txtPassword.value;
firebase.auth().signInWithEmailAndPassword(email, pass).then(function(){
document.location.href = 'loggedin.html';
}).catch(function(error){
if(error != null){
alert(error.message);
return;
}
})
},false);
This is all working perfectly well. The only issue i have is that i'd like the second page (loggedin.html) to be a different size.
I presume i have to change the mainWindow options specified previously, but i am unable to acheive it.
any pointers are greatly appreciated.
Regards
J
In your renderer process (js script loaded from login.html) you should be able to load Electron and Node modules.
const {ipcRenderer} = require('electron');
// Right after the line where you changed the document.location
ipcRenderer.send('resize-me-please')
In main.js
const {ipcMain} = require('electron')
ipcMain.on('resize-me-please', (event, arg) => {
mainWindow.setSize(width,height)
})
To add to Leonardo's answer, if your application may have multiple windows, you can resolve the sender window by pulling that from the IPC event, like so:
main.js
const {ipcMain} = require('electron')
ipcMain.on('resize-window', (event, width, height) => {
let browserWindow = BrowserWindow.fromWebContents(event.sender)
browserWindow.setSize(width,height)
})
Renderer
const {ipcRenderer} = require('electron');
// ...
ipcRenderer.send('resize-window', 1280, 720)