Hi I'm trying to convert my project from a web browser to a GUI based app with electron and I'm following this video to start my project he is using yarn but I use npm 9.2.0
At first I was not getting anything from the button when I pressed it but I saw on a comment that I could try changing
webPreferences:{
nodeIntegration: true,
}
to
webPreferences:{
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
}
and then I got something ... an error -_-
here is my code for now
gui.js
const { app, BrowserWindow, ipcMain } = require("electron");
let leftWindow = null;
let rightWindow = null;
const createWindows = (win, page) => {
win = new BrowserWindow({
width: 1024,
height: 600,
resizable: false,
fullscreen: true,
webPreferences:{
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true,
},
});
win.loadFile(page)
};
app.whenReady().then(() => {
//createWindows(leftWindow, "dash.html");
createWindows(rightWindow, "controls.html");
});
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') {
app.quit()
}
})
ipcMain.on('send', (event, data) => {
const randomStr = data + Math.random().toString(36).substring(2, 5)
rightWindow.webContents.send('receive', randomStr)
})
render.js
const ipcRenderer = require("electron").ipcRenderer;
const test = () => {
ipcRenderer.send("send", document.querySelector(".keyWord").value);
};
ipcRenderer.on("receive", (event, data) => {
alert(data);
const tempTag = document.querySelector("#temp");
tempTag.innerText = data;
});
controls.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Controls</title>
<script defer src="render.js"></script>
<link rel="stylesheet" href="./public/styles.css" />
</head>
<body>
<div id="content">
<input type="text" class="keyWord" placeholder="Enter Data">
<button onclick="test()">Test</button>
<h1 id="temp">Random String</h1>
</div>
<script type="text/jsx" src="./public/controlApp.jsx"></script>
</body>
</html>
Ok following @Arkellys and went on the links I didn't understand a thing on the electron documentation :/
I made more researches on google and that is my result for the preload.js lead he gave me
thank you for your input
gui.js
const { app, BrowserWindow, ipcMain } = require("electron");
const path = require('node:path');
let leftWindow = null;
let rightWindow = null;
const createWindows = (win, page) => {
win = new BrowserWindow({
width: 1024,
height: 600,
resizable: false,
fullscreen: true,
webPreferences:{
preload: path.join(__dirname, 'preload.js'),
},
});
ipcMain.handle('generatePassword', (req, data) => {
const password = data.keyWord + Math.random().toString().substr(2, 5)
return { password }
})
win.loadFile(page)
};
app.whenReady().then(() => {
//createWindows(leftWindow, "dash.html");
createWindows(rightWindow, "controls.html");
});
app.on('window-all-closed', () => {
if(process.platform !== 'darwin') {
app.quit()
}
})
preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
createPassword: (data) => ipcRenderer.invoke('generatePassword', data)
})
render.js
const keyWord_el = document.getElementById('keyWord');
const btn_el = document.getElementById('btn');
btn_el.addEventListener('click', async () =>{
const keyWord = keyWord_el.value;
const res = await electronAPI.createPassword({ keyWord })
document.getElementById('passWord').innerText = res.password
})
controls.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Controls</title>
<script defer src="render.js"></script>
<link rel="stylesheet" href="./public/styles.css" />
</head>
<body>
<div id="content">
<input id="keyWord" type="text" placeholder="Enter Data">
<button id="btn">Test</button>
<h1 id="passWord">Random String</h1>
</div>
<script type="text/jsx" src="./public/controlApp.jsx"></script>
</body>
</html>