目标读者：想让 AI 智能体替自己完成浏览器内操作（答题、表单、巡检）的开发者。 实测结果：在线安全答题 100 分。本文拆解整条链路的技术原理，以及它为什么"作弊"得如此干净。

0. 先说结论

这套方案的四个组成部分：

角色组件一句话职责
知识库培训 PPT → markdown答案的唯一来源，提前离线准备好
大脑pi-agent（终端智能体）读题、检索知识库、决定点哪个选项
翻译官chrome-devtools-mcp把 AI 的意图翻译成浏览器指令
手脚Chrome 远程调试（CDP）真正执行：读 DOM、点击、截图

一个必须先建立的认识：这个系统答对题，靠的不是模型懂网络安全，而是答案在喂给它的材料里。 它的本质是一套跑在浏览器上的 RAG（检索增强生成）系统。理解了这一点，你就理解了它的能力边界。

AI 答题系统全景

1. 知识准备：答案在开考前就已经写好

题库出自公司培训材料《智能时代，网安护航》。把两份 PPT（72 页）用 python-pptx 抽成 markdown：

三个工程要点：

  • 连备注页和表格一起抽。培训 PPT 的备注里往往藏着出题人视角的解释，表格则是数据类考点的浓缩。
  • 抽成中间产物落盘（_txt_*.md），不要边解析边答题。智能体答题时用 read 工具检索这个静态文件，速度快、结果可回溯。
  • 口径一致是 100 分的前提。知识库和题库同源，检索命中即正确；如果知识库是网上找的二手资料，“多选题选几项"这类口径差异就会丢分。

这一步做完，你拥有了一个和出题口径完全对齐的私有知识库——整场"考试"里最值钱的资产。

2. 打通浏览器：CDP 是什么，为什么是它

2.1 一个冷知识：F12 本来就不在浏览器里

Chrome 的开发者工具（F12）并非内嵌功能——你按 F12 时的每个操作（查 DOM、抓截图、看请求），都是 Chrome 通过一套叫 CDP（Chrome DevTools Protocol） 的协议完成的：JSON-RPC 消息走 WebSocket 通道，Page.navigate 导航、DOM.getDocument 取文档树、Runtime.evaluate 跑脚本。

启动 Chrome 时加一个参数：

1

chrome.exe --remote-debugging-port=9222 --user-data-dir="C:\temp\quiz-profile"

Chrome 就会在 127.0.0.1:9222 起一个调试服务。访问 http://127.0.0.1:9222/json/version 能拿到 webSocketDebuggerUrl——任何本地程序顺着它连上去，就获得了和你 F12 完全等价的能力。Puppeteer、Playwright 底层用的也是同一套协议。

2.2 智能体侧：用 MCP 把 CDP 包成"工具”

pi-agent 是终端编码智能体（npm install -g @mariozechner/pi-coding-agent），原生工具是 read / bash 四件套，看不懂 WebSocket 帧格式。中间靠 MCP（Model Context Protocol） 架一层翻译：

1
2
3
4
5
6
7

// ~/.pi/agent/mcp.json
{ "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest",
               "--browserUrl", "http://127.0.0.1:9222"]
} } }

配好后，智能体面前出现的不再是协议报文，而是一组语义化工具：list_pages、take_snapshot、click、take_screenshot、evaluate_script。模型按工具描述自然语言调用，MCP server 负责转成 CDP 指令发往 9222 端口。

CDP 通道两端配置

2.3 为什么不用"截图 + 模拟鼠标点击"

视觉方案（看截图、算坐标、模拟点击）直观，但有两个硬伤：坐标随窗口尺寸和滚动位置漂移，动画未结束时点不准。CDP 方案点击的是真实 DOM 节点（element.click()），与视口状态完全解耦——这是整条链路稳定性的关键。

3. 答题循环：每道题都是一次感知-行动循环

智能体对每道题执行同一个四拍循环：

单题四拍循环

  1. 感知——take_snapshot 抓取页面 DOM 文本，拿到题干和全部选项。用文本而非截图，省 token 且零 OCR 误差。
  2. 检索——按关键词在 markdown 知识库里定位对应段落。Prompt 里约束规则：答案必须出自材料原文，禁止凭参数记忆作答。
  3. 行动——click 点击对应选项的 DOM 节点。
  4. 验证——take_screenshot 复核选中态。未生效就重试，生效则进入下一题，直到交卷。

为什么能拿 100 分？ 因为这是 RAG 的教科书场景：题库与知识库同源，检索命中率接近必然。模型在这里的价值是"精确匹配 + 按选项转述"，而不是"懂安全"。反过来讲，如果知识库有错，它会自信地答错——垃圾进，垃圾出。

4. 安全边界：这套玩法本身的安全红线

用安全考试的杠杆去玩浏览器自动化，有几条红线必须写清楚：

  • 调试端口只绑本机。--remote-debugging-port 起的服务默认监听 127.0.0.1，不要改成 0.0.0.0——连上这个端口的进程可以读取你所有登录态、在任意页面执行 JS。
  • 用独立 user-data-dir。把自动化会话和个人浏览数据隔离，避免调试通道碰到真实 cookie。
  • 用完就关。答题结束正常退出该 Chrome 实例，不要让 9222 端口常驻。
  • 材料别外传。培训材料是内部资料，抽出的 md 知识库放在本机即可，不要上传到公共仓库或外部 AI。

这套链路本身就是个绝佳的教材：你刚体验过的"AI 拿到调试端口 = 拿到整个浏览器"，正是材料里"IDE 外传"“权限越界"两类风险的真实形态——只不过这次握着端口的不是攻击者，是你自己。

5. 延伸：这条链路还能干什么

同一套架构，换个知识库和页面就是另一个工具：

场景知识库换成浏览器里做的事
内部系统巡检巡检 SOP 文档逐页检查配置项并截图存档
竞品价格监控商品 SKU 表定时抓取商品页价格写入表格
表单批量填报数据 Excel逐行填写并提交
每日打卡类操作操作手册定时打开页面执行固定动作

判断标准很简单：规则明确、页面稳定、有知识可依的重复浏览器操作，都值得用这条链路自动化。

6. 最后，也是最重要的

工具让你 100 分通过了考试，但请诚实地区分两件事：AI 帮你通过了安全意识考试，不等于你拥有了安全意识。

敏感数据不出边界；身份必须二次核验；高危操作不交给自动化。

本文涉及的知识点速查（五大风险 / 12 案例 / 四不三必两问 / AI 数据安全治理）已整理成在线页面：AI 安全指南 · 一页速览