使用说明

Agent Jake浏览器MCP扩展

一个Chrome扩展程序，使AI代理能够通过模型上下文协议（MCP）和Laravel Reverb WebSocket自动进行浏览器交互。

概述

该扩展将AI代理与浏览器自动化连接起来，支持两种连接模式：

本地模式：直接WebSocket连接到代理jake浏览器mcp服务器对于像克劳德这样的人工智能代理
远程模式：通过Reverb将WebSocket连接到Laravel后端，实现服务器协调自动化

这些共同提供了一个完整的浏览器自动化解决方案，使AI代理能够浏览网站、点击元素、填写表单、截图等。

建筑

┌─────────────────┐     stdio      ┌─────────────────┐   WebSocket    ┌──────────────────┐
│   AI Agent      │◄──────────────►│   MCP Server    │◄──────────────►│ Chrome Extension │
│ (Claude, etc.)  │   JSON-RPC     │  (Node.js)      │   port 8765    │  (This project)  │
└─────────────────┘                └─────────────────┘                └────────┬─────────┘
                                                                               │
                  ┌─────────────────┐   Reverb WS    ┌──────────────────────────┤
                  │  Laravel Server │◄──────────────►│                          │
                  │ (agent-jake-app)│   port 8085    │                          │
                  └─────────────────┘                │   Chrome Debugger API    │
                                                     ▼                          │
                                            ┌──────────────────┐               │
                                            │   Browser Tab    │◄──────────────┘
                                            │  (Any website)   │
                                            └──────────────────┘

连接详细信息

1.AI代理↔ MCP服务器（标准输入/JSON-RPC）

特性	详细信息
什么	Claude（或其他AI）与本地Node.js MCP服务器通信
如何	AI将MCP服务器作为子进程生成。使用JSON-RPC 2.0协议通过stdin/stdout进行通信
为什么	MCP（模型上下文协议）是Anthropic的标准，用于让AI代理访问外部工具。服务器将AI工具调用转换为浏览器命令
协议	基于stdio的JSON-RPC 2.0（stdin/stdout管道）

2.MCP服务器↔ Chrome扩展程序（WebSocket）

特性	详细信息
什么	MCP服务器将浏览器命令中继到扩展
如何	WebSocket连接打开 `localhost:8765`服务器发送工具请求，扩展返回结果
为什么	WebSockets提供持久的双向通信。该扩展程序在Chrome的独立环境中运行，需要一个桥接器来接收外部命令
协议	带有JSON消息的WebSocket
文件	`src/background/ws-client.ts`

3.Laravel服务器↔ Chrome扩展程序（Reverb WebSocket）

特性	详细信息
什么	Laravel后端通过实时WebSocket发送浏览器命令
如何	扩展使用Sanctum令牌进行身份验证，订阅专用通道 `extension.{userId}` 通过Laravel Reverb（Pusher协议）
为什么	实现服务器协调自动化。命令可以在数据库中排队，并在扩展联机时广播。支持每个用户多个扩展
协议	WebSocket上的Pusher协议（端口8085）
文件	`src/background/reverb-client.ts`

4.Chrome扩展程序↔ 浏览器选项卡（Chrome调试器API）

特性	详细信息
什么	扩展程序使用Chrome DevTools协议（CDP）控制浏览器选项卡
如何	扩展将调试器附加到目标选项卡，发送用于鼠标/键盘事件、JavaScript评估、屏幕截图的CDP命令
为什么	CDP提供低级浏览器控制，适用于任何网站，没有内容脚本限制。可以模拟真实的用户输入
协议	Chrome调试器API（CDP包装器）
文件	`src/background/tab-manager.ts`

5.Chrome扩展程序↔ 内容脚本（Chrome消息）

