Electron API Quick Reference and Configuration Template

Main Process API Quick Reference

Module	Function Description	Common Methods	Description
app	Control application lifecycle	`app.on('ready')`、`app.quit()`、`app.getPath('userData')`	Manage app startup, shutdown, paths, protocol registration, etc.
BrowserWindow	Create and manage windows	`new BrowserWindow(options)`、`win.loadFile()`、`win.loadURL()`、`win.webContents`	The main UI container of an Electron app, which runs the renderer process inside
ipcMain	Main process communication interface	`ipcMain.on(channel, callback)`、`ipcMain.handle(channel, handler)`	Listen for messages or call requests sent by the renderer process
Menu	Create application menu	`Menu.buildFromTemplate(menuTemplate)`、`Menu.setApplicationMenu(menu)`	Customizable menu items, shortcuts, and context menus
Tray	System tray management	`new Tray(icon)`、`tray.setToolTip()`、`tray.setContextMenu(menu)`	Display an icon in the taskbar, commonly used for background resident applications
Dialog	System native dialogs	`dialog.showOpenDialog()`、`dialog.showSaveDialog()`、`dialog.showMessageBox()`	System interactions such as file selection, saving, and message prompts
Notification	System Notification	`new Notification({ title, body }).show()`	Send native system notifications, with optional click callbacks
Shell	Call external system resources	`shell.openExternal(url)`、`shell.showItemInFolder(path)`	Open external web pages, folders, and executable files
Protocol	Register custom protocol	`protocol.registerFileProtocol()`、`protocol.handle()`	For custom resource loading or deep links
Session	Manage sessions, cache, and cookies	`session.defaultSession.cookies.get()`、`clearCache()`	Low-level control over browsing data and requests
Net	Native HTTP/HTTPS Network Requests	`net.request(options)`	A lower-level network module, with better performance than...`fetch`
PowerMonitor	Monitor system power status	`powerMonitor.on('suspend')`、`on('resume')`	Listen for computer sleep, wake, lock screen, and other states
Clipboard	Clipboard operations	`clipboard.readText()`、`clipboard.writeText()`	Support cross-platform copy-paste of text, images, etc.
GlobalShortcut	Register global shortcuts	`globalShortcut.register('CommandOrControl+X', fn)`	Keyboard shortcuts that work across windows and in the background

Renderer Process API Quick Reference

Module	Function Description	Common Methods	Description
ipcRenderer	Communicate with the main process	`ipcRenderer.send()`、`ipcRenderer.invoke()`、`ipcRenderer.on()`	Used by the renderer process to send, receive, and invoke main process events
webFrame	Control current page content	`webFrame.setZoomFactor()`、`webFrame.insertCSS()`	Dynamically modify page zoom and styles
contextBridge	Safely expose APIs	`contextBridge.exposeInMainWorld('api', {...})`	On enabling`contextIsolation`When securely interacting with the main process
desktopCapturer	Capture screen content	`desktopCapturer.getSources({ types: ['window', 'screen'] })`	For screenshots or screen recording features
Notification	Notification API	`new Notification('标题', { body: '内容' })`	Send notifications using the browser-standard Notification API
Clipboard	Clipboard operations	`navigator.clipboard.readText()`	Can access the system clipboard (some features are restricted)
Web Storage / IndexedDB	Local Storage	`localStorage.setItem()`、`indexedDB.open()`	Save lightweight or structured data
Fetch / Axios	Network request	`fetch(url)`、`axios.get()`	For accessing remote APIs and loading resources
DOM / Window	Page Control	`document.querySelector()`、`window.open()`	All Web APIs are available

Common Helper Modules Quick Reference

Module	Main Features	Example
fs	File Operations	`fs.readFileSync(path)`、`fs.writeFile(path, data)`
path	Path join	`path.join(__dirname, 'index.html')`
os	System Information	`os.platform()`、`os.homedir()`
child_process	Execute child process	`exec('ls', callback)`
electron-store	Persistent configuration	`store.set('key', value)`、`store.get('key')`
sqlite3 / better-sqlite3	Local database	`db.prepare('SELECT * FROM notes').all()`
axios / node-fetch	Network request	`axios.post(url, data)`
node-gyp	Native module compilation	`node-gyp rebuild`

Configuration file templates and instructions

package.json Template and Instructions

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "示例 Electron 应用",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "devDependencies": {
    "electron": "^33.0.0",
    "electron-builder": "^24.6.0"
  },
  "build": {
    "appId": "com.example.myelectronapp",
    "productName": "MyElectronApp",
    "directories": {
      "output": "dist"
    },
    "files": [
      "main.js",
      "preload.js",
      "renderer/**/*"
    ],
    "win": {
      "target": "nsis",
      "icon": "assets/icon.ico"
    },
    "mac": {
      "category": "public.app-category.productivity",
      "icon": "assets/icon.icns"
    },
    "linux": {
      "target": "AppImage",
      "icon": "assets/"
    }
  }
}

Description:

Fields	Meaning
name / version / description	App name, version number, and description information
main	Main process entry file (required)
scripts	Define command scripts,`npm start`Start,`npm run dist`Pack
devDependencies	Development dependencies (Electron, packaging tools, etc.)
build	`electron-builder`Configuration Item
appId	Unique app ID, used for signing and update identification
productName	App name displayed after packaging
directories.output	Packaging output path
files	Specify files and directories to package into the application
win/mac/linux	Independent packaging configuration for each platform (icons, target formats)

electron-builder.yml template and instructions

appId: com.example.myelectronapp
productName: MyElectronApp
directories:
  output: dist
files:
  - "main.js"
  - "preload.js"
  - "renderer/**/*"
win:
  target: nsis
  icon: assets/icon.ico
mac:
  target: dmg
  icon: assets/icon.icns
linux:
  target: AppImage
  icon: assets/
publish:
  provider: github
  repo: my-electron-app
  owner: username

Description:

Configuration Item	Description
appId / productName	Unique app identifier and name
directories.output	Packaging output directory
files	Packaged file list (supports wildcards)
win / mac / linux	Build targets and icon configurations for different systems
publish	Release source configuration for auto-updates (e.g., GitHub Releases)

TypeScript tsconfig.json template and explanation

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Description:

Options	Meaning
target	Compilation Target JavaScript Version
module	Module system, generally used by the Electron main process`commonjs`
outDir / rootDir	Output and source directories
strict	Enable strict type checking
esModuleInterop	Allow default imports of non-ES modules
resolveJsonModule	Support importing JSON files
skipLibCheck	Skip declaration file checks to speed up compilation

other extensions