electron#contextBridge TypeScript Examples

contextBridge.exposeInMainWorld("native", {
    min: () => ipcRenderer.send("min"),
    max: () => ipcRenderer.send("max"),
    close: () => ipcRenderer.send("close"),
    reload: () => ipcRenderer.send("reload"),
    relaunch: () => ipcRenderer.send("relaunch"),

    getConfig: () => config,
    set: (k: string, v: any) => config.set(k, v),

    getAutoStart: () =>
        new Promise((resolve) => {
            ipcRenderer.send("getAutoStart");
            ipcRenderer.on("autoStart", (_, arg) => resolve(arg));
        }),
    enableAutoStart: () =>
        new Promise((resolve) => {
            ipcRenderer.send("setAutoStart", true);
            ipcRenderer.on("autoStart", (_, arg) => resolve(arg));
        }),
    disableAutoStart: () =>
        new Promise((resolve) => {
            ipcRenderer.send("setAutoStart", false);
            ipcRenderer.on("autoStart", (_, arg) => resolve(arg));
        }),
});

contextBridge.exposeInMainWorld("electron", <ElectronGlobal>{
	onDoubleClickDragArea: () => ipcRenderer.send("double-click-drag-area"),
	registerUndo: (fn) => {
		_onUndo = fn;
	},
	registerRedo: (fn) => {
		_onRedo = fn;
	},
});

contextBridge.exposeInMainWorld('Electron', {
  ipcRenderer: {
    ...ipcRenderer,
    on: (name: string, handler: (event: Electron.IpcRendererEvent, ...args: any[]) => void) => {
      ipcRenderer.on(name, handler);
      return ipcRenderer;
    },
    removeListener: (name: string, handler: (event: Electron.IpcRendererEvent, ...args: any[]) => void) => {
      ipcRenderer.removeListener(name, handler);
    }
  }
});

contextBridge.exposeInMainWorld('electron', {
  ipc: {
    on: (channel: string, cb: EventCallback) => ipcRenderer.on(channel, cb),
    send: (channel: string, data: any, cb?: EventCallback) => {
      ipcRenderer.send(channel, data)
      if (cb && typeof cb === 'function') {
        ipcRenderer.on(channel, cb)
      }
    },
    removeListener: (channel: string, cb: EventCallback) =>
      ipcRenderer.removeListener(channel, cb),
    removeListeners: (channel: string) =>
      ipcRenderer.removeAllListeners(channel)
  },
  store: {
    set: (key: any, value: any) => store.app.set(key, value),
    get: (key: any) => store.app.get(key),
    on: (key: any, cb: any) => store.app.onDidChange(key, cb)
  }
})

contextBridge.exposeInMainWorld('myAPI', {
    getWindowId: async (): Promise<string | null> => {
        const sources = await desktopCapturer.getSources({ types: ['window', 'screen'] })
        let targetId: string | null = null
        for (let source of sources) {
            console.log(`WINDOW NAME: name ${source.name}, ${source.display_id}, ${source.id}`);
            if (source.name === "Entire Screen" || source.name === "CHIME_MANAGER") {
            // if (source.name === "CHIME_MANAGER") {
                    targetId = source.id
            }
        }
        return targetId
    },
    getEnvVars: (): { [key: string]: string|undefined } => {
        console.log(process.env)

        const {CODE, UUID, MEETING_NAME, ATTENDEE_ID, RESTAPI_ENDPOINT} = process.env
        return  {CODE, UUID, MEETING_NAME, ATTENDEE_ID, RESTAPI_ENDPOINT}

    },
    finalize: (): void => {
        ipcRenderer.invoke('finalize', 'ping')
    },
    onAmongusUpdateMessage: (listener: (message: string) => void) =>{
        ipcRenderer.on('amongus-gamestate-updated', (ev: IpcRendererEvent, message: string) => listener(message))
    },
    recorderDataAvailable1: (file:string, data:Uint8Array):void =>{
        ipcRenderer.invoke('recorder-data-available1', file, data)
    },
    recorderDataAvailable2: (file:string, data:Uint8Array):void =>{
        ipcRenderer.invoke('recorder-data-available2', file, data)
    },
    

});

/**
 * The "Main World" is the JavaScript context that your main renderer code runs in.
 * By default, the page you load in your renderer executes code in this world.
 *
 * @see https://www.electronjs.org/docs/api/context-bridge
 */

/**
 * After analyzing the `exposeInMainWorld` calls,
 * `packages/preload/exposedInMainWorld.d.ts` file will be generated.
 * It contains all interfaces.
 * `packages/preload/exposedInMainWorld.d.ts` file is required for TS is `renderer`
 *
 * @see https://github.com/cawa-93/dts-for-context-bridge
 */

/**
 * Expose Environment versions.
 * @example
 * console.log( window.versions )
 */
contextBridge.exposeInMainWorld('versions', process.versions);

/**
 * Safe expose node.js API
 * @example
 * window.nodeCrypto('data')
 */
contextBridge.exposeInMainWorld('nodeCrypto', {
  sha256sum(data: BinaryLike) {
    const hash = createHash('sha256');
    hash.update(data);
    return hash.digest('hex');
  },
});

contextBridge.exposeInMainWorld('remote', remoteMethods);

