Concurrent Browser Mcp

Name: Concurrent Browser Mcp
Author: sailaoda

本地服务

github.com/sailaoda浏览器自动化1265 周前更新

代码仓库

关于 Concurrent Browser Mcp

Concurrent Browser Mcp 是基于 Playwright 的 MCP 服务，可同时运行多个浏览器实例，适合需要并行浏览会话的自动化任务。它提供实例生命周期管理，并支持 Chromium、Firefox 和 WebKit。

主要功能

01并行运行浏览器实例
02创建、管理和清理实例
03支持 Chromium、Firefox 和 WebKit
04页面导航与交互
05截图和页面内容提取
06可配置代理与浏览器选项

适用场景

01并行运行多个会话的浏览器任务
02浏览页面并操作表单
03截取页面并提取内容

MCP 相关

它向 MCP 客户端提供浏览器实例管理和自动化工具，包括导航、页面交互、截图和 JavaScript 执行。

#browser #concurrent #parallel

配置

本地服务的配置在各客户端中通用，复制后粘贴到客户端的 MCP 配置文件即可。

mcp.json · 通用配置

{
  "mcpServers": {
    "concurrent-browser": {
      "command": "npx",
      "args": [
        "-y",
        "concurrent-browser-mcp"
      ]
    }
  }
}

启动命令npx -y concurrent-browser-mcp

本地服务需要在你的电脑上安装运行环境（如 Node.js 18+）。各客户端的配置文件位置不同，请参考客户端文档。

安装包

npmconcurrent-browser-mcpstdio

工具

收录的工具列表 · 更新于 2 周前

参数	类型	必填	说明
browserType	enum	否	浏览器类型chromium \| firefox \| webkit
headless	boolean	否	是否以无头模式运行
viewport	object	否	视口大小
viewport.width	number	否
viewport.height	number	否
userAgent	string	否	用户代理字符串
metadata	object	否	实例元数据
metadata.name	string	否	实例名称
metadata.description	string	否	实例描述
metadata.tags	array	否	标签

详细介绍

concurrent-browser-mcp

使用 Playwright 构建的多并发浏览器 MCP（Model Context Protocol）服务。

中文 | English

功能特性

🚀 多实例并发：支持同时运行多个浏览器实例
🎯 实例管理：动态创建、管理和清理浏览器实例
🔧 灵活配置：支持多种浏览器类型和自定义配置
🛡️ 资源管理：自动清理超时实例，防止资源泄漏
🌐 完整功能支持：提供完整的浏览器自动化功能（导航、点击、输入、截图等）
💻 跨平台：支持 Chromium、Firefox、WebKit

安装

选项 1：从 npm 安装（推荐）

# Global installation
npm install -g concurrent-browser-mcp

# Or use npx directly (no installation required)
npx concurrent-browser-mcp

选项 2：从源代码构建

# Clone repository
git clone https://github.com/sailaoda/concurrent-browser-mcp.git
cd concurrent-browser-mcp

# Install dependencies
npm install

# Build project
npm run build

# Optional: Global link (for local development)
npm link

选项 3：快速安装脚本

git clone https://github.com/sailaoda/concurrent-browser-mcp.git
cd concurrent-browser-mcp
./install.sh

快速开始

1. 基本用法

# Start server (default configuration)
npx concurrent-browser-mcp

# Custom configuration
npx concurrent-browser-mcp --max-instances 25 --browser firefox --headless false

2. MCP 客户端配置

根据安装方式选择合适的配置：

使用 npm 全局安装或 npx

{
  "mcpServers": {
    "concurrent-browser": {
      "command": "npx",
      "args": ["concurrent-browser-mcp", "--max-instances", "20"]
    }
  }
}

使用全局安装版本

{
  "mcpServers": {
    "concurrent-browser": {
      "command": "concurrent-browser-mcp",
      "args": ["--max-instances", "20"]
    }
  }
}

使用本地构建版本

如果你从源代码构建，可以直接引用本地构建版本：

{
  "mcpServers": {
    "concurrent-browser": {
      "command": "node",
      "args": ["/path/to/concurrent-browser-mcp/dist/index.js", "--max-instances", "20"],
      "cwd": "/path/to/concurrent-browser-mcp"
    }
  }
}

或者使用相对路径（如果配置文件和项目位于同一目录层级）：

{
  "mcpServers": {
    "concurrent-browser": {
      "command": "node",
      "args": ["./concurrent-browser-mcp/dist/index.js", "--max-instances", "20"]
    }
  }
}

