CDP 实时页面编辑

要解决什么问题

在改前端样式或做页面实验时，常见路径是改仓库、重编译、刷新——成本高，且未必能立刻在真实用户环境里验证。若你已经在用 headed Chrome 与 xbrowser 一类工具，更希望 Agent 能直接对当前 Tab 动手，而不是只给出一段要你粘贴的代码。

本技能围绕 Chrome DevTools Protocol (CDP)：通过 WebSocket 连接已开启远程调试的 Chrome，在运行时执行 Runtime.evaluate 注入 JS/CSS，不修改源文件，变更在页面上立即可见。

技能如何工作

前置：Chrome 需以 --remote-debugging-port（如 9222）启动，并配置 --remote-allow-origins=*（Chrome ≥ 90）；Node.js 侧通常依赖 ws 模块，也可用 curl 做轻量注入。

典型三步：

1. 查找目标页面——从 CDP 的页面列表里定位要编辑的 Tab（URL / id）。
2. 注入代码——经 WebSocket 发送 eval，改 DOM、插样式、改 localStorage 等；复杂会话可用 --keep-open 复用连接。
3. 验证——肉眼查看或经 CDP Page.captureScreenshot 截图落盘。

文档中还整理了常见操作（标题、颜色、字体、布局、隐藏元素、液态渐变示例等）、一键撤销注入修改、DOM 快照，以及多 Tab 并发（各 Agent 连不同 tab id）、控制台与网络监听等进阶用法；connect_cdp.js 一类脚本内置超时与 CDP 错误回传，便于排查端口、WebSocket 拒绝、eval 语法错误等问题。

适用边界与注意点

• 所有效果都是运行时临时态，刷新或关 Tab 后除非页面自身持久化，否则不会写回工程源码。
• 依赖本机 Chrome CDP 可达；页面 JS 卡死可能导致 WebSocket 异常断开，需刷新重连。
• 选择器或语法错误会以 CDP Error 形式返回，需先用 document.querySelector 等确认目标元素存在。
• 多 Tab 场景需明确 tab id，避免连错页面；并发编辑时用户需自行切换到对应 Tab 查看效果。