contextBridge.exposeInMainWorld('electron', api);

contextBridge.exposeInMainWorld('api', api)

contextBridge.exposeInMainWorld('meta', browserViewMetaData);

contextBridge.exposeInMainWorld('i18n', i18n);

contextBridge.exposeInMainWorld('log', logMethods);

contextBridge.exposeInMainWorld("utils", utilsBridge)

contextBridge.exposeInMainWorld('service', service);

contextBridge.exposeInMainWorld('ipcRenderer', ipcRenderer);

contextBridge.exposeInMainWorld("settings", settingsBridge)

contextBridge.exposeInMainWorld("ipcRenderer", <IpcRendereApi>{
  send: (channel: string, ...args: any[]) => ipcRenderer.send(channel, ...args),
  on: (
    channel: string,
    listener: (event: IpcRendererEvent, ...args: any[]) => void
  ) => ipcRenderer.on(channel, listener),
});

contextBridge.exposeInMainWorld("nativeVersion", "1.0.5");

contextBridge.exposeInMainWorld("isNative", true);

contextBridge.exposeInMainWorld('CapacitorCustomPlatform', {
  name: 'electron',
  plugins: contextApi,
});

contextBridge.exposeInMainWorld('CapacitorCustomPlatform', {
  name: 'electron',
  plugins: contextApi,
});

contextBridge.exposeInMainWorld("remote", {
  getVersion: remote.app.getVersion,
});

contextBridge.exposeInMainWorld("ipcRenderer", {
  send: (channel: string, data: any[]) => {
    ipcRenderer.send(channel, data);
  },
  receive: (channel: string, func: IpcListener) => {
    ipcRenderer.on(channel, (event, ...args: any[]) => func(event, ...args));
  },
});

contextBridge.exposeInMainWorld('ElectronMain', {
  accountStore: {
    all: () => ipcRenderer.invoke('account-store-all'),
    get: (key: string) => ipcRenderer.invoke('account-store-get', key),
    remove: (key: string) => ipcRenderer.invoke('account-store-remove', key),
    set: (key: string, value: KeyringJson) => ipcRenderer.invoke('account-store-set', key, value)
  }
});

contextBridge.exposeInMainWorld(
	"clipboardApi", clipboardApi
);

contextBridge.exposeInMainWorld(
    "restrictedIpcRenderer", restrictedIpcRenderer
);

contextBridge.exposeInMainWorld("api", frontendAPI);

// For safe espose api to renderer, strip all global declare
contextBridge.exposeInMainWorld('api', {
    close(): void {
        ipcRenderer.send('fido2-modal-close');
    },
    acceptRequest(): void {
        return ipcRenderer.send('fido2-event-response', true);
    },
    rejectRequest(): void {
        return ipcRenderer.send('fido2-event-response', false);
    },
    get getRequest(): Promise<ModalRequest> {
        return new Promise<ModalRequest>((resolve, reject) => ipcRenderer.once('fido2-event-request', (_, request) => resolve(request)));
    },
    deviceAttach(listener: (device: any) => void): void {
        ipcRenderer.on('fido2-event-device-attach', (_, device) => listener(device));
    },
    deviceDetach(listener: (device: any) => void): void {
        ipcRenderer.on('fido2-event-device-detach', (_, device) => listener(device));
    },
    selectDevice(device: any): Promise<any> {
        return new Promise<any>((resolve, reject) => {
            ipcRenderer.once('fido2-event-device-selected', (_, info) => resolve(info));
            ipcRenderer.send('fido2-event-select-device', device);
        });
    },
    cancelTransaction(): void {
        return ipcRenderer.send('fido2-event-cancel');
    },
    keepAlive(listener: (status: number) => void): void {
        ipcRenderer.on('fido2-event-keep-alive', (_, status) => listener(status));
    },
    error(e: string): void {
        ipcRenderer.send('fido2-event-error', e);
    },
    get transactionSuccess(): Promise<void> {
        return new Promise<void>((resolve, reject) => ipcRenderer.once('fido2-event-success', () => resolve()));
    },
    enterPin(pin: string): void {
        ipcRenderer.send('fido2-event-pin-available', pin);
    },
    get pinValid(): Promise<void> {
        return new Promise<void>((resolve, reject) => ipcRenderer.once('fido2-event-pin-valid', _ => resolve()));
    },
    pinInvalid(listener: (retries: number) => void): void {
        ipcRenderer.on('fido2-event-pin-invalid', (_, retries) => listener(retries));
    },
    get pinAuthBlocked(): Promise<void> {
        return new Promise<void>((resolve, reject) => ipcRenderer.once('fido2-event-pin-auth-blocked', () => resolve()));
    },
    get pinBlocked(): Promise<void> {
        return new Promise<void>((resolve, reject) => ipcRenderer.once('fido2-event-pin-blocked', () => resolve()));
    },
    get noCredentials(): Promise<void> {
        return new Promise<void>((resolve, reject) => ipcRenderer.once('fido2-event-no-credentials', () => resolve()));
    },
    get timeout(): Promise<void> {
        return new Promise<void>((resolve, reject) => ipcRenderer.once('fido2-event-timeout', () => resolve()));
    }
} as IpcRendererApi);