特性	详细信息
什么	扩展与注入的内容脚本通信以进行DOM操作
如何	`chrome.tabs.sendMessage()` / `chrome.runtime.onMessage`
为什么	内容脚本在页面上下文中运行，可以构建ARIA可访问性树，维护元素引用，并访问通过CDP不可用的DOM API
协议	Chrome扩展消息API
文件	`src/content/index.ts`, `src/content/aria-tree.ts`

数据流示例

AI请求“点击登录按钮”：

克劳德发送 tools/call 和 click tool → MCP服务器（stdio）
MCP服务器发送 {"tool": "click", "selector": "s1e42"} → 扩展（WebSocket）
扩展查找元素引用 s1e42 → 内容脚本（消息传递）
内容脚本返回元素坐标→ 扩展
分机发送 Input.dispatchMouseEvent → 浏览器选项卡（CDP）
浏览器执行点击，扩展返回成功→ MCP 服务器
MCP服务器返回结果→ 克劳德

特性

23浏览器自动化工具 -导航、单击、键入、悬停、拖动、截图等
ARIA可访问性树 -用于人工智能理解的结构化页面快照
Vue 3弹出式用户界面 -具有深色主题的现代响应式扩展界面
双连接模型 -本地MCP服务器+远程Laravel Reverb WebSocket
认证 -使用基于Laravel Sanctum令牌的身份验证进行安全登录
活动日志 -通过过滤对所有操作进行完整的审计跟踪
会话管理 -自动恢复会话，心跳保持活跃，优雅的离线处理
选项卡管理 -连接、切换和管理浏览器选项卡
控制台日志访问 -读取浏览器控制台消息
可视化调试 -突出显示调试元素

安装

作为无包装扩展加载

克隆此存储库：

git clone https://github.com/SnakeO/agent-jake-browser-mcp-extension.git
cd agent-jake-browser-mcp-extension

安装依赖项并构建：
```
npm install
npm run build
```
打开Chrome浏览器并转到 chrome://extensions/
启用“开发人员模式”（在右上角切换）
点击“加载解包”并选择 dist/ 文件夹
扩展图标应出现在工具栏中

用法

登录 -点击扩展图标并输入您的凭据，以在Laravel后端进行身份验证
连接到服务器 -成功登录后，扩展会自动连接到Reverb WebSocket
选择选项卡 -从弹出窗口中选择要自动化的浏览器选项卡
监视状态 -弹出窗口显示连接状态和活动日志

连接指示器

指标	含义
服务器：在线（青色）	已连接到Reverb WebSocket
SERVER:SYNC（黄色）	连接到服务器
服务器：重试（黄色）	断开连接后重新连接
服务器：错误（红色）	连接失败
服务器：脱机（灰色）	未连接
标签：[title]（绿色）	标签已连接并准备就绪
选项卡：选择选项卡（灰色）	未选择选项卡

发展

# Install dependencies
npm install

# Development build with watch
npm run dev

# Production build
npm run build

# Type checking
npm run typecheck

# Run E2E tests with Playwright
npm test

# Run unit tests with Vitest
npm run test:unit

# Watch unit tests
npm run test:unit:watch

项目结构

src/
├── background/              # Service worker (Manifest V3)
│   ├── index.ts             # Entry point, message routing
│   ├── ws-client.ts         # Local MCP WebSocket client
│   ├── reverb-client.ts     # Laravel Reverb WebSocket client
│   ├── auth-service.ts      # Authentication & session management
│   ├── api-client.ts        # HTTP API client
│   ├── tab-manager.ts       # Chrome Debugger API integration
│   ├── tool-handlers.ts     # Tool implementations
│   ├── activity-log.ts      # Action logging to Chrome storage
│   ├── connection-state.ts  # Connection state with backoff
│   └── tools/               # Tool schemas & utilities
├── popup/                   # Vue 3 popup UI
│   ├── App.vue              # Root component
│   ├── main.ts              # Vue app initialization
│   ├── components/          # UI components
│   │   ├── AuthForm.vue     # Login form
│   │   ├── UserCard.vue     # User profile display
│   │   ├── ConnectionStatus.vue  # Connection indicators
│   │   ├── TabSelector.vue  # Tab selection
│   │   ├── ActivityLog.vue  # Recent activity
│   │   └── ActivityModal.vue # Activity details modal
│   ├── stores/              # Pinia state management
│   │   ├── auth.ts          # Authentication state
│   │   ├── status.ts        # Connection & tab state
│   │   └── activity.ts      # Activity log state
│   ├── composables/         # Vue composables
│   ├── constants/           # UI constants
│   └── styles/              # CSS variables & base styles
├── content/                 # Content script (injected into pages)
│   ├── index.ts             # Entry point
│   ├── aria-tree.ts         # ARIA accessibility tree builder
│   ├── selector.ts          # Element reference system
│   └── aria/                # ARIA role mappings
├── types/                   # Shared TypeScript types
├── constants/               # Configuration constants
└── utils/                   # Utilities

