不止網頁！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 調用。