Develop Reference

electronJS how to get data across from preload to renderer

I am trying to send data from a main window to another window in electronJS.
How my app works is there is a main window with many selections. On clicking each selection, a new window will open, and the window will show data that is related to that selection. For now, what works is that clicking each selection will open a new window, but I am unable to pass data over to the new window.
I have read through the electron docs but most seem to be focused on data from renderer to main. The example which shows data passing from main to renderer didn't help me and I still struggle to implement what I want.
I tried looking for some help here
Trying to send data from one electron window to another via ipc
Electron: How to securely inject global variable into BrowserWindow / BrowserView?
Electron: How to pass the message/data from preload to renderer?
and tried to implement the suggestions but I still can't get it to work.
I have 2 html files (index.html and details.html), a main.js, a preload.js and a renderer.js for the details.html
Here are my codes:
main.js
// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 1000,
height: 1000,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.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()
ipcMain.on('open-selection-window', (event) => {
openNewWindow()
})
app.on('activate', () => {
// 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', () => {
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.
const openNewWindow = () => {
const Window = new BrowserWindow({
width: 1000,
height: 1000,
title: ' details',
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
Window.loadFile('details.html')
}
preload.js (note the contextbridge portion)
// preload.js
const axios = require('axios');
const { contextBridge, ipcRenderer } = require('electron');
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
// this function is called when the user clicks on a selection, it will get the details
const getselectionDetail = (argument) => {
axios.get(`http://apiurl/${argument}`)
.then(response => {
return response.data;
})
}
// this function is called when user press search button, it will search for the selections thru API call,
// and then display the results,
// set onclick function for each result,
const searchselections = (text) => {
//use axios to make a get request to the url
axios.get(`http://apiurl/${text}`)
.then(response => {
const selections = response.data;
// for each element in selections, append a div with the class of search-result and append the html
selections.forEach(selection => {
document.getElementById('results').innerHTML += `
<div class="search-result">
<p>${selection.name}</p>
</div>`;
});
// for each search result, need to set it such that on click, the contextbridge will send the selection details to the renderer
// and then the renderer will load the selection details
const searchResults = document.getElementsByClassName('search-result');
for (let i = 0; i < searchResults.length; i++) {
searchResults[i].onclick = () => {
contextBridge.exposeInMainWorld(
'selection',
// this is to get a new window to open and sends data to the main process
ipcRenderer.send('open-selection-window', getselectionDetail(selections[i].name))
);
// send data to the renderer -> this doesn't work?
contextBridge.exposeInMainWorld(
'details',
getselectionDetail(selections[i].name)
)
}
}
})
.catch(error => {
console.log(error);
}
)
}
renderer.js
const detail_name = document.getElementById('detail-name');
// load the data from window, need to append to html
console.log(window.details) <-- this doesn't work
index.html
<!--index.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'"> -->
<!-- <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
<title>Search function</title>
</head>
<body>
<h1>Search function</h1>
<div class="root">
<!-- text input for the search -->
<input type="text" id="search-input" placeholder="Search">
<!-- search button -->
<button id="search-button" class="search-button" type="button">
Search
</button>
</div>
<!-- div to display the search results -->
<div id="results"></div>
</body>
</html>
details.html
<!--index.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'"> -->
<!-- <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'"> -->
<title>Details</title>
</head>
<body>
<h1>Details</h1>
<div class="result">
<!-- div for name -->
<div class="name">
<h5>Name:</h5>
<p id="detail-name"></p>
</div>
</div>
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
I appreciate any tips/guidance!

You can use BroadcastChannel like below
const qr = new BroadcastChannel("test");
qr.postMessage(JSON.stringify({ var: "val" }));
and listen from another file like
const bc = new BroadcastChannel("test");
bc.onmessage = (event) => {
this.data = JSON.parse(event.data);
};
You can read more about this on mdn.broadcastchannel

The comments can't hold so much text so I'll post the code here to show what I've tried, but doesn't work.
I added the top code in the onclick assignment
preload.js
// for each search result, need to set it such that on click, the contextbridge will send the selection details to the renderer
// and then the renderer will load the selection details
const searchResults = document.getElementsByClassName('search-result');
for (let i = 0; i < searchResults.length; i++) {
searchResults[i].onclick = () => {
contextBridge.exposeInMainWorld(
'selection',
// this is to get a new window to open and sends data to the main process
ipcRenderer.send('open-selection-window', getselectionDetail(selections[i].name))
);
const qr = new BroadcastChannel("test");
qr.postMessage(JSON.stringify({ var: "val" }));
}
}
renderer.js
// set windows onload event
window.addEventListener('load', () => {
const bc = new BroadcastChannel("test");
bc.onmessage = (event) => {
this.data = JSON.parse(event.data);
console.log(JSON.parse(event.data));
};
});

I think you are trying to do too much in your preload.js script. Additionally, I don't think you can
use contextBridge.exposeInMainWorld more than once per window.
Place your Axios calls in your main process. This will dramatically simplify your preload.js script.
Additionally, just use your preload.js script to transfer data between processed. That way, it will simplify it even
further.
Use your html files only to display the UI, make it interactive and dynamically render content. The remainder can be
handled in the main process.
Note: I have mocked your Axios calls with simplified fake data for testing.
Apart from your main.js file doing the usual things, listen via IPC calls from:
index.html to initiate a search (via invoke) and return the results (via handle).
index.html to open details.html window and send "details" to new window.
If your Axios calls returns promises, see the bottom of the preload.js script for IPC promise use.
main.js (main process)
const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const electronIpcMain = require('electron').ipcMain;
const nodePath = require('path');
// Prevent garbage collection
let searchWindow;
let detailsWindow;
function createSearchWindow() {
const searchWindow = new electronBrowserWindow({
x: 0,
y: 0,
width: 1000,
height: 1000,
show: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: nodePath.join(__dirname, 'preload.js')
}
});
searchWindow.loadFile('index.html')
.then(() => { searchWindow.show(); });
return searchWindow;
}
function createDetailsWindow() {
const detailsWindow = new electronBrowserWindow({
x: 0,
y: 0,
width: 300,
height: 300,
show: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: nodePath.join(__dirname, 'preload.js')
}
});
detailsWindow.loadFile('details.html')
.then(() => { detailsWindow.show(); });
return detailsWindow;
}
electronApp.on('ready', () => {
searchWindow = createSearchWindow();
});
electronApp.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
electronApp.quit();
}
});
electronApp.on('activate', () => {
if (electronBrowserWindow.getAllWindows().length === 0) {
createSearchWindow();
}
});
// ---
electronIpcMain.handle('search', (event, data) => {
// Use "data" variable for Axios call.
return [
'Result 1',
'Result 2',
'Result 3',
'Result 4',
'Result 5'
]
})
electronIpcMain.on('openDetailsWindow', (event, data) => {
// Use "data" for Axios call.
let results = {
'Result 1': 'Details for Result 1',
'Result 2': 'Details for Result 2',
'Result 3': 'Details for Result 3',
'Result 4': 'Details for Result 4',
'Result 5': 'Details for Result 5'
}
detailsWindow = createDetailsWindow();
detailsWindow.webContents.send('pushDetails', results[data]);
})
I have used a white listed channel name configuration for your preload.js script. This simplifies things even further
and prevent your preload.js script from being used for more than just simple channel name calling and data transfer.
If you are after an alternative design for your preload.js script, just let me know.
preload.js (main process)
// Import the necessary Electron components.
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;
// White-listed channels.
const ipc = {
'render': {
// From render to main.
'send': [
'openDetailsWindow'
],
// From main to render.
'receive': [
'pushDetails'
],
// From render to main and back again.
'sendReceive': [
'search'
]
}
};
// Exposed protected methods in the render process.
contextBridge.exposeInMainWorld(
// Allowed 'ipcRenderer' methods.
'ipcRender', {
// From render to main.
send: (channel, args) => {
let validChannels = ipc.render.send;
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, args);
}
},
// From main to render.
receive: (channel, listener) => {
let validChannels = ipc.render.receive;
if (validChannels.includes(channel)) {
// Deliberately strip event as it includes `sender`.
ipcRenderer.on(channel, (event, ...args) => listener(...args));
}
},
// From render to main and back again.
invoke: (channel, args) => {
let validChannels = ipc.render.sendReceive;
if (validChannels.includes(channel)) {
return ipcRenderer.invoke(channel, args);
}
}
}
);
/**
* Render --> Main
* ---------------
* Render: window.ipcRender.send('channel', data); // Data is optional.
* Main: electronIpcMain.on('channel', (event, data) => { methodName(data); })
*
* Main --> Render
* ---------------
* Main: windowName.webContents.send('channel', data); // Data is optional.
* Render: window.ipcRender.receive('channel', (data) => { methodName(data); });
*
* Render --> Main (Value) --> Render
* ----------------------------------
* Render: window.ipcRender.invoke('channel', data).then((result) => { methodName(result); });
* Main: electronIpcMain.handle('channel', (event, data) => { return someMethod(data); });
*
* Render --> Main (Promise) --> Render
* ------------------------------------
* Render: window.ipcRender.invoke('channel', data).then((result) => { methodName(result); });
* Main: electronIpcMain.handle('channel', async (event, data) => {
* return await promiseName(data)
* .then(() => { return result; })
* });
*/
In your index.html (search) file, place an event listener on the "search" button (and the results div). Once clicked,
send an IPC message to the main thread to retrieve your Axios data call. Once retrieved, dynamically add the results to
the DOM.
On a click in your results div, use event delegation to find the result that was clicked and again, use IPC to
send a message to open up the "details" window.
Note: For simplicity, I have added your required renderer.js code in-between <script> tags.
index.html (render process)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search function</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
</head>
<body>
<h1>Search function</h1>
<div class="root">
<input type="text" id="search-input" placeholder="Search">
<input type="button" id="search-button" class="search-button" value="Search">
</div>
<div id="results"></div>
</body>
<script>
let results = document.getElementById('results');
document.getElementById('search-button').addEventListener('click', () => {
window.ipcRender.invoke('search', document.getElementById('search-input').value)
.then((data) => {
let output = '';
for (let item of data) {
output += `<div class="search-results">${item}</div>`;
}
results.innerHTML = output;
})
})
results.addEventListener('click', (event) => {
window.ipcRender.send('openDetailsWindow', event.target.innerText);
})
</script>
</html>
The details.html file fill automatically receive the detailed data from main process upon opening.
details.html (render process)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Details</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
</head>
<body>
<h1>Details</h1>
<div class="result">
<div class="name">
<h5>Name:</h5>
<p id="detail-name"></p>
</div>
</div>
</body>
<script>
window.ipcRender.receive('pushDetails', (details) => {
document.getElementById('detail-name').innerText = details;
})
</script>
</html>

