How to make about popup in electron - electron

Question

I want to know how can I add about button in my electron app that opens popup with software details? something like this:
Code
This is how currently my index.js looks like:
const { app, BrowserWindow, Menu } = require('electron');
const isDevMode = require('electron-is-dev');
const { CapacitorSplashScreen, configCapacitor } = require('#capacitor/electron');
const path = require('path');
// Place holders for our windows so they don't get garbage collected.
let mainWindow = null;
// Placeholder for SplashScreen ref
let splashScreen = null;
//Change this if you do not wish to have a splash screen
let useSplashScreen = true;
// Create simple menu for easy devtools access, and for demo
const menuTemplateDev = [
{
label: 'Options',
submenu: [
{
label: 'Open Dev Tools',
accelerator: "CmdOrCtrl+D",
click() {
mainWindow.openDevTools();
},
},
],
},
{
label: 'Help',
submenu: [
{
label: 'Support',
accelerator: "CmdOrCtrl+H",
click: async () => {
const { shell } = require('electron');
await shell.openExternal('https://example.com/contact-us');
}
},
{ type: 'separator' },
{
label: 'Quit!',
accelerator: "CmdOrCtrl+Q",
click() {
app.quit();
}
}
]
}
];
const menuTemplateProd = [
{
label: 'Help',
submenu: [
{
label: 'Support',
accelerator: "CmdOrCtrl+H",
click: async () => {
const { shell } = require('electron')
await shell.openExternal('https://example.com/contact-us')
}
},
{ type: 'separator' },
{
label: 'Quit!',
accelerator: "CmdOrCtrl+Q",
click() {
app.quit();
}
}
]
}
];
async function createWindow () {
// Define our main window size
mainWindow = new BrowserWindow({
height: 920,
width: 1600,
show: false,
// icon: __dirname + '/Icon/Icon.icns',
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, 'node_modules', '#capacitor', 'electron', 'dist', 'electron-bridge.js')
}
});
mainWindow.setIcon(path.join(__dirname, '/splash_assets/logo.png'));
configCapacitor(mainWindow);
if (isDevMode) {
// Set our above template to the Menu Object if we are in development mode, dont want users having the devtools.
Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplateDev));
// If we are developers we might as well open the devtools by default.
mainWindow.webContents.openDevTools();
} else {
Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplateProd));
}
if(useSplashScreen) {
splashScreen = new CapacitorSplashScreen(mainWindow);
splashScreen.init();
} else {
mainWindow.loadURL(`file://${__dirname}/app/index.html`);
mainWindow.webContents.on('dom-ready', () => {
mainWindow.show();
});
}
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some Electron APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X 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', function () {
// On OS X 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 (mainWindow === null) {
createWindow();
}
});
// Define any IPC or other custom functionality below here
Any suggestions?

Answer 1

SOLVED
I've added new window function and new index file. And changed my index.js to the following code:
const { app, BrowserWindow, Menu } = require('electron');
const isDevMode = require('electron-is-dev');
const { CapacitorSplashScreen, configCapacitor } = require('#capacitor/electron');
const path = require('path');
// Place holders for our windows so they don't get garbage collected.
let mainWindow = null;
let childWindow = null; // <---- ADDED
// Placeholder for SplashScreen ref
let splashScreen = null;
//Change this if you do not wish to have a splash screen
let useSplashScreen = true;
// Create simple menu for easy devtools access, and for demo
const menuTemplateDev = [
{
label: 'Options',
submenu: [
{
label: 'Open Dev Tools',
accelerator: "CmdOrCtrl+D",
click() {
mainWindow.openDevTools();
},
},
],
},
{
label: 'Help',
submenu: [
{ // <---- ADDED
label: 'About', // <---- ADDED
accelerator: "F1", // <---- ADDED
click: async () => { // <---- ADDED
createAboutWindow(); // <---- ADDED
} // <---- ADDED
}, // <---- ADDED
{
label: 'Support',
accelerator: "CmdOrCtrl+H",
click: async () => {
const { shell } = require('electron');
await shell.openExternal('https://example.com/contact-us');
}
},
{ type: 'separator' },
{
label: 'Quit!',
accelerator: "CmdOrCtrl+Q",
click() {
app.quit();
}
}
]
}
];
const menuTemplateProd = [
{
label: 'Help',
submenu: [
{ // <---- ADDED
label: 'About', // <---- ADDED
accelerator: "F1", // <---- ADDED
click: async () => { // <---- ADDED
createAboutWindow(); // <---- ADDED
} // <---- ADDED
}, // <---- ADDED
{
label: 'Support',
accelerator: "CmdOrCtrl+H",
click: async () => {
const { shell } = require('electron')
await shell.openExternal('https://example.com/contact-us')
}
},
{ type: 'separator' },
{
label: 'Quit!',
accelerator: "CmdOrCtrl+Q",
click() {
app.quit();
}
}
]
}
];
async function createWindow () {
// Define our main window size
mainWindow = new BrowserWindow({
height: 920,
width: 1600,
show: false,
// icon: __dirname + '/Icon/Icon.icns',
webPreferences: {
nodeIntegration: true,
preload: path.join(__dirname, 'node_modules', '#capacitor', 'electron', 'dist', 'electron-bridge.js')
}
});
mainWindow.setIcon(path.join(__dirname, '/splash_assets/logo.png'));
configCapacitor(mainWindow);
if (isDevMode) {
// Set our above template to the Menu Object if we are in development mode, dont want users having the devtools.
Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplateDev));
// If we are developers we might as well open the devtools by default.
mainWindow.webContents.openDevTools();
} else {
Menu.setApplicationMenu(Menu.buildFromTemplate(menuTemplateProd));
}
if(useSplashScreen) {
splashScreen = new CapacitorSplashScreen(mainWindow);
splashScreen.init();
} else {
mainWindow.loadURL(`file://${__dirname}/app/index.html`);
mainWindow.webContents.on('dom-ready', () => {
mainWindow.show();
});
}
}
async function createAboutWindow () { // <---- ADDED
// Define our main window size
childWindow = new BrowserWindow({ // <---- ADDED
height: 400, // <---- ADDED
width: 600, // <---- ADDED
show: false, // <---- ADDED
minimizable: false, // <---- ADDED
maximizable: false, // <---- ADDED
parent: mainWindow, // <---- ADDED
// icon: __dirname + '/Icon/Icon.icns', // <---- ADDED
webPreferences: { // <---- ADDED
nodeIntegration: true, // <---- ADDED
preload: path.join(__dirname, 'node_modules', '#capacitor', 'electron', 'dist', 'electron-bridge.js') // <---- ADDED
} // <---- ADDED
}); // <---- ADDED
childWindow.setIcon(path.join(__dirname, '/splash_assets/logo.png')); // <---- ADDED
configCapacitor(childWindow); // <---- ADDED
childWindow.removeMenu(); // <---- ADDED
childWindow.loadURL(`file://${__dirname}/index_child.html`); // <---- ADDED
childWindow.webContents.on('dom-ready', () => { // <---- ADDED
childWindow.show(); // <---- ADDED
}); // <---- ADDED
} // <---- ADDED
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some Electron APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On OS X 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', function () {
// On OS X 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 (mainWindow === null) {
createWindow();
}
if (childWindow === null) { // <---- ADDED
createAboutWindow(); // <---- ADDED
} // <---- ADDED
});
// Define any IPC or other custom functionality below here
Final result
Hope it can help those in need :) .