不止网页！VS Code、Notion、Spotify 全被 AI 接管：Electron 自动化实战

为什么网页自动化不够用

AI Agent 能点网页、填表单、抓数据，但开发者每天真正花时间的地方不在浏览器里。

• 代码审查卡在 GitHub 网页版：PR 提交后还得手动切到 VS Code 查看上下文，AI 看不到编辑器里的调试状态、终端输出、甚至当前打开的文件树。
• 会议纪要靠人听、记、整理：Zoom 录音转文字只是第一步，关键是要从 Slack 消息流里识别出“这个频道正在开会”，再把发言、共享屏幕里的代码片段、甚至 Figma 链接一并拎出来。
• 设计稿改了三次，Notion 还是旧截图：设计师在 Figma 点下“发布”按钮，开发却要等邮件通知、手动下载、再粘贴进文档——中间漏掉一个步骤，整个联调就卡住。

问题不在 AI 多强，而在它根本碰不到桌面应用的“身体”：没有光标控制、读不到渲染树、拿不到进程内存里的实时状态。

CDP 是钥匙，不是锁

Chrome DevTools Protocol（CDP）常被当成 Chrome 调试工具。但它本质是 Chromium 内核暴露的一套底层通信协议。而 Electron 应用——VS Code、Slack、Figma、Spotify、Notion 桌面版——全用 Chromium 渲染界面。只要能连上它们的 CDP 端口，就能做和调试网页一样的事：注入脚本、监听 DOM 变化、捕获点击事件、读取 localStorage、甚至模拟键盘输入。

agent-browser 就是把这层能力封装成可编程接口：

• 在 VS Code 里直接 page.evaluate(() => { vscode.commands.executeCommand('workbench.action.terminal.toggleTerminal'); })
• 监听 Slack 的 div[data-message-id] 新增节点，提取 sender、text、attachments
• 抓 Spotify 播放器的 <div class="now-playing">，拿到当前曲目 ID 和播放进度
• 从 Figma 的渲染 canvas 上截取选中图层的 bounding box，再调 API 导出 SVG

CDP 不需要应用本身支持——它绕过 UI 层，直连渲染进程。你不需要对方发版，也不用等官方 API。

MCP 协议：让 AI Agent 有统一“手语”

CDP 解决了“怎么动”，但每个 Electron 应用的 DOM 结构、事件命名、数据存储方式都不同。硬编码一堆 selector 和 JSON path，维护成本爆炸。

MCP（Multi-Cloud Protocol）定义了一套轻量级语义协议：

• 所有应用暴露统一的 /mcp/v1/execute 端点
• 请求体是结构化动作：{ "action": "open_file", "target": "/src/index.ts", "app": "vscode" }
• 响应体带标准字段：{ "status": "success", "result": { "file_path": "/src/index.ts", "line_count": 142 } }

它不替代 CDP，而是建在 CDP 之上：MCP Server 收到请求后，用 CDP 操作目标应用，再把结果按 MCP 格式打包返回。好处很实在：

• 同一套 AI Agent 逻辑，换台机器、换系统、换应用版本，只要 MCP Server 在跑，就不改一行业务代码
• 新加一个应用？只用写一个 MCP Adapter：把 open_file 映射成 VS Code 的 vscode://file/... URL，把 get_current_design 映射成 Figma 的 document.getSelection() 调用
• Server 开发者不用操心 WebSocket 心跳、重连、鉴权——MCP 规范里已定义

真实工作流改造

案例 1：代码审查不再脱离 IDE

不是：AI 分析 GitHub PR 页面的 diff HTML
而是：Agent 监听 VS Code 的 git.status 事件，检测到 HEAD 移动且有未推送 commit，立刻拉取本地变更文件，用 eslint --format json 扫描，再把错误定位到编辑器具体行号，高亮显示

// 在 VS Code 插件中监听
vscode.workspace.onDidChangeTextDocument((e) => {
  if (e.document.languageId === 'typescript') {
    // 触发本地 ESLint
    const result = execSync(`npx eslint ${e.document.uri.fsPath} --format json`);
    const issues = JSON.parse(result)[0].messages;
    // 在编辑器中标记
    issues.forEach(issue => {
      const range = new vscode.Range(
        issue.line - 1, issue.column - 1,
        issue.line - 1, issue.column
      );
      // ...
    });
  }
});