Import function only (not entire file stack) into Angular from vanilla JavaScript

The Challenge
I am working on an Electron/Angular app that will display an emergency message to multiple computers in the event of a tornado or other incident. To accomplish this, I am using a WebSocket protocol (Signral R) on the backend to send the alert, which then triggers Electron's main.js (running in the background) to launch a window on any devices running the app.
The arrival of the message triggers the window to launch, but I also need to use the message in the Angular part of the app (which does not initialize until after the window is open) to indicate the nature of the emergency. To avoid timing problems, I planned to import a function into my app.component.ts that would be called at ngOnInit to retrieve an emergency variable from main.js.
The Problem
Angular does not like the import from raw JavaScript. Intuitively you would think Angular would only import the exported class. However it appears to try and import Electron as well (generating a conflict with 'fs' and 'path' that is explained here), generating the following error message:
./node_modules/electron/index.js:1:11-24 - Error: Module not found: Error: Can't resolve 'fs' in 'C:\Users\me\electron-app\node_modules\electron'
./node_modules/electron/index.js:3:13-28 - Error: Module not found: Error: Can't resolve 'path' in 'C:\Users\me\electron-app\node_modules\electron'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
In spite of doing considerable research, I have not found anything approaching a solution. Any ideas for only importing the information I want would be much appreciated. Here are my files:
main.js (simplified somewhat)
const signalR = require("#microsoft/signalr")
const { app, shell, BrowserWindow, Menu, nativeImage, Tray } = require('electron')
const path = require("path");
const url = require("url");
//various setup logic goes here
//...
webSocketConnection.on("EmergencyActivation", (jsonData) => {
createElectronWindow();
const emergencyMessage = jsonData
});
module.exports = class Emergency {
getEmergency() {
return emergencyMessage
}
}
app.component.ts
import { Component, OnInit } from '#angular/core';
import { Emergency } from './../../main';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private emergency: Emergency) {}
ngOnInit() {
console.log(this.emergency.getEmergency())
}
}

