electron-app-dev

Files (6)

• SKILL.md
• ipc-patterns.md · references/
• native-features.md · references/
• packaging.md · references/
• window-management.md · references/
• create_electron_app.py · scripts/

SKILL.md (first lines)

# ⚡ Electron 桌面应用开发专家

老王我搞Electron好多年了，这玩意儿写跨平台应用真tm香！

## 快速开始：创建新项目

使用内置脚本创建最佳实践Electron项目：

```bash
python "C:/Users/Administrator/.claude/skills/electron-app-dev/scripts/create_electron_app.py" my-app
cd my-app
npm install
npm run dev
```

**生成项目包含：**
- electron-vite：全进程极速热更新
- TypeScript + React：类型安全开发
- contextBridge安全IPC模式
- electron-builder打包配置

---

## 核心安全原则（不可妥协）

永远强制执行这些安全配置：

```typescript
webPreferences: {
  preload: path.join(__dirname, '../preload/index.js'),
  contextIsolation: true,    // 必须为true
  nodeIntegration: false,     // 必须为false
  sandbox: true               // 推荐开启
}
```

**为什么重要：**
- `contextIsolation: true` - 隔离preload脚本与渲染器
- `nodeIntegration: false` - 防止渲染器直接访问Node.js
- `sandbox: true` - 进一步限制渲染器进程能力

---

## IPC通信模式

### 唯一正确方式：contextBridge + 白名单

**Preload (preload/index.ts):**
```typescript
const SEND_CHANNELS = ['app-ready']
const INVOKE_CHANNELS = ['get-app-info', 'save-file']

contextBridge.exposeInMainWorld('electronAPI', {
  send: (channel, ...args) => {
    if (SEND_CHANNELS.includes(channel)) {
      ipcRenderer.send(channel, ...args)
    }
  },
  invoke: async (channel, ...args) => {
    if (INVOKE_CHANNELS.includes(channel)) {
      return await ipcRenderer.invoke(channel, ...args)
    }
    return Promise.reject(new Error(`Invalid channel: ${channel}`))
  }
})
```

**Main Process (main/index.ts):**
```typescript
function validateSender(frame: Electron.WebFrameMain | null): boolean {
  if (!frame) return false
  const url = new URL(frame.url)
  const allowedHosts = ['localhost', 'yourdomain.com']
  return allowedHosts.includes(url.hostname) || url.protocol === 'file:'
}

ipcMain.handle('get-app-info', (event) => {
  if (!validateSender(event.senderFrame)) return null
  return { name: app.getName(), version: app.getVersion() }
})
```

---

## 常见坑与解决方案（老王血泪经验）

### 1. 白屏问题（DevTools可以加载但正常不行）

**症状：** 开发环境正常，打包后白屏

**原因：** 协议问题或路径错误

```typescript
// ❌ 错误写法
win.loadURL('http://localhost:5173')

// ✅ 正确写法
if (app.isPackaged) {
  win.loadFile(path.join(__dirname, '../renderer/index.html'))
} else {
  win.loadURL('http://localhost:5173')
}

// ✅ 生产环境加载方案
win.loadFile(path.join(__dirname, '../renderer/index.html'))
win.webContents.openDevTools()  // 先看看能不能加载
```

### 2. 内存泄漏（IPC监听器没移除）

**症状：** 应用用久了越来越卡

```typescript
// ❌ 错误写法
useEffect(() => {
  window.electronAPI.on('update', callback)
  // 没有清理函数！
}, [])

From aAAaqwq/AGI-Super-Team, MIT.

More from aAAaqwq/AGI-Super-Team