add local time button, understood the concept of IPC with preload.js

Author: AnishOnGithub

index.html

@@ -13,7 +13,10 @@ <h1>Hello World!</h1>
     Chromium <span id="chrome-version"></span>,
     and Electron <span id="electron-version"></span>.
 
-    <!-- You can also require other files to run in this process -->
+    <button id="timeBtn">Get Local Time</button>
+
+    <!-- Div to display received time -->
+    <div id="output"></div>
     <script src="./renderer.js"></script>
   </body>
 </html>

main.js

@@ -1,43 +1,43 @@
-// Modules to control application life and create native browser window
-const { app, BrowserWindow } = require('electron')
+// Modules to control application life, create windows, and handle IPC
+const { app, BrowserWindow, ipcMain } = require('electron')
 const path = require('node:path')
 
-function createWindow () {
-  // Create the browser window.
+// Function to create the main browser window
+function createWindow() {
   const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
-      preload: path.join(__dirname, 'preload.js')
+      // Preload script exposes safe APIs to renderer
+      preload: path.join(__dirname, 'preload.js'),
+      contextIsolation: true,  // keep renderer isolated for security
+      nodeIntegration: false   // disable Node access in renderer
     }
   })
 
-  // and load the index.html of the app.
-  mainWindow.loadFile('index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
+  mainWindow.loadFile('index.html') // load UI
+  // mainWindow.webContents.openDevTools() // optional for debugging
 }
 
-// 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.
+// Called when Electron has finished initialization
 app.whenReady().then(() => {
   createWindow()
 
-  app.on('activate', function () {
-    // 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.
+  // macOS: re-create window when dock icon clicked and no windows open
+  app.on('activate', () => {
     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', function () {
+// Quit app when all windows are closed (except macOS)
+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.
+// ----------------------
+// IPC: listen for time requests from renderer
+// Sends back local system time as string
+ipcMain.on('get-time', (event) => {
+  const now = new Date() // get local system time
+  event.reply('time-response', now.toLocaleTimeString()) // send formatted time back
+})

preload.js

@@ -6,13 +6,12 @@
  *
  * https://www.electronjs.org/docs/latest/tutorial/sandbox
  */
-window.addEventListener('DOMContentLoaded', () => {
-  const replaceText = (selector, text) => {
-    const element = document.getElementById(selector)
-    if (element) element.innerText = text
-  }
+const { contextBridge, ipcRenderer } = require('electron')
 
-  for (const type of ['chrome', 'node', 'electron']) {
-    replaceText(`${type}-version`, process.versions[type])
-  }
+contextBridge.exposeInMainWorld('electronAPI', {
+  // Function to request local time from main process
+  getTime: () => ipcRenderer.send('get-time'),
+
+  // Function to listen for the time response
+  onTimeResponse: (callback) => ipcRenderer.on('time-response', callback)
 })

renderer.js

@@ -5,3 +5,15 @@
  * `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
  * to expose Node.js functionality from the main process.
  */
+// Renderer process: handles UI interactions
+
+// When button is clicked, request local time from main process
+document.getElementById('timeBtn').addEventListener('click', () => {
+    window.electronAPI.getTime()
+  })
+  
+  // When main process replies, update output div with the received time
+  window.electronAPI.onTimeResponse((event, time) => {
+    document.getElementById('output').innerText = time
+  })
+