@kyohxt/electron-toolkit-preload
v1.0.2
Published
Toolkit for electron preload scripts.
Downloads
5
Maintainers
Readme
@electron-toolkit/preload
Easy to expose Electron APIs (ipcRenderer,webFrame,process) to renderer.
Usage
Install
npm i @electron-toolkit/preload
Get Started
First, use contextBridge
APIs to expose Electron APIs to renderer only if context isolation is enabled, otherwise just add to the DOM global.
import { contextBridge } from 'electron'
import { electronAPI } from '@electron-toolkit/preload'
if (process.contextIsolated) {
try {
contextBridge.exposeInMainWorld('electron', electronAPI)
} catch (error) {
console.error(error)
}
} else {
window.electron = electronAPI
}
or
import { electronAPI } from '@electron-toolkit/preload'
exposeElectronAPI()
Then, use the Electron APIs directly in the renderer process:
// Send a message to the main process with no response
window.electron.ipcRenderer.send('electron:say', 'hello')
// Send a message to the main process with the response asynchronously
window.electron.ipcRenderer.invoke('electron:doAThing', '').then(re => {
console.log(re)
})
// Receive messages from the main process
window.electron.ipcRenderer.on('electron:reply', (_, args) => {
console.log(args)
})
// Remove a listener
const removeListener = window.electron.ipcRenderer.on('electron:reply', (_, args) => {})
removeListener()
Note: If you're building your Electron app with TypeScript, you may want to get TypeScript intelliSense for the renderer process. So that you can create a *.d.ts
declaration file and globally augment the Window
interface:
import { ElectronAPI } from '@electron-toolkit/preload'
declare global {
interface Window {
electron: ElectronAPI
}
}
API
IpcRenderer
send
sendTo
sendSync
sendToHost
invoke
postMessage
on
once
removeAllListeners
removeListener
WebFrame
insertCSS
setZoomFactor
setZoomLevel
NodeProcess
platform
propertyversions
propertyenv
property
License
MIT © alex.wei