使用 npm link 版本（开发模式）

如果你使用了 npm link：

{
  "mcpServers": {
    "concurrent-browser": {
      "command": "concurrent-browser-mcp",
      "args": ["--max-instances", "20"]
    }
  }
}

命令行选项

Option	描述	默认值
`-m, --max-instances <number>`	实例数量上限	20
`-t, --instance-timeout <number>`	实例超时时间（分钟）	30
`-c, --cleanup-interval <number>`	清理间隔（分钟）	5
`--browser <browser>`	默认浏览器类型（chromium/firefox/webkit）	chromium
`--headless`	默认无头模式	true
`--width <number>`	默认视口宽度	1280
`--height <number>`	默认视口高度	720
`--user-agent <string>`	默认用户代理	-
`--proxy <string>`	代理服务地址（例如，http://127.0.0.1:7890）	-
`--no-proxy-auto-detect`	禁用自动代理检测	false
`--ignore-https-errors`	忽略 HTTPS 错误	false
`--bypass-csp`	绕过 CSP	false

代理配置

concurrent-browser-mcp 支持灵活的代理配置，帮助你在需要代理的网络环境中使用浏览器自动化功能。

代理配置方式

1. 通过命令行指定代理

# Use specified proxy server
npx concurrent-browser-mcp --proxy http://127.0.0.1:7890

2. 自动检测本地代理（默认启用）

系统会按以下顺序自动检测代理：

环境变量：HTTP_PROXY、HTTPS_PROXY、ALL_PROXY
常见代理端口：7890、1087、8080、3128、8888、10809、20171
系统代理设置（macOS）：自动读取系统网络设置

# Auto-detection enabled by default (no additional parameters needed)
npx concurrent-browser-mcp

# Explicitly disable auto-detection
npx concurrent-browser-mcp --no-proxy-auto-detect

3. 在 MCP 配置文件中设置代理

使用指定代理：

{
  "mcpServers": {
    "concurrent-browser": {
      "command": "npx",
      "args": ["concurrent-browser-mcp", "--proxy", "http://127.0.0.1:7890"]
    }
  }
}

禁用代理：

{
  "mcpServers": {
    "concurrent-browser": {
      "command": "npx", 
      "args": ["concurrent-browser-mcp", "--no-proxy-auto-detect"]
    }
  }
}

代理检测日志

代理检测结果会在启动时显示：

🚀 Starting Concurrent Browser MCP Server...
Max instances: 20
Default browser: chromium
Headless mode: yes
Viewport size: 1280x720
Instance timeout: 30 minutes
Cleanup interval: 5 minutes
Proxy: Auto-detection enabled  # or shows detected proxy address

支持的代理类型

HTTP 代理：http://proxy-server:port
HTTPS 代理：https://proxy-server:port
SOCKS5 代理：socks5://proxy-server:port

注意事项

代理配置适用于所有创建的浏览器实例
不支持使用用户名/密码进行身份验证
无需手动配置，即可通过环境变量设置代理
服务启动时会自动完成代理检测，不会影响运行时性能

可用工具

工具分类

实例管理

browser_create_instance：创建新的浏览器实例
browser_list_instances：列出所有实例
browser_close_instance：关闭指定实例
browser_close_all_instances：关闭所有实例

页面导航

browser_navigate：导航至指定 URL
browser_go_back：返回上一页
browser_go_forward：前往下一页
browser_refresh：刷新当前页面

页面交互

browser_click：点击页面元素
browser_type：输入文本内容
browser_fill：填写表单字段
browser_select_option：选择下拉选项

页面信息

browser_get_page_info：获取详细的页面信息，包括完整 HTML 内容、页面统计信息和元数据
browser_get_element_text：获取元素文本
browser_get_element_attribute：获取元素属性
browser_screenshot：截取页面截图
browser_get_markdown：🆕 获取 Markdown 内容

等待操作

browser_wait_for_element：等待元素出现
browser_wait_for_navigation：等待页面导航完成

JavaScript 执行

browser_evaluate：执行 JavaScript 代码

使用示例

1. 创建浏览器实例

// Create a new Chrome instance
await callTool('browser_create_instance', {
  browserType: 'chromium',
  headless: false,
  viewport: { width: 1920, height: 1080 },
  metadata: {
    name: 'main-browser',
    description: 'Main browser instance'
  }
});

