Chrome MCP客户端
Chrome DevTools MCP客户端使用 mcp-use TypeScript包。
注意：此项目不是Chrome扩展程序。它通过由启动的MCP服务器通过DevTools协议连接到Chrome chrome-devtools-mcp.
特性
- 启动启用了DevTools协议的Chrome
- 导航到网页（默认值：https://www.example.com)
- 使用MCP（模型协调协议）实现AI驱动的自动化
- 支持LLM与SiliconFlow的集成
- 生成物
chrome-devtools-mcp通过npx连接MCP和Chrome
先决条件
- Node.js>=18.0.0
- 您的系统上安装了Chrome浏览器
必需：在端口9222上启动Chrome
在运行项目之前，您必须在端口上启用远程调试的情况下启动Chrome 9222 使用提供的PowerShell脚本：
# In project root (Windows PowerShell)
./scripts/Start-Chrome-9222.ps1如果您的系统阻止脚本执行，请使用执行策略旁路运行：
powershell -ExecutionPolicy Bypass -File ./scripts/Start-Chrome-9222.ps1验证（可选）：在浏览器中打开以下URL，并确保它返回JSON WebSocketDebuggerUrl:
http://127.0.0.1:9222/json/version笔记：
- 默认调试端口为
9222.保持此端口畅通；客户期望http://127.0.0.1:9222. - 该脚本将启动一个独立的Chrome配置文件(
--user-data-dir)并且不会影响您的正常Chrome配置文件。 - 如果端口被占用，请使用关闭其他进程
9222而不是改变端口。
MCP服务器：
- 客户端自动启动
chrome-devtools-mcp通过npx并连接到浏览器http://127.0.0.1:9222默认情况下。 - 更改目标URL
CHROME_MCP_URL如果需要的话。
启动流程
flowchart TD
A[Run Start-Chrome-9222.ps1] --> B{Chrome started?}
B -- Yes --> C[Open http://127.0.0.1:9222/json/version]
C --> D{Has WebSocketDebuggerUrl?}
D -- Yes --> E[Run npm run dev / npm start]
B -- No --> F[Check Chrome path/permissions/port 9222]
D -- No --> G[Free 9222 and rerun script]
classDef node fill:#1f2937,stroke:#9ca3af,color:#ffffff,stroke-width:1px;
class A,B,C,D,E,F,G node;安装
npm install用法
发展模式
npm run dev -- ""这将使用指定的任务指令直接从源文件运行项目。
例子：
npm run dev -- "Please navigate to https://www.example.com"使用任务文件：
npm run dev -- --file tasks/deepseek-nemovideo-search.json支持的文件类型： .json 随着 { "task": "..." } 或普通 .txt。您还可以传递绝对或相对路径。
生产模式
- 构建项目：
npm run build- 使用任务指令运行已构建的项目：
npm start -- ""例子：
npm start -- "Please navigate to https://www.example.com"或者使用任务文件：
npm start -- --file tasks/deepseek-nemovideo-search.json配置
可以使用环境变量配置项目。复制 .env.example 文件到 .env 并根据需要修改值：
cp .env.example .env环境变量
SILICONFLOW_API_KEY或OPENAI_API_KEY：LLM提供程序的API密钥MODEL_NAME：LLM的默认型号名称LLM_BASE_URL：SiliconFlow的基本URL（默认值：https://api.siliconflow.cn/v1)LLM_MAX_RETRIES：LLM调用的最大重试次数（默认值：2)LLM_TIMEOUT：LLM调用的超时时间（毫秒）（默认值：30000)LOG_LEVEL：日志级别(error|warn|info|debug，默认值：info)CHROME_MCP_URL：浏览器DevTools端点（默认值：http://127.0.0.1:9222)MCP_LAUNCH_TIMEOUT：MCP服务器启动超时（毫秒）（默认值：60000)MCP_CONNECT_TIMEOUT：MCP服务器连接超时（毫秒）（默认值：30000)AGENT_MAX_STEPS：代理执行的最大步骤数（默认值：10在代码中，可重写）AGENT_TIMEOUT_MS：代理运行超时（毫秒）（默认值：120000)MAX_EXECUTION_TIME：全局硬超时（毫秒）（默认值：120000)
项目结构
src/
├── config/ # Configuration files
├── core/ # Core modules
├── llm/ # Language model integration
├── utils/ # Utility functions
└── index.js # Main entry point也：
scripts/Start-Chrome-9222.ps1#在端口9222上启动一个单独的Chrome实例tasks/#示例任务文件--filetests/#配置和LLM的Jest测试
脚本
npm run dev：以开发模式运行npm start：在生产模式下运行（构建后）npm run build：构建生产项目npm test：运行测试npm run lint：读取代码npm run format：格式化代码
MCP服务器通过以下方式自动启动 npx chrome-devtools-mcp@latest 随着 --browserUrl=$CHROME_MCP_URL.
依赖项
mcp-use：模型协调协议的TypeScript包chrome-devtools-mcp：Chrome DevTools MCP实现@langchain/core：核心LangChain功能@langchain/openai：LangChain的OpenAI集成
许可证
麻省理工学院
建筑
flowchart LR
U[User Task] --> A[ExtendedMCPAgent]
A --> C[MCPClient]
C --> S[npx chrome-devtools-mcp]
S --> D[Chrome DevTools Protocol]
D --> B[Chrome Browser]
classDef node fill:#1f2937,stroke:#9ca3af,color:#ffffff,stroke-width:1px;
class U,A,C,S,D,B node;安全
- 不要将API密钥提交到版本控制。使用
.env当地。