diff --git a/README.md b/README.md index 0a132cb..a086e73 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,39 @@ Once `dev` or `build` npm-script executed will be generate named `dist` folder. #### All Electron, NodeJs API invoke passed `Preload-script` +* **src/preload/index.ts** + + ```typescript + import fs from 'fs' + import { contextBridge, ipcRenderer } from 'electron' + + // Expose Electron, NodeJs API to Renderer-process + contextBridge.exposeInMainWorld('bridge', { + fs, + ipcRenderer: withPrototype(ipcRenderer), + }) + ``` + +* **src/renderer/src/global.d.ts** + + ```typescript + // Defined on the window + interface Window { + bridge: { + fs: typeof import('fs') + ipcRenderer: import('electron').IpcRenderer + } + } + ``` + +* **src/renderer/src/main.tsx** + + ```typescript + // Use Electron, NodeJs API in Renderer-process + console.log('fs', window.bridge.fs) + console.log('ipcRenderer', window.bridge.ipcRenderer) + ``` + ## Shown diff --git a/README.zh-CN.md b/README.zh-CN.md index db3932b..200536d 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -66,6 +66,39 @@ #### 推荐所有的 NodeJs、Electron API 通过 `Preload-script` 注入到 渲染进程中 +* **src/preload/index.ts** + + ```typescript + import fs from 'fs' + import { contextBridge, ipcRenderer } from 'electron' + + // Expose Electron, NodeJs API to Renderer-process + contextBridge.exposeInMainWorld('bridge', { + fs, + ipcRenderer: withPrototype(ipcRenderer), + }) + ``` + +* **src/renderer/src/global.d.ts** + + ```typescript + // Defined on the window + interface Window { + bridge: { + fs: typeof import('fs') + ipcRenderer: import('electron').IpcRenderer + } + } + ``` + +* **src/renderer/src/main.tsx** + + ```typescript + // Use Electron, NodeJs API in Renderer-process + console.log('fs', window.bridge.fs) + console.log('ipcRenderer', window.bridge.ipcRenderer) + ``` + ## 效果