2. 导航和交互

// Navigate to website
await callTool('browser_navigate', {
  instanceId: 'your-instance-id',
  url: 'https://example.com'
});

// Click element
await callTool('browser_click', {
  instanceId: 'your-instance-id',
  selector: 'button.submit'
});

// Input text
await callTool('browser_type', {
  instanceId: 'your-instance-id',
  selector: 'input[name="search"]',
  text: 'search query'
});

3. 获取页面信息

// Take screenshot
await callTool('browser_screenshot', {
  instanceId: 'your-instance-id',
  fullPage: true
});

// Get page information
await callTool('browser_get_page_info', {
  instanceId: 'your-instance-id'
});

4. 并发操作

// Create multiple instances for parallel processing
const instances = await Promise.all([
  callTool('browser_create_instance', { metadata: { name: 'worker-1' } }),
  callTool('browser_create_instance', { metadata: { name: 'worker-2' } }),
  callTool('browser_create_instance', { metadata: { name: 'worker-3' } })
]);

// Navigate to different pages in parallel
await Promise.all(instances.map(async (instance, index) => {
  await callTool('browser_navigate', {
    instanceId: instance.data.instanceId,
    url: `https://example${index + 1}.com`
  });
}));

架构设计

┌─────────────────────────────────────────────────────────────────┐
│                         MCP Client                              │
├─────────────────────────────────────────────────────────────────┤
│                    Concurrent Browser MCP Server                │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │  Browser Tools  │  │ Browser Manager │  │  MCP Server     │  │
│  │                 │  │                 │  │                 │  │
│  │ - Tool Defs     │  │ - Instance Mgmt │  │ - Request       │  │
│  │ - Execution     │  │ - Lifecycle     │  │   Handling      │  │
│  │ - Validation    │  │ - Cleanup       │  │ - Error Mgmt    │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
├─────────────────────────────────────────────────────────────────┤
│                        Playwright                              │
│  ┌─────────────────┐  ┌─────────────────┐  ┌─────────────────┐  │
│  │   Browser 1     │  │   Browser 2     │  │   Browser N     │  │
│  │   (Chromium)    │  │   (Firefox)     │  │   (WebKit)      │  │
│  └─────────────────┘  └─────────────────┘  └─────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

真实功能测试

除了模拟演示脚本外，我们还提供真实的浏览器功能测试脚本，让你查看实际的截图结果：

🧪 运行真实测试

# Run real browser screenshot test
node test-real-screenshot.js

此测试脚本将：

启动真实浏览器：使用 Chromium 引擎
访问网站：导航至 example.com 和 github.com
保存截图：生成真实的 PNG 截图文件
文件输出：在当前目录生成截图文件

📸 测试输出示例

🚀 Starting real browser screenshot test...
✅ Browser started
✅ Page created
🌐 Navigating to https://example.com...
✅ Page loaded successfully
📸 Taking screenshot and saving as screenshot-2025-07-19T11-04-18-660Z.png...
✅ Screenshot saved: screenshot-2025-07-19T11-04-18-660Z.png
📊 File size: 23.57 KB
📂 File location: /path/to/screenshot-2025-07-19T11-04-18-660Z.png
🌐 Visiting https://github.com...
✅ github screenshot saved: screenshot-github-2025-07-19T11-04-18-660Z.png (265.99 KB)
🛑 Browser closed

🖼️ 查看截图文件

测试后，你可以在项目目录中找到实际的截图文件：

# View generated screenshot files
ls -la screenshot-*.png

# Open in system default image viewer
open screenshot-*.png    # macOS
start screenshot-*.png   # Windows
xdg-open screenshot-*.png # Linux

与传统 MCP 浏览器服务的区别

特性	传统 MCP 浏览器服务	并发浏览器 MCP
实例管理	单实例	多实例并发
资源隔离	无	完全隔离
并发处理	串行	并行
实例生命周期	手动管理	自动管理
资源清理	手动	自动
可扩展性	有限	高度可扩展

开发指南

本地开发环境设置

# 1. Clone project
git clone https://github.com/sailaoda/concurrent-browser-mcp.git
cd concurrent-browser-mcp

# 2. Install dependencies
npm install

# 3. Build project
npm run build

# 4. Local link (optional, for global command testing)
npm link

可用的 npm 脚本

# Build TypeScript project
npm run build

# Development mode (file watching)
npm run dev

# Run code linting
npm run lint