Though I do not use Angular, I think the issue is communication between your main process and your render process (or
lack
thereof).
Don't try to communicate between processes by importing from the main process to the render process (which can't
be done). Instead, use Inter-Process Communication.
IE: Once an emergency message has been received via webSocket, create the window and then send an IPC message to that newly
created window.
I have needed to "mock" your webSocketConnection functionality for the sake of the below example.
main.js (main process)
const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;
const nodePath = require('path');
let window;
function createWindow() {
window = new electronBrowserWindow({
x: 0,
y: 0,
width: 800,
height: 600,
show: false,
webPreferences: {
nodeIntegration: false,
contextIsolation: true,
preload: nodePath.join(__dirname, 'preload.js')
}
});
window.loadFile('index.html')
.then(() => { window.show(); });
return window;
}
electronApp.on('ready', () => {
listenForEmergency();
});
electronApp.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
electronApp.quit();
}
});
electronApp.on('activate', () => {
if (electronBrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
// ---
// Mock of "webSocketConnection.on" function (for testing only)
function listenForEmergency() {
let message = 'Emergency: We have no beer'
console.log('Wait 5 seconds before "receiving" emergency message'); // Testing
setTimeout(() => { showEmergencyWindow(message); }, 5000);
}
// Create window and send message via IPC
function showEmergencyWindow(message) {
window = createWindow();
window.webContents.send('emergency', message); // <-- Use of IPC messaging
}
// Create window and send message via IPC
// webSocketConnection.on("EmergencyActivation", (jsonData) => {
// window = createWindow();
// window.webContents.send('emergency', jsonData); // <-- Use of IPC messaging
// });
preload.js (main process)
const contextBridge = require('electron').contextBridge;
const ipcRenderer = require('electron').ipcRenderer;
contextBridge.exposeInMainWorld(
'electronAPI', {
emergency: (message) => {
ipcRenderer.on('emergency', message)
}
});
index.html (render process)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emergency</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
</head>
<body>
<h1>Emergency</h1>
<div id="message"></div>
</body>
<script>
window.electronAPI.emergency((event, message) => {
document.getElementById('message').innerText = message;
})
</script>
</html>

Using the electron ipcRenderer from a front-end javascript file

I'm in the process of learning to use Electron, and while trying to have my application communicate with the front end I am aware I need to use the ipcRenderer to gain a reference to the DOM elements and then pass that information to ipcMain.
I tried to follow much of the advice suggested here and here, but both of these examples use require('electron').ipcMain and whenever I try to include my script that will be interacting with the front-end into my HTML, nothing occurs since Uncaught ReferenceError: require is not defined. I've been searching for a few hours and haven't had any luck finding a solution - so clearly I'm doing something wrong.
My main.js is very simple, I just create my window and then I create an ipc listener as so:
const { app, BrowserWindow } = require("electron");
const ipc = require('electron').ipcMain;
function createWindow() {
const window = new BrowserWindow({
transparent: true,
frame: false,
resizable: false,
center: true,
width: 410,
height: 550,
});
window.loadFile("index.html");
}
app.whenReady().then(createWindow);
ipc.on('invokeAction', (event, data) => {
var result = "test result!";
event.sender.send('actionReply', result);
})
Within the file that I wish to manipulate the DOM with, I attempt to get the element ID and then add an event listener as seen here:
const ipc = require('electron').ipcRenderer;
const helper = require("./api");
var authenticate_button = ipcRenderer.getElementById("authenticate-button");
var authButton = document.getElementById("authenticate-button");
authButton.addEventListener("click", () => {
ipc.once('actionReply', (event, response) => {
console.log("Hello world!");
})
ipc.send('invokeAction');
});
function onAuthenticateClick() {
helper.authenticateLogin(api_public, api_secret, access_public, access_secret);
}
and finally, my HTML only consists of a button that I wish to attach my event listener to:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Project Test</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="main-container">
<button id="authenticate-button" type="submit" onclick="">Authenticate</button>
<p id="status-label">Not Authenticated</p>
</div>
<script src="script.js"></script>
</body>
</html>
If anyone could help point me in the right direction as to how to get this basic functionality to work, it would be very helpful!

As mentioned by AlekseyHoffman, the reason you can't access ipcRenderer in your frontend js file is because you have nodeIntegration set to false. That said, there's a reason it's set to false by default now; it makes your app far less secure.
Let me suggest an alternate approach: rather than trying to access ipcRenderer directly from your frontend js by setting nodeIntegration to true, access it from preload.js. In preload.js, you can selectively expose ipcMain functions (from your main.js file) you want to access on the frontend (including those that can send data back from main.js), and call them via ipcRenderer there. In your frontend js, you can access the preload.js object that exposes those functions; preload.js will then call those main.js functions via ipcRenderer and return the data back to the frontend js that called it.
Here's a simple, but fully working example (these files should be sufficient to build an electron app with two-way communication between main.js and frontend. In this example, all of the following files are in the same directory.):
main.js
// boilerplate code for electron..
const {
app,
BrowserWindow,
ipcMain,
contextBridge
} = require("electron");
const path = require("path");
let win;
/**
* make the electron window, and make preload.js accessible to the js
* running inside it (this will allow you to communicate with main.js
* from the frontend).
*/
async function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false, // is default value after Electron v5
contextIsolation: true, // protect against prototype pollution
enableRemoteModule: false,
preload: path.join(__dirname, "./preload.js") // path to your preload.js file
}
});
// Load app
win.loadFile(path.join(__dirname, "index.html"));
}
app.on("ready", createWindow);
// end boilerplate code... now on to your stuff
/**
* FUNCTION YOU WANT ACCESS TO ON THE FRONTEND
*/
ipcMain.handle('myfunc', async (event, arg) => {
return new Promise(function(resolve, reject) {
// do stuff
if (true) {
resolve("this worked!");
} else {
reject("this didn't work!");
}
});
});
Note, I'm using an example of ipcMain.handle because it allows two-way communication and returns a Promise object - i.e., when you access this function from the frontend via preload.js, you can get that Promise back with the data inside it.
preload.js:
// boilerplate code for electron...
const {
contextBridge,
ipcRenderer
} = require("electron");
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
// end boilerplate code, on to your stuff..
/**
* HERE YOU WILL EXPOSE YOUR 'myfunc' FROM main.js
* TO THE FRONTEND.
* (remember in main.js, you're putting preload.js
* in the electron window? your frontend js will be able
* to access this stuff as a result.
*/
contextBridge.exposeInMainWorld(
"api", {
invoke: (channel, data) => {
let validChannels = ["myfunc"]; // list of ipcMain.handle channels you want access in frontend to
if (validChannels.includes(channel)) {
// ipcRenderer.invoke accesses ipcMain.handle channels like 'myfunc'
// make sure to include this return statement or you won't get your Promise back
return ipcRenderer.invoke(channel, data);
}
},
}
);
renderer process (i.e. your frontend js file - I'll call it frontend.js):
// call your main.js function here
console.log("I'm going to call main.js's 'myfunc'");
window.api.invoke('myfunc', [1,2,3])
.then(function(res) {
console.log(res); // will print "This worked!" to the browser console
})
.catch(function(err) {
console.error(err); // will print "This didn't work!" to the browser console.
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Electron App</title>
</head>
<body>
<h1>Hello Beautiful World</h1>
<script src="frontend.js"></script> <!-- load your frontend script -->
</body>
</html>
package.json
{
"name": "myapp",
"main": "main.js",
"scripts": {
"start": "electron ."
}
}
The files above should be sufficient to have a fully working electron app with communication between main.js and the frontend js. Put them all in one directory with the names main.js, preload.js, frontend.js, and index.html, and package.json and launch your electron app using npm start. Note that in this example I am storing all the files in the same directory; make sure to change these paths to wherever they are stored on your system.
See these links for more info and examples:
Electron documentation on inter-process communication
An overview of why IPC is needed and the security issues of setting nodeintegration to true

The require is not defined because you didn't enable nodeIntegration on the window. Set it to true in your window config:
const window = new BrowserWindow({
transparent: true,
frame: false,
resizable: false,
center: true,
width: 410,
height: 550,
webPreferences: {
nodeIntegration: true
}
})

Electron, Creating Duplicate of Main Window On Button Click

I am making an electron app and the user to be able to open as many instances of the main window (the one that opens by default) as they would like.
I would like them to be able to do this by simply clicking a button within the index.html.
How would this be possible within the following default apps code ?
main.js
const { app, BrowserWindow } = require('electron')
function createWindow () {
// Create the browser window.
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
win.loadFile('index.html')
// Open the DevTools.
win.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)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// 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()
}
})
// 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.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<button onclick="openWindow()">click to open new window</button>
</body>
</html>

