electron_ipc_two_way_communication_with_context_bridge_preload.ts

1/**
2 * 1. MAIN PROCESS (main.ts)
3 * Handles the IPC 'dialog:openFile' channel.
4 */
5import { app, BrowserWindow, ipcMain, dialog } from 'electron';
6import * as path from 'path';
7
8async function handleFileOpen() {
9  const { canceled, filePaths } = await dialog.showOpenDialog({});
10  if (!canceled) {
11    return filePaths[0];
12  }
13}
14
15function createWindow() {
16  const mainWindow = new BrowserWindow({
17    webPreferences: {
18      preload: path.join(__dirname, 'preload.js')
19    }
20  });
21  mainWindow.loadFile('index.html');
22}
23
24app.whenReady().then(() => {
25  // Set up the listener before creating the window
26  ipcMain.handle('dialog:openFile', handleFileOpen);
27  createWindow();
28
29  app.on('activate', function () {
30    if (BrowserWindow.getAllWindows().length === 0) createWindow();
31  });
32});
33
34app.on('window-all-closed', function () {
35  if (process.platform !== 'darwin') app.quit();
36});
37
38
39/**
40 * 2. PRELOAD SCRIPT (preload.ts)
41 * Safely exposes IPC methods to the renderer via Context Bridge.
42 */
43import { contextBridge, ipcRenderer } from 'electron';
44
45contextBridge.exposeInMainWorld('electronAPI', {
46  openFile: () => ipcRenderer.invoke('dialog:openFile')
47});
48
49
50/**
51 * 3. RENDERER PROCESS (renderer.ts)
52 * Calls the exposed API and handles the promise result.
53 */
54// Define the interface for TypeScript's global Window object
55interface Window {
56  electronAPI: {
57    openFile: () => Promise<string>;
58  };
59}
60
61const btn = document.getElementById('btn') as HTMLButtonElement;
62const filePathElement = document.getElementById('filePath') as HTMLElement;
63
64btn.addEventListener('click', async () => {
65  // Use the API exposed by the preload script
66  const filePath = await (window as any).electronAPI.openFile();
67  filePathElement.innerText = filePath;
68});