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
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()
});
}
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.
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>
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>
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.