electron-api

Adding Electron APIs

Electron APIs allow the frontend to call Electron main process functionality directly via IPC.

Four Files to Edit

1. frontend/types/custom.d.ts - TypeScript ElectronApi type
2. emain/preload.ts - Expose method via contextBridge
3. emain/emain-ipc.ts - Implement IPC handler
4. frontend/preview/preview-electron-api.ts - Add a no-op stub to keep the previewElectronApi object in sync with the ElectronApi type

Three Communication Patterns

1. Sync - ipcRenderer.sendSync() + ipcMain.on() + event.returnValue = ...
2. Async - ipcRenderer.invoke() + ipcMain.handle()
3. Fire-and-forget - ipcRenderer.send() + ipcMain.on()

Example: Async Method

1. Define TypeScript Interface

In frontend/types/custom.d.ts:

type ElectronApi = {
    captureScreenshot: (rect: Electron.Rectangle) => Promise<string>; // capture-screenshot
};

2. Expose in Preload

In emain/preload.ts:

contextBridge.exposeInMainWorld("api", {
    captureScreenshot: (rect: Rectangle) => ipcRenderer.invoke("capture-screenshot", rect),
});

3. Implement Handler

In emain/emain-ipc.ts:

electron.ipcMain.handle("capture-screenshot", async (event, rect) => {
    const tabView = getWaveTabViewByWebContentsId(event.sender.id);
    if (!tabView) throw new Error("No tab view found");
    const image = await tabView.webContents.capturePage(rect);
    return `data:image/png;base64,${image.toPNG().toString("base64")}`;
});

4. Add Preview Stub

In frontend/preview/preview-electron-api.ts:

captureScreenshot: (_rect: Electron.Rectangle) => Promise.resolve(""),

5. Call from Frontend

import { getApi } from "@/store/global";

const dataUrl = await getApi().captureScreenshot({ x: 0, y: 0, width: 800, height: 600 });