• 审查耗时：30 分钟 → 5 分钟（含扫描+定位+高亮）
• 人工介入点只剩确认修复方案，不是找 bug

案例 2：会议纪要自动带上下文

不是：录音转文字后丢给 LLM 总结
而是：Agent 同时监听三个来源：

• Zoom：通过 CDP 读取 video#local-video 的 srcObject.getTracks()[0].label 判断是否开启摄像头，结合 div.chat-message 抓文本
• Slack：监控 div.c-virtual_list__item 新增，过滤含 @channel 或 meeting 关键词的消息
• VS Code：检查当前打开文件是否为 agenda.md 或 notes.md

然后把三路数据按时间戳对齐，喂给 LLM：“请基于以下混合输入生成纪要：[Zoom 发言]、[Slack 讨论]、[会议文档草稿]”

• 纪要生成：20 分钟 → 2 分钟（含多源对齐）
• 关键决策点遗漏率：从 3–5 处/次 → 0（因所有输入源时间戳可对齐）

案例 3：Figma 设计稿变更秒同步 Notion

不是：设计师导出 PNG，拖进 Notion
而是：Agent 监听 Figma 的 window.FigmaPlugin.notify 事件（插件可主动触发），或轮询 localStorage.getItem('figma-current-file') 变化。一旦检测到新版本，执行：

1. 调 Figma REST API 获取最新画板 JSON
2. 提取所有 type: 'RECTANGLE' 且 name.includes('API') 的图层
3. 生成 Markdown 表格：| 字段 | 类型 | 示例 | 描述 |
4. 用 Notion API 更新对应 database page 的 properties 字段

• 同步延迟：15 分钟 → <10 秒（从 Figma 保存到 Notion 数据库更新）
• 开发直接在 Notion 里点字段名跳转 Figma 原图链接

写个 MCP Server：三步跑通

MCP Server 本质是个 HTTP 中间层，把语义动作翻译成 CDP 操作。

const express = require('express');
const { chromium } = require('playwright-core');

const app = express();
app.use(express.json());

// 复用已存在的 Electron 应用实例（非启动新进程）
async function getVSCodePage() {
  // VS Code 默认 CDP 端口：9222（需启动时加 --remote-debugging-port=9222）
  const browser = await chromium.connectOverCDP('http://127.0.0.1:9222');
  const context = browser.contexts()[0];
  return context.pages()[0]; // 通常第一个 page 就是主窗口
}

app.post('/mcp/v1/execute', async (req, res) => {
  const { action, target, app } = req.body;

  try {
    if (app === 'vscode' && action === 'open_file') {
      const page = await getVSCodePage();
      await page.evaluate((path) => {
        // 注入 VS Code 原生命令
        window.vscodeApi?.postMessage({ command: 'openFile', path });
      }, target);
      res.json({ status: 'success', result: { opened: target } });
    } else {
      res.status(400).json({ error: 'Unsupported action/app' });
    }
  } catch (e) {
    res.status(500).json({ error: e.message });
  }
});

app.listen(3000);

部署要点：

• VS Code 启动命令加参数：code --remote-debugging-port=9222
• Playwright 用 playwright-core（不带浏览器二进制），只负责 CDP 通信
• 生产环境用 chrome-remote-interface 更轻量，但 Playwright 调试更友好

现在就能做的几件事

• 立刻验证：打开 VS Code → Help > Toggle Developer Tools → Console 里执行 window.vscodeApi，如果存在，说明 CDP 可控
• 抓个 DOM：用 Chrome DevTools 连 http://127.0.0.1:9222，选中 VS Code 窗口，看 Elements 面板里能不能找到 div.monaco-editor —— 能看到，就能自动化
• 试个最小闭环：写个脚本，用 fetch('http://127.0.0.1:9222/json') 拿到页面 WebSocket 地址，再用 ws 库发 CDP 消息 Page.navigate，跳转到 vscode://file/...
• 别等框架：MCP 规范只有 3 个核心 endpoint（/execute, /list_tools, /health），自己先实现一个 open_file，比学透整个生态快得多

Electron 自动化不是未来，是今天就能焊在你工作流上的零件。它不取代思考，只把重复的手动操作——切窗口、找路径、复制粘贴、点确认——变成一行 API 调用。