技术栈

TypeScript -类型安全开发
视图3 -带组合API的弹出式UI框架
精确定位 -Vue状态管理
Vite+CRXJS -快速Chrome扩展程序构建
Laravel Echo+Pusher -Reverb WebSocket客户端
黄道带 -运行时模式验证
Vitest -单元测试
剧作家 -E2E测试
Chrome调试器API -通过CDP实现浏览器自动化

配置

中的关键配置值 src/types/config.ts:

设置	默认值	说明
`WS_PORT`	8765	本地MCP服务器WebSocket端口
`REVERB_PORT`	8085	Laravel Reverb WebSocket端口
`REVERB_HOST`	本地主机	混响服务器主机
`API_URL`	http://localhost:8000Laravel后端URL
`RECONNECT_INTERVAL_MS`	5000	WebSocket重新连接间隔
`DOM_STABILITY_MS`	1000	DOM操作后的等待时间

可用工具

该扩展提供了23个浏览器自动化工具：

工具	说明
`navigate`	导航到URL
`click`	单击元素
`type`	在元素中键入文本
`hover`	将鼠标悬停在元素上
`drag`	拖放元素
`scroll`	滚动页面
`screenshot`	截图
`snapshot`	获取ARIA可访问性树
`evaluate`	执行JavaScript
`select`	选择下拉选项
`wait`	等待元素/条件
`highlight`	在视觉上突出显示元素
...	以及更多

许可证

麻省理工学院-参见许可证

浏览器自动化扩展

使用说明

Agent Jake浏览器MCP扩展

概述

建筑

连接详细信息

1.AI代理↔ MCP服务器（标准输入/JSON-RPC）

2.MCP服务器↔ Chrome扩展程序（WebSocket）

3.Laravel服务器↔ Chrome扩展程序（Reverb WebSocket）

4.Chrome扩展程序↔ 浏览器选项卡（Chrome调试器API）

5.Chrome扩展程序↔ 内容脚本（Chrome消息）

数据流示例

特性

安装

作为无包装扩展加载

用法

连接指示器

发展

项目结构

技术栈

配置

可用工具

相关项目

许可证

使用说明

Agent Jake浏览器MCP扩展

概述

建筑

连接详细信息

1.AI代理↔ MCP服务器（标准输入/JSON-RPC）

2.MCP服务器↔ Chrome扩展程序（WebSocket）

3.Laravel服务器↔ Chrome扩展程序（Reverb WebSocket）

4.Chrome扩展程序↔ 浏览器选项卡（Chrome调试器API）

5.Chrome扩展程序↔ 内容脚本（Chrome消息）

数据流示例

特性

安装

作为无包装扩展加载

用法

连接指示器

发展

项目结构

技术栈

配置

可用工具

相关项目

许可证

相关 MCP

浏览器自动化MCP服务

浏览器自动化MCP服务器

网页内容抓取服务

Playwright浏览器自动化服务器

iOS模拟器交互服务器

网页抓取与搜索MCP服务器