All you need to do is send a message to your main process when you click your button, then in main.js create a new window whenever we receive that message.
So first send a message to main.js from your openWindow() function like this:
var ipcRenderer = require('electron').ipcRenderer;
function openWindow () {
ipcRenderer.send('asynchronous-message', 'createNewWindow');
}
Then we listen for the message in main.js like this:
var ipcMain = require('electron').ipcMain;
ipcMain.on('asynchronous-message', function (evt, message) {
if (message == 'createNewWindow') {
// Message received.
// Create new window here.
}
});
Then all you need to do is create a new window when you receive the 'createNewWindow' message.
See docs for sending a message to the main process
See docs for receiving messages in the main process

You can achieve your goal in two ways.
You should change your index.html to like this as pre-requirements
At your index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<body>
<button onclick="require('./renderer.js').openWindow()">click to open new window</button>
</body>
<!-- All of the Node.js APIs are available in this renderer process. -->
We are using Node.js <script>document.write(process.versions.node)</script>,
Chromium <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
<script>
// You can also require other files to run in this process
require('./renderer.js')
</script>
</body>
</html>
Using ipc Communiation.
At your main.js
const {app, BrowserWindow, ipcMain} = require('electron')
let browserWindows = [];
function createWindow () {
// Create the browser window.
let newWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
newWindow.loadFile('index.html')
newWindow.on('closed', function () {
newWindow = null
})
browserWindows.push(newWindow)
}
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
ipcMain.on('createNewWindow', (evnet, args) => {
createWindow();
})
At your renderer.js
const { ipcRenderer } = require('electron')
module.exports.openWindow = event => {
ipcRenderer.send('createNewWindow', {});
}
Not using ipc.
you can create directly. Create browserWindow directly at your renderer without ipc
Communitaion. Hence you enable the node api at your renderer. So that
At your renderer.js
const {BrowserWindow} = require('electron').remote
module.exports.openWindow = event => {
const newWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
newWindow.loadFile('index.html')
}
In this way, you don't need to change your main.js

How to access jquery from the render process inside the preload script on Electron

I configured the Node integration to false in my window because, as described in the documentation, disabling is a good practice.
I want to access the jQuery of my render process in my preload script, but I don't know How I can do this.
Is it possible to activate a modal (for example) after some event occurs in the preload script?
Link to my example code in Github: https://github.com/JhonatanRSantos/Sample

As Janith said, you don't need to use a preload script. Here is a working sample based on your Github repo :
Index.html - in HEADER part, modify like this :
<script>window.$ = window.jQuery = require('jquery');</script>
<script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
Note that you have to use the path ./node_modules/popper.js/dist/umd/popper.min.js or you will get an error in the console (see popper.js in bootstrap 4 gives SyntaxError Unexpected token export)
Index.html - FOOTER, add :
<script src="./index.js"></script>
Rename preload.js to index.js
index.js can be :
console.log('Preload.js');
setTimeout(() => {
console.log('Open Boostrap Modal');
$('#myModal').modal('show');
}, 5000);
and finally, main.js can be :
const { app, BrowserWindow } = require('electron');
const path = require('path')
const url = require('url')
let createWindow = () => {
let win = new BrowserWindow({
width: 800,
height: 500,
center: true,
resizable: false,
show: false
});
win.setMenu(null);
const mainUrl = url.format({ // https://electronjs.org/docs/api/browser-window#winloadurlurl-options
protocol: 'file',
slashes: true,
pathname: path.join(__dirname, 'index.html')
})
win.loadURL(mainUrl);
win.once('ready-to-show', () => {
win.show();
win.webContents.openDevTools();
});
win.on('closed', () => {
win = null;
});
};
app.on('ready', createWindow);
I made a pull request to your repo to get changes.