# Fix code formatting issues
npm run lint:fix

# Clean build artifacts
npm run clean

# Run tests
npm test

项目结构

concurrent-browser-mcp/
├── src/                    # Source code directory
│   ├── index.ts           # CLI entry point
│   ├── server.ts          # MCP server main logic
│   ├── browser-manager.ts # Browser instance manager
│   └── tools.ts           # MCP tool definitions and implementation
├── dist/                  # Build artifacts directory
├── assets/                # Static resources directory
├── examples/              # Example scripts
├── test-real-screenshot.js # Real test script
├── config.example.json    # Configuration example
├── package.json           # Project configuration
├── tsconfig.json         # TypeScript configuration
└── README.md             # Project documentation

使用本地构建版本

构建后，你可以通过以下几种方式使用本地版本：

选项 1：直接运行构建文件

# Run built files
node dist/index.js --max-instances 20

# Use absolute path in MCP configuration
{
  "mcpServers": {
    "concurrent-browser": {
      "command": "node",
      "args": ["/absolute/path/to/concurrent-browser-mcp/dist/index.js", "--max-instances", "20"]
    }
  }
}

选项 2：使用 npm link（推荐用于开发）

# Execute link in project root directory
npm link

# Now you can use it like a global package
concurrent-browser-mcp --max-instances 20

# Use in MCP configuration
{
  "mcpServers": {
    "concurrent-browser": {
      "command": "concurrent-browser-mcp",
      "args": ["--max-instances", "20"]
    }
  }
}

选项 3：在项目目录中使用

# Run directly in project directory
cd /path/to/concurrent-browser-mcp
npm run build
node dist/index.js

# MCP configuration using relative path
{
  "mcpServers": {
    "concurrent-browser": {
      "command": "node",
      "args": ["./concurrent-browser-mcp/dist/index.js"],
      "cwd": "/parent/directory/path"
    }
  }
}

测试和调试

# Run real browser tests
node test-real-screenshot.js

# Run simulated MCP call tests
node examples/demo.js

# Start development server (with debug output)
node dist/index.js --max-instances 5 --browser chromium --headless false

贡献指南

Fork 此项目
创建功能分支（git checkout -b feature/amazing-feature）
提交更改（git commit -m 'Add some amazing feature'）
推送至分支（git push origin feature/amazing-feature）
创建 Pull Request

支持 Markdown

登录后评论

第一次接触 MCP？

从协议是什么，到在客户端里装上第一个服务，这几条回答覆盖了大多数入门问题。

阅读入门指南

一个开放协议，规定了 AI 应用如何以统一方式连接外部工具与数据源。客户端负责与模型对话，MCP 服务负责提供工具、资源和提示模板，两者通过标准消息通信，同一个服务可以被不同客户端复用。

Concurrent Browser Mcp

关于 Concurrent Browser Mcp

主要功能

适用场景

MCP 相关

配置

工具

详细介绍

concurrent-browser-mcp

功能特性

安装

选项 1：从 npm 安装（推荐）

选项 2：从源代码构建

选项 3：快速安装脚本

快速开始

1. 基本用法

2. MCP 客户端配置

使用 npm 全局安装或 npx

使用全局安装版本

使用本地构建版本

使用 npm link 版本（开发模式）

命令行选项

代理配置

代理配置方式

1. 通过命令行指定代理

2. 自动检测本地代理（默认启用）

3. 在 MCP 配置文件中设置代理

代理检测日志

支持的代理类型

注意事项

可用工具

实例管理

页面导航

页面交互

页面信息

等待操作

JavaScript 执行

使用示例

1. 创建浏览器实例

2. 导航和交互

3. 获取页面信息

4. 并发操作

架构设计

真实功能测试

🧪 运行真实测试

📸 测试输出示例

🖼️ 查看截图文件

与传统 MCP 浏览器服务的区别

开发指南

本地开发环境设置

可用的 npm 脚本

项目结构

使用本地构建版本

选项 1：直接运行构建文件

选项 2：使用 npm link（推荐用于开发）

选项 3：在项目目录中使用

测试和调试

贡献指南

评论

第一次接触 MCP？

MCP（Model Context Protocol）是什么？

MCP 服务和客户端有什么区别？

本地服务与远程服务怎么选？

如何在 Claude、Cursor 等客户端中安装服务？

收录的项目经过审核吗？“认证”标识代表什么？

我维护的项目已被收录，怎样认领？