代理镜头
Chrome扩展+MCP服务器,为AI编码代理提供增强的浏览器感知能力。它弥合了代理可以做什么(点击、键入、导航)和他们可以看到和理解页面之间的差距。
为什么选择镜头特工?
现有的AI代理浏览器工具很好地处理了交互——点击、打字、导航、截图。但它们缺乏感知层。在代理点击按钮后,它没有有效的方法知道:
- 页面准备好了吗? 导航完成了吗?旋转器还在旋转吗?网络是否处于空闲状态?
- 发生了什么变化? 自上次操作以来,添加、删除或修改了哪些DOM节点?
- 我在哪里找? 页面的可见百分比是多少?交互元素是在折叠上方还是下方?
- 这是什么页面? 导航、主要内容、侧边栏和页脚区域在哪里?
Agent Lens通过12个轻量级MCP工具填补了这一感知空白,这些工具为这些问题提供了结构化、令牌高效的答案。
建筑
Claude Code (or any MCP client)
|
| stdio (MCP protocol)
v
MCP Server (Node.js)
|
| WebSocket (localhost:17731)
v
Chrome Extension (Manifest V3)
|
| Content scripts
v
Active browser tabChrome扩展程序运行内容脚本,用于观察、注释和分析页面。MCP服务器通过标准MCP stdio传输将这些功能作为工具公开。它们之间的WebSocket连接是自动的——打开Chrome浏览器,扩展程序就会连接。
工具
DOM更改检测
| 工具 | 说明 |
|---|---|
dom_watch_start | 在活动选项卡上启动MutationObserver。参数: scope (CSS选择器), mutations (按类型筛选)。 |
dom_watch_stop | 停止观察。 |
dom_changes_get | 获取缓冲突变:添加、删除、属性更改、文本更改。自动清除缓冲区。 |
带注释的屏幕截图
| 工具 | 说明 |
|---|---|
screenshot_annotated | 在交互式元素上叠加编号徽章,捕捉屏幕截图。返回图像+带有标记、文本、边界矩形和类型的元素图例。集 includeImage: false 跳过图片,只看到传说。 |
页面准备就绪
| 工具 | 说明 |
|---|---|
page_ready_check | 复合就绪检查:挂起的网络请求、正在运行的动画、最近的DOM突变、骨架加载器、文档就绪状态。 |
page_ready_wait | 民意调查 page_ready_check 直到页面稳定或达到超时。 |
视口上下文
| 工具 | 说明 |
|---|---|
viewport_info | 滚动位置、视口尺寸、可见页面百分比、视口上/中/下的交互元素分布。 |
页面区域
| 工具 | 说明 |
|---|---|
page_regions | 使用ARIA标志、HTML5分段元素和类名回退进行语义页面分割。 |
扩展管理
| 工具 | 说明 |
|---|---|
extensions_list | 列出所有已安装的Chrome扩展程序。 |
extension_toggle | 按ID启用或禁用扩展 |
extension_info | 获取特定扩展的详细信息。 |
诊断
| 工具 | 说明 |
|---|---|
connection_status | WebSocket连接健康状况:连接状态、正常运行时间、上次活动。用于诊断连接问题。 |
演出
| 类别 | 延迟 | 响应大小 | 令牌成本 |
|---|---|---|---|
| 非截图工具 | \服务器),stdio(服务器\MCP客户端) |
- 测试:剧作家
发展
从repo根构建所有内容:
bun run build在监视模式下运行MCP服务器:
bun run dev:mcp更改扩展代码后,重新生成并重新加载:
cd extension && bun run build然后单击重新加载按钮 chrome://extensions 对于Agent Lens条目。
