Render process Browser Window not working in Electronjs - javascript

I am creating simple eletronjs app. I need if i click button want show admin.html file new window. But I added correct code inside admin.js file but error this displayed Uncaught TypeError: Cannot read properties of undefined (reading 'BrowserWindow') I referred more reference but could not solve this issue. could you please solve this issue.
main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
})
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()
}
})
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>
<h1>Hello World!</h1>
<button id="test">Test</button>
<script>
require('./admin.js')
</script>
</body>
</html>
admin.js
const BrowserWindow = require('electron').remote.BrowserWindow;
const path = require('path')
const url = require('url');
const newbtn = document.getElementById('test');
newbtn.addEventListener('click', function(event){
let window1 = new BrowserWindow();
window1.loadURL(url.format({
pathname: path.join(__dirname, 'admin.html'),
protocal: 'file',
slashes: true
}));
});
admin.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'; style-src 'self' 'unsafe-inline'">
<link href="assets/css/styles.css" rel="stylesheet">
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<title>Hello World!</title>
</head>
<body>
<h1>This is admin window</h1>
</div>
</body>
</html>

Related

ElectronJS Jquery and IPCRenderer / It doesn't work / Can't run it together

I'm trying to make a simple desktop application for my colleagues at work to use.
I designed the interface and I am using webview.
I removed the frame with the frame: false command, made a custom design frame, and I control the buttons with ipcrenderer.
So far everything is going very well.
But,
I am using bootstrap in my index.html and I have to use jquery. I am using tabs partitions here.
If I do nodeintegration:false in webPreferences, the bootstrap and jquery features, namely the tabs section, work as they should. but the buttons I use ipcrenderer do not work.
Conversely, if I change it to nodeintegration: true, all my ipcrenderer buttons work correctly, but my tabs sections, ie other menus that require jquery, stop working.
How can I run both ipcrenderer processes and jquery processes together.
I've been dealing with this problem for days and it doesn't get resolved.
I tried various solution methods, but I could not get a result that works correctly.
How can i solve this problem.
Thank you, best regards.
index.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">
<meta http-equiv="Content-Security-Policy" content="script-src 'self';">
<title>MY APP</title>
<link rel="stylesheet" href="./js/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="./css/electron_appstyle.css">
<script src="./js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="./js/electron_appfunctions.js" async type="text/javascript"></script>
</head>
<body>
.....
.....
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="./js/bootstrap/popper.min.js" async type="text/javascript"></script>
<script src="./js/bootstrap/bootstrap.min.js" async type="text/javascript"></script>
<script src="./js/bootstrap/bootstrap.bundle.min.js" async type="text/javascript"></script>
</body>
</html>
part of main.js
const { app, BrowserWindow, ipcMain} = require('electron');
const { join } = require('path');
const path = require('path');
function createWindow () {
win = new BrowserWindow({
icon: path.join(__dirname, "icon.png"),
width: 960,
height: 600,
minWidth: 940,
minHeight: 560,
frame: false,
resizable: true,
autoHideMenuBar: true,
x: 0,
y: 0,
webPreferences: {
preload: path.join(__dirname, './preload.js'),
enableRemoteModule: true,
nodeIntegration: false,
contextIsolation: false,
disablewebsecurity: false,
webviewTag: true,
allowRunningInsecureContent: false,
allowpopups: false,
devTools: true
},
show: false,
})
win.loadFile(join(__dirname, "src/index.html"));
win.on("ready-to-show", () => {
// RUN
win.show()
});
}

Electron nodeIntegration not working, also general weird Electron behavior [duplicate]

This question already has answers here:
Unable to use Node.js APIs in renderer process
(2 answers)
Closed 1 year ago.
I'm new to Electron, and I've really been struggling with getting it to work. I'm experiencing behavior I cannot explain, so here's a sum:
I cannot get the communication between Electron and the html to work
"Uncaught ReferenceError: require is not defined" inside the website, even though I have nodeIntegration:true
File Tree:
./
index.html
index.js
package-lock.json
package.json
node_modules/
index.js:
const electron = require("electron");
const Ffmpeg = require("fluent-ffmpeg");
const CmdExec = require('child_process');
const {
app,
BrowserWindow,
ipcMain
} = electron;
function createWindow() {
//If I put the main window ini into here, and then call app.on("ready", createWindow()); app says
//"Cant create window before ready", even though I just moved the funcion from inside ready to here..
}
app.on('ready', () => {
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true
}
});
mainWindow.loadURL(`${__dirname}/index.html`);
});
ipcMain.on("video:submit", (event, path) =>{
CmdExec.exec("echo hello", (value)=>{console.log(value)});
});
html:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
</head>
<body>
<h1>WELCOME!</h1>
<script src="" async defer></script>
<form action="">
<div>
<br>
<label for=""></label>
<input type="file" accept="video/*" name="" id="">
</div>
<button type="submit">get info</button>
</form>
<script>
const electron = require("electron");
electron.send('perform-action', args);
document.querySelector("form").addEventListener("submit", (event) => {
event.preventDefault();
const {path} = document.querySelector("input").files[0];
window.api.send("video:submit", path);
});
//Tried multiple methos Ive found on stackoverflow,, dont think I implemented them right
//though
</script>
</body>
</html>
package.json:
{
"name": "media_encoder",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"electron": "electron ."
},
"author": "",
"license": "ISC",
"dependencies": {
"electron": "^12.0.0"
}
}
Electron 12 is now defaulting contextIsolation to true, which disables Node (here are the release notes; and here's the PR).
Here's a discussion of this change. nodeIntegration for what it's worth is going to be removed in a future Electron version.
The easiest way to fix this is to simply disable context isolation:
mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
});
That being said, you might want to consider keeping contextIsolation enabled for security reasons. See this document explaining why this feature bolsters the security of your application.

require is not defined in an electron app

I am new to electron. While learning it i came across require not define error on browserwindow. So i searched about it and find out we should need to add nodeIntegration: true, so i did it but still it doesnt solve my problem.
here is my app.js (entry file)
function createWindow() {
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
},
});
win.loadURL(
url.format({
pathname: path.join(__dirname, "index.html"),
protocol: "file",
slashes: true,
})
);
win.on("close", () => {
win = null;
});
}
app.on("ready", createWindow);
and my 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>main renderer</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h1>main renderer</h1>
<script>
require("./index.js")
</script>
</body>
</html>

Import jQuery with contextBridge

I'm trying to use contextBridge in Electron, but I keep getting an error when I try to require('jQuery') in preload.js. Here is my preload.js:
const { contextBridge, ipcRenderer } = require('electron')
require('jQuery')
contextBridge.exposeInMainWorld(
'ipcRenderer',
{
send: (channel, arg) => ipcRenderer.send(channel, arg),
on: (event, data) => ipcRenderer.on(event, data)
}
)
As soon as I put require('jQuery'), I get this error:
I want to import APIs like this since it improves security and contextIsolation will be enabled by default in later versions of Electron.
I have no idea if this is secure or not, but I just imported jQuery from index.html:
<head>
<meta charset="UTF-8">
<title>Gemini</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self'">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="macos.css">
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<link rel="stylesheet" href="node_modules/#fortawesome/fontawesome-free/css/all.css">
</head>

ReferenceError after using Webpack? [duplicate]

Here is my webpack.config.js
module.exports = {
entry: "./src/index.js",//path relative to this file
output: {
filename: "../frontEnd/bundle.js",//path relative to this file
},
externals: {
puppeteer: 'require("puppeteer")',
},
mode: 'development'
}
Here is the file, index.js, where the webpack is ran:
var backendScript = require('../backEnd/backend');
var safeBackendScript = require('../backEnd/safeBackend');
function test(){
document.getElementById("Fname").value= "John"
document.getElementById("Lname").value= "Smith"
document.getElementById("Phone").value= "1234567890"
document.getElementById("Email").value= "Jsmith#domain.com"
document.getElementById("Saddress").value= "123 Main Street"
document.getElementById("Zip").value= "12345"
document.getElementById("country").value= "USA"
document.getElementById("state").value= "NJ"
document.getElementById("cardtype").value= "AE"
document.getElementById("Cname").value= "JOHN H SMTIH"
document.getElementById("Cnumber").value= "1234567890101112"
document.getElementById("CVV").value= "123"
document.getElementById("cardmonth").value= "01"
document.getElementById("cardyear").value= "2035"
document.getElementById("category").value= "jackets"
document.getElementById("kword").value= "Supreme Jacket"
document.getElementById("delay").value= "120"
document.getElementById("color").value= "C2"
document.getElementById("size").value= "L"
}
module.exports = {
test: test
}
And then here is my html with the function ran:
<!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="index.css">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type= "text/javascript" src="./bundle.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Supreme Bot</title>
</head>
<body style="margin: 20px">
<button onclick="test()"> test </button>
</body>
</html>
then after clicking on the button, it states that test() is undefined...
I can't figure it out...
Any help is GREATLY appreciated.
You aren't exporting test() to window.
module.exports = {...} won't automagically get injected into window, but:
you can set the output.libraryTarget: 'window' and output.library: 'something' configuration options and get window.something.test() (docs here), or
you can manually do window.test = test; at the end of your Webpack entry point instead of exporting things.

Categories

Resources