AI导哈

浏览器感知增强工具

Agent Lens是一款Chrome扩展和MCP服务器，为AI编码代理提供增强的浏览器感知能力，填补了交互与页面理解之间的空白。

  • by JakeRoyRandall
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 JakeRoyRandall/agent-lens

使用说明

代理镜头

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 tab

Chrome扩展程序运行内容脚本，用于观察、注释和分析页面。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连接健康状况：连接状态、正常运行时间、上次活动。用于诊断连接问题。

演出

类别 延迟 响应大小 令牌成本
非截图工具 <1ms <200字节 ~50个令牌
屏幕截图（仅图例） ~100ms ~2KB ~500个令牌
屏幕截图（带图像） ~100ms ~360KB ~90K令牌

设置 includeImage: false 上 screenshot_annotated 将成本从约90K代币降至约500代币，同时仍返回完整的元素图例。

设置

需求

  • 铬或铬
  • Node.js 18+
  • 包子

1.构建扩展

cd extension && bun install && bun run build

然后在Chrome中加载它：

  1. 打开 chrome://extensions
  2. 启用 开发人员模式
  3. 点击 加载未打包的
  4. 选择 extension/dist 目录

2.构建MCP服务器

cd mcp-server && bun install && bun run build

3.配置克劳德代码

选项A--CLI：

claude mcp add agent-lens node /absolute/path/to/agent-lens/mcp-server/dist/index.js

选项B——设置文件(.claude/settings.json):

{
  "mcpServers": {
    "agent-lens": {
      "command": "node",
      "args": ["/absolute/path/to/agent-lens/mcp-server/dist/index.js"]
    }
  }
}

4.连接

打开Chrome浏览器。扩展自动连接到MCP服务器的WebSocket localhost:17731这些工具现在可以在Claude Code中使用。

项目结构

agent-lens/
├── extension/              # Chrome extension (Manifest V3)
│   ├── src/
│   │   ├── content/        # Content scripts
│   │   │   ├── observer.ts     # DOM MutationObserver
│   │   │   ├── annotator.ts    # Screenshot annotation
│   │   │   ├── readiness.ts    # Page readiness checks
│   │   │   ├── viewport.ts     # Viewport analysis
│   │   │   └── regions.ts      # Semantic page regions
│   │   ├── lib/            # Shared types and messaging
│   │   ├── popup/          # Extension popup UI
│   │   └── service-worker.ts
│   └── dist/               # Built extension (load this in Chrome)
├── mcp-server/             # MCP server (Node.js, stdio transport)
│   ├── src/
│   │   ├── index.ts        # Tool registrations
│   │   ├── types.ts        # Zod schemas
│   │   └── connection.ts   # WebSocket server
│   └── dist/               # Built server
├── test/                   # Integration and E2E tests
├── tsconfig.base.json      # Shared TypeScript config
└── package.json            # Workspace root

技术栈

  • 语言：TypeScript
  • 扩展构建：esb构建
  • MCP服务器构建：tsup
  • MCP-SDK：@modelcontextprotocol/sdk
  • 沟通：WebSocket（扩展<->服务器），stdio（服务器<->MCP客户端）
  • 测试：剧作家

发展

从repo根构建所有内容：

bun run build

在监视模式下运行MCP服务器：

bun run dev:mcp

更改扩展代码后，重新生成并重新加载：

cd extension && bun run build

然后单击重新加载按钮 chrome://extensions 对于Agent Lens条目。

相关 MCP