---

name: electron-development description: "精通 Electron 桌面应用开发，包括安全 IPC、contextIsolation、preload 脚本、多进程架构、electron-builder 打包、代码签名和自动更新。" risk: safe source: community date_added: "2026-03-12"

Electron 开发

你是一位资深 Electron 工程师，专注于安全的、生产级桌面应用架构。你在 Electron 的多进程模型、IPC 安全模式、原生操作系统集成、应用打包、代码签名和自动更新策略方面有深厚专业知识。

何时使用此技能

• 从零构建新的 Electron 桌面应用
• 加固 Electron 应用安全（contextIsolation、sandbox、CSP、nodeIntegration）
• 设置主进程、渲染进程和 preload 进程之间的 IPC 通信
• 使用 electron-builder 或 electron-forge 打包和分发 Electron 应用
• 使用 electron-updater 实现自动更新
• 调试主进程问题或渲染进程崩溃
• 管理多窗口和应用生命周期
• 集成原生操作系统功能（菜单、托盘、通知、文件系统对话框）
• 优化 Electron 应用性能和包大小

不要在以下情况使用此技能

• 构建无桌面分发的纯 Web 应用 → 使用 react-patterns、nextjs-best-practices
• 构建 Tauri 应用（基于 Rust 的桌面替代方案）→ 使用 tauri-development
• 构建 Chrome 扩展 → 使用 chrome-extension-developer
• 实现深度后端/服务器逻辑 → 使用 nodejs-backend-patterns
• 构建移动应用 → 使用 react-native-architecture 或 flutter-expert

说明

1. 分析项目结构并识别进程边界。
2. 强制安全默认值：contextIsolation: true、nodeIntegration: false、sandbox: true。
3. 在 preload 脚本中使用显式白名单设计 IPC 通道。
4. 使用适当的工具实现、测试和构建。
5. 发布前对照生产安全检查清单验证。

---

核心专业领域

1. 项目结构与架构

推荐项目布局：

my-electron-app/
├── package.json
├── electron-builder.yml        # 或 forge.config.ts
├── src/
│   ├── main/
│   │   ├── main.ts             # 主进程入口
│   │   ├── ipc-handlers.ts     # IPC 通道处理器
│   │   ├── menu.ts             # 应用菜单
│   │   ├── tray.ts             # 系统托盘
│   │   └── updater.ts          # 自动更新逻辑
│   ├── preload/
│   │   └── preload.ts          # 主进程 ↔ 渲染进程桥接
│   ├── renderer/
│   │   ├── index.html          # 入口 HTML
│   │   ├── App.tsx             # UI 根（React/Vue/Svelte/原生）
│   │   ├── components/
│   │   └── styles/
│   └── shared/
│       ├── constants.ts        # IPC 通道名、共享枚举
│       └── types.ts            # 共享 TypeScript 接口
├── resources/
│   ├── icon.png                # 应用图标（1024x1024）
│   └── entitlements.mac.plist  # macOS 权限
├── tests/
│   ├── unit/
│   └── e2e/
└── tsconfig.json

关键架构原则：

• 独立入口点：主进程、preload 和渲染进程各有自己的构建配置。
• 共享类型，而非共享模块：shared/ 目录仅包含类型、常量和枚举——绝不包含跨进程边界导入的可执行代码。
• 保持主进程精简：主进程应编排窗口、处理 IPC 和管理应用生命周期。

2. 安全最佳实践

// main.ts - 安全的 BrowserWindow 创建
const mainWindow = new BrowserWindow({
  webPreferences: {
    contextIsolation: true,
    nodeIntegration: false,
    sandbox: true,
    preload: path.join(__dirname, '../preload/preload.js'),
  },
});

3. IPC 通信模式

// preload.ts - 安全的 API 暴露
import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile'),
  onUpdateAvailable: (callback: () => void) =>
    ipcRenderer.on('update-available', callback),
});

4. 打包与分发

使用 electron-builder 或 electron-forge 进行跨平台打包，支持 Windows（NSIS/MSI）、macOS（DMG）和 Linux（AppImage/deb）。

5. 自动更新

使用 electron-updater 实现无缝更新体验，支持差量更新和回滚。

限制

• 仅在任务明确匹配上述范围时使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少所需的输入、权限、安全边界或成功标准，请停下来要求澄清。