electron
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseElectron embeds Chromium and Node.js so you can ship one JavaScript codebase for Windows, macOS, and Linux. Use these skills when scaffolding projects, wiring main/renderer IPC, configuring security and packaging, or integrating native modules and auto-updates.
The skill is based on Electron (latest), generated at 2026-01-30.
Electron内置了Chromium和Node.js，因此你可以基于一套JavaScript代码库，发布适配Windows、macOS和Linux系统的应用。这些技能适用于项目搭建、主进程/渲染进程IPC通信配置、安全与打包设置、原生模块集成以及自动更新功能开发等场景。
本技能基于最新版Electron开发，生成时间为2026年1月30日。
Core References
核心参考
| Topic | Description | Reference |
|---|---|---|
| Process Model | Main, renderer, preload, utility process; when to use each | core-process-model |
| IPC | Renderer↔main patterns (send, invoke, main→renderer), serialization | core-ipc |
| Context Isolation | contextBridge, exposing safe APIs from preload | core-context-isolation |
| Sandbox | Process sandboxing, preload polyfill, when it is disabled | core-sandbox |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 进程模型 | 主进程、渲染进程、预加载进程、实用工具进程；各进程的适用场景 | core-process-model |
| IPC通信 | 渲染进程↔主进程的通信模式（send、invoke、主进程→渲染进程）、序列化处理 | core-ipc |
| 上下文隔离 | contextBridge、从预加载进程暴露安全API | core-context-isolation |
| 沙箱机制 | 进程沙箱、预加载兼容处理、沙箱禁用场景 | core-sandbox |
Develop
开发指南
| Topic | Description | Reference |
|---|---|---|
| Accessibility | setAccessibilitySupportEnabled, assistive tech, AXManualAccessibility | develop-accessibility |
| App Lifecycle | whenReady, window-all-closed, quit, single instance lock | develop-app-lifecycle |
| BaseWindow | Multi-view windows; contentView, View, addChildView; parent/modal | develop-base-window |
| BrowserWindow | Creating windows, loadURL/loadFile, ready-to-show, webPreferences | develop-browser-window |
| Clipboard | readText/writeText, readHTML/writeHTML; use from preload | develop-clipboard |
| Cookies | session.cookies; get, set, remove, flushStore; changed event | develop-cookies |
| Command Line | app.commandLine, appendSwitch, hasSwitch; Electron/Node/Chromium flags | develop-command-line |
| Context Menu | Right-click menu; webContents context-menu, Menu.popup | develop-context-menu |
| contentTracing | Chromium tracing; startRecording, stopRecording; chrome://tracing | develop-content-tracing |
| Crash Reporter | crashReporter.start, submitURL, extra; call before ready | develop-crash-reporter |
| Debug | Renderer DevTools, main process (--inspect, Chrome/VSCode) | develop-debug |
| Debugger (CDP) | webContents.debugger; attach, detach, sendCommand; DevTools Protocol | develop-debugger |
| DevTools Extension | loadExtension, removeExtension; electron-devtools-installer | develop-devtools-extension |
| Dialog | showOpenDialog, showSaveDialog, showMessageBox; expose via IPC | develop-dialog |
| Dock | macOS Dock; bounce, badge, icon, menu, hide/show | develop-dock |
| Downloads | will-download, DownloadItem, setSavePath, preventDefault | develop-downloads |
| Keyboard Shortcuts | Accelerators, local (MenuItem), global (globalShortcut) | develop-keyboard-shortcuts |
| Linux Desktop Actions | .desktop file Actions; launcher shortcuts; process.argv | develop-linux-desktop-actions |
| Menus and Tray | Application/context/tray/dock menus; Tray icon and context menu | develop-menus-tray |
| Native Image | createFromPath, createFromBuffer, template image; tray, icon | develop-native-image |
| Native Modules | Using native Node addons; @electron/rebuild, node-gyp | develop-native-modules |
| Net | net.fetch, net.request; HTTP from main (Chromium stack) | develop-net |
| netLog | Session network logging; startLogging, stopLogging, captureMode | develop-net-log |
| Drag and Drop | Native file drag out; webContents.startDrag, IPC | develop-drag-drop |
| ESM | ES modules in main and preload; .mjs, caveats | develop-esm |
| Multithreading | Web Workers, nodeIntegrationInWorker; no Electron in workers | develop-multithreading |
| Navigation History | webContents.navigationHistory, goBack, goForward, getAllEntries | develop-navigation-history |
| Offscreen Rendering | paint event, NativeImage; GPU vs software; setFrameRate | develop-offscreen-rendering |
| parentPort | Utility process child; process.parentPort message/postMessage | develop-parent-port |
| Power Monitor | suspend, resume, battery/AC, thermal-state-change, shutdown | develop-power-monitor |
| Power Save Blocker | powerSaveBlocker; prevent display/app sleep; start/stop by id | develop-power-save-blocker |
| Progress Bar | setProgressBar (taskbar/dock); 0–1, indeterminate | develop-progress-bar |
| Protocol | Custom protocol (protocol.handle), registerSchemesAsPrivileged | develop-protocol |
| Recent Documents | addRecentDocument, clearRecentDocuments; JumpList, Dock | develop-recent-documents |
| Safe Storage | encryptString, decryptString; OS keychain | develop-safe-storage |
| Screen | getPrimaryDisplay, getAllDisplays, workAreaSize, display events | develop-screen |
| Session | partition, defaultSession, permissionRequestHandler, cookies | develop-session |
| Share Menu | macOS ShareMenu; share to apps/social; popup, shareMenu role | develop-share-menu |
| Shell | openExternal, openPath, showItemInFolder, trashItem; security | develop-shell |
| Process | process.type, process.versions, process.platform, process.mas | develop-process |
| Environment Variables | ELECTRON_*, NODE_OPTIONS; fuses | develop-environment-variables |
| Represented File | setRepresentedFilename, setDocumentEdited (macOS title bar) | develop-represented-file |
| System Preferences | getEffectiveAppearance, getColor, getMediaAccessStatus | develop-system-preferences |
| Touch Bar | macOS TouchBar; items (Button, Label, Slider, etc.), setTouchBar | develop-touch-bar |
| Tests | WebDriver/WebdriverIO E2E, headless CI | develop-tests |
| Utility Process | utilityProcess.fork, postMessage, MessagePortMain | develop-utility-process |
| Web Request | onBeforeRequest, onHeadersReceived, filter; set CSP | develop-web-request |
| webContents Navigation | will-navigate, setWindowOpenHandler, load events | develop-webcontents-navigation |
| webFrame | Renderer zoom, insertCSS, executeJavaScript, spell check, frame tree | develop-web-frame |
| webFrameMain | Main process frame control; fromId/fromFrameToken, executeJavaScript, IPC | develop-web-frame-main |
| webUtils | Renderer getPathForFile(File); file input path; expose via preload | develop-web-utils |
| Window Customization | Frameless, transparent, custom title bar | develop-window-customization |
| Windows Taskbar | JumpList, setThumbarButtons, setOverlayIcon, flashFrame | develop-windows-taskbar |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 无障碍访问 | setAccessibilitySupportEnabled、辅助技术、AXManualAccessibility | develop-accessibility |
| 应用生命周期 | whenReady、window-all-closed、quit、单实例锁 | develop-app-lifecycle |
| 基础窗口 | 多视图窗口；contentView、View、addChildView；父窗口/模态窗口 | develop-base-window |
| 浏览器窗口 | 创建窗口、loadURL/loadFile、ready-to-show、webPreferences配置 | develop-browser-window |
| 剪贴板 | readText/writeText、readHTML/writeHTML；从预加载进程调用 | develop-clipboard |
| Cookies | session.cookies；获取、设置、删除、flushStore；changed事件 | develop-cookies |
| 命令行 | app.commandLine、appendSwitch、hasSwitch；Electron/Node/Chromium参数 | develop-command-line |
| 上下文菜单 | 右键菜单；webContents context-menu、Menu.popup | develop-context-menu |
| contentTracing | Chromium追踪；startRecording、stopRecording；chrome://tracing | develop-content-tracing |
| 崩溃上报 | crashReporter.start、submitURL、extra；需在ready前调用 | develop-crash-reporter |
| 调试 | 渲染进程DevTools、主进程调试（--inspect、Chrome/VSCode） | develop-debug |
| 调试器（CDP） | webContents.debugger；attach、detach、sendCommand；DevTools协议 | develop-debugger |
| DevTools扩展 | loadExtension、removeExtension；electron-devtools-installer | develop-devtools-extension |
| 对话框 | showOpenDialog、showSaveDialog、showMessageBox；通过IPC暴露给渲染进程 | develop-dialog |
| Dock（macOS） | macOS Dock；弹跳、徽章、图标、菜单、隐藏/显示 | develop-dock |
| 下载管理 | will-download、DownloadItem、setSavePath、preventDefault | develop-downloads |
| 键盘快捷键 | 加速器、本地快捷键（MenuItem）、全局快捷键（globalShortcut） | develop-keyboard-shortcuts |
| Linux桌面操作 | .desktop文件操作；启动器快捷方式；process.argv | develop-linux-desktop-actions |
| 菜单与托盘 | 应用/上下文/托盘/Dock菜单；托盘图标与上下文菜单 | develop-menus-tray |
| 原生图片 | createFromPath、createFromBuffer、模板图片；托盘、图标使用 | develop-native-image |
| 原生模块 | 使用Node原生扩展；@electron/rebuild、node-gyp | develop-native-modules |
| 网络请求 | net.fetch、net.request；主进程发起HTTP请求（基于Chromium栈） | develop-net |
| 网络日志 | 会话网络日志；startLogging、stopLogging、captureMode | develop-net-log |
| 拖拽功能 | 原生文件拖拽导出；webContents.startDrag、IPC通信 | develop-drag-drop |
| ESM模块 | 主进程与预加载进程中的ES模块；.mjs、注意事项 | develop-esm |
| 多线程 | Web Workers、nodeIntegrationInWorker；Worker中无法使用Electron API | develop-multithreading |
| 导航历史 | webContents.navigationHistory、goBack、goForward、getAllEntries | develop-navigation-history |
| 离屏渲染 | paint事件、NativeImage；GPU vs 软件渲染；setFrameRate | develop-offscreen-rendering |
| parentPort | 实用工具进程子进程；process.parentPort message/postMessage | develop-parent-port |
| 电源监控 | suspend、resume、电池/AC供电、thermal-state-change、shutdown | develop-power-monitor |
| 电源休眠阻止 | powerSaveBlocker；阻止显示器/应用休眠；通过ID启动/停止 | develop-power-save-blocker |
| 进度条 | setProgressBar（任务栏/Dock）；0–1进度、不确定进度 | develop-progress-bar |
| 自定义协议 | 自定义协议（protocol.handle）、registerSchemesAsPrivileged | develop-protocol |
| 最近文档 | addRecentDocument、clearRecentDocuments；JumpList、Dock | develop-recent-documents |
| 安全存储 | encryptString、decryptString；系统钥匙串 | develop-safe-storage |
| 屏幕管理 | getPrimaryDisplay、getAllDisplays、workAreaSize、显示器事件 | develop-screen |
| 会话管理 | partition、defaultSession、permissionRequestHandler、cookies | develop-session |
| 分享菜单（macOS） | macOS ShareMenu；分享到应用/社交平台；popup、shareMenu角色 | develop-share-menu |
| Shell操作 | openExternal、openPath、showItemInFolder、trashItem；安全注意事项 | develop-shell |
| 进程信息 | process.type、process.versions、process.platform、process.mas | develop-process |
| 环境变量 | ELECTRON_*、NODE_OPTIONS；fuses配置 | develop-environment-variables |
| 关联文件 | setRepresentedFilename、setDocumentEdited（macOS标题栏） | develop-represented-file |
| 系统偏好设置 | getEffectiveAppearance、getColor、getMediaAccessStatus | develop-system-preferences |
| Touch Bar（macOS） | macOS TouchBar；组件（Button、Label、Slider等）、setTouchBar | develop-touch-bar |
| 测试 | WebDriver/WebdriverIO端到端测试、无头CI环境 | develop-tests |
| 实用工具进程 | utilityProcess.fork、postMessage、MessagePortMain | develop-utility-process |
| Web请求 | onBeforeRequest、onHeadersReceived、filter；设置CSP | develop-web-request |
| webContents导航 | will-navigate、setWindowOpenHandler、加载事件 | develop-webcontents-navigation |
| webFrame | 渲染进程缩放、insertCSS、executeJavaScript、拼写检查、框架树 | develop-web-frame |
| webFrameMain | 主进程框架控制；fromId/fromFrameToken、executeJavaScript、IPC | develop-web-frame-main |
| webUtils | 渲染进程getPathForFile(File)；文件输入路径；通过预加载进程暴露 | develop-web-utils |
| 窗口自定义 | 无边框窗口、透明窗口、自定义标题栏 | develop-window-customization |
| Windows任务栏 | JumpList、setThumbarButtons、setOverlayIcon、flashFrame | develop-windows-taskbar |
Best Practices
最佳实践
| Topic | Description | Reference |
|---|---|---|
| Performance | Measure first, defer loading, avoid blocking, bundle | best-practices-performance |
| Security | Content loading, webPreferences, CSP, IPC validation, distribution | best-practices-security |
| Versioning | SemVer, ~ vs ^, stabilization branches, upgrade and EOL | best-practices-versioning |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 性能优化 | 先测量性能、延迟加载、避免阻塞、代码打包 | best-practices-performance |
| 安全配置 | 内容加载、webPreferences、CSP、IPC验证、分发安全 | best-practices-security |
| 版本管理 | 语义化版本、~与^的区别、稳定分支、升级与生命周期结束（EOL） | best-practices-versioning |
Features
功能特性
| Topic | Description | Reference |
|---|---|---|
| ASAR | Pack/unpack, Node and Web API usage, unpack option, integrity | features-asar |
| Corner Smoothing | -electron-corner-smoothing CSS; smooth rounded corners; system-ui | features-corner-smoothing |
| Dark Mode | nativeTheme, themeSource, prefers-color-scheme | features-dark-mode |
| Desktop Capture | desktopCapturer, setDisplayMediaRequestHandler, getDisplayMedia | features-desktop-capture |
| Fuses | runAsNode, nodeCliInspect, asar integrity; @electron/fuses | features-fuses |
| In-App Purchase | Mac App Store IAP; purchaseProduct, getProducts, transactions-updated | features-in-app-purchase |
| MessagePorts | Renderer-to-renderer and main-renderer messaging; MessagePortMain | features-message-ports |
| Notifications | Main (Notification), renderer (Web Notifications API) | features-notifications |
| Online/Offline | net.isOnline(), net.online; navigator.onLine, online/offline events | features-online-offline |
| Push Notifications | APNS (macOS); registerForAPNSNotifications, received-apns-notification | features-push-notifications |
| Service Workers | session.serviceWorkers; getAllRunning, main↔SW IPC (IpcMainServiceWorker) | features-service-workers |
| Spellchecker | Enable, setSpellCheckerLanguages, context menu, dictionary URL | features-spellchecker |
| Updates | autoUpdater, Squirrel, publishing release metadata | features-updates |
| Web Embeds | iframe, WebContentsView, webview tag; when to use each | features-web-embeds |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| ASAR打包 | 打包/解包、Node与Web API使用、unpack选项、完整性校验 | features-asar |
| 圆角平滑 | -electron-corner-smoothing CSS；平滑圆角；system-ui | features-corner-smoothing |
| 深色模式 | nativeTheme、themeSource、prefers-color-scheme | features-dark-mode |
| 桌面捕获 | desktopCapturer、setDisplayMediaRequestHandler、getDisplayMedia | features-desktop-capture |
| Fuses配置 | runAsNode、nodeCliInspect、asar完整性；@electron/fuses | features-fuses |
| 内购功能 | Mac App Store内购；purchaseProduct、getProducts、transactions-updated | features-in-app-purchase |
| MessagePorts | 渲染进程间及主进程-渲染进程通信；MessagePortMain | features-message-ports |
| 通知功能 | 主进程（Notification）、渲染进程（Web Notifications API） | features-notifications |
| 在线/离线状态 | net.isOnline()、net.online；navigator.onLine、online/offline事件 | features-online-offline |
| 推送通知 | APNS（macOS）；registerForAPNSNotifications、received-apns-notification | features-push-notifications |
| Service Workers | session.serviceWorkers；getAllRunning、主进程↔SW IPC（IpcMainServiceWorker） | features-service-workers |
| 拼写检查 | 启用拼写检查、setSpellCheckerLanguages、上下文菜单、词典URL | features-spellchecker |
| 自动更新 | autoUpdater、Squirrel、发布版本元数据 | features-updates |
| Web嵌入 | iframe、WebContentsView、webview标签；各方案的适用场景 | features-web-embeds |
Distribute
分发部署
| Topic | Description | Reference |
|---|---|---|
| Code Signing | macOS sign + notarize; Windows Authenticode | distribute-code-signing |
| Mac App Store | MAS build, Apple Distribution, sandbox, limitations | distribute-mac-app-store |
| Packaging | Tooling (Forge), manual layout, asar, rebranding | distribute-packaging |
| Windows Store | AppX/MSIX, electron-windows-store, process.windowsStore | distribute-windows-store |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 代码签名 | macOS签名+公证；Windows Authenticode签名 | distribute-code-signing |
| Mac App Store | MAS构建、Apple Distribution、沙箱、限制条件 | distribute-mac-app-store |
| 应用打包 | 工具（Forge）、手动布局、asar、品牌定制 | distribute-packaging |
| Windows Store | AppX/MSIX、electron-windows-store、process.windowsStore | distribute-windows-store |