mcpField
B
browser

browser

本地服务
github.com/cherchyk浏览器自动化92 周前更新

关于 browser

MCPBrowser 让 AI 助手通过真实的 Chrome、Edge 或 Brave 会话浏览网站,面向需要身份验证或 JavaScript 渲染的页面,并通过 MCP 提供浏览器操作与整理后的页面内容。

主要功能

  1. 01使用已登录的浏览器会话
  2. 02处理 SSO、验证码和重定向
  3. 03检测 SPA 并等待页面渲染
  4. 04一次填写多个表单字段
  5. 05返回整理后的结构化页面内容

适用场景

  1. 01读取企业登录后才能访问的内容
  2. 02浏览仪表板和 JavaScript 应用
  3. 03填写并提交多步骤网页表单

MCP 相关

这是一个 MCP 服务,向 MCP 客户端提供网页导航、JavaScript 执行、点击、输入、滚动、截图和 HTML 提取工具。它使用 stdio 传输,并调用本地 Chrome、Edge 或 Brave 浏览器。

配置

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

mcp.json · 通用配置
{
"mcpServers": {
"cherchyk-browser": {
"command": "npx",
"args": [
"-y",
"mcpbrowser"
]
}
}
}
启动命令npx -y mcpbrowser

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

安装包
npmmcpbrowser0.2.1

工具

1

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

参数类型必填说明
urlstring是要获取的 URL
keepPageOpenboolean否抓取后保持标签页打开,以便手动进行身份验证或重复使用(默认值:true)

详细介绍

✅ MCPBrowser(MCP 浏览器)

VS Code Marketplace Open VSX npm version Claude Desktop License: MIT

⚠️ 安全提示: MCPBrowser 会提取网页内容并提供给你的 AI Agent(例如,GitHub Copilot、Claude、Kiro、Antigravity),然后由它将内容发送给所用的大模型提供商(例如,Anthropic、OpenAI、GitHub)进行处理。请确保你信任 Agent 和大模型提供商,尤其是在访问含有敏感或私人数据的页面时。MCPBrowser 将私人数据访问、不可信内容暴露和外部通信(MCP「致命三要素」)结合在一起——所有工具注释都准确声明了这些风险,以便 MCP 客户端实施适当的安全控制。详情请参阅 MCPBrowser/docs/MCP_COMPLIANCE.md。

💡 为什么选择 MCPBrowser,而不是 Puppeteer/Playwright MCP 服务? Puppeteer 和 Playwright 是浏览器自动化库——它们的 MCP 服务向 Agent 提供原始的底层浏览器命令。MCPBrowser 在底层使用 Puppeteer,专为 AI Agent 打造,增加了一个智能层,可自动处理棘手部分。

Agent 可获得整洁的 HTML(体积缩小 90%)、自动检测 SPA(React、Vue、Angular)、处理身份验证流程(SSO、重定向、多步登录)、发现表单并填充多个字段、获取包含后续步骤指引的结构化响应、按域名复用标签页,以及无需重新加载页面即可即时重新提取 DOM。每次 MCPBrowser 工具调用都可替代 5-8 次原始浏览器自动化调用——在 MCPBrowser 中通常只需 4 步的工作流,使用 Puppeteer/Playwright MCP 则需要 20 多次调用,从而节省令牌并显著提升 Agent 的速度。查看下方的完整对比。

MCPBrowser 是一款 MCP 浏览器服务,让 AI 助手能够使用真实的 Chrome、Edge 或 Brave 浏览器浏览网页。 这款基于浏览器的 MCP 服务让 AI 助手(Claude、Copilot、Kiro、Antigravity)能够访问任何网站,尤其是受到身份验证、CAPTCHA、反机器人限制保护或需要 JavaScript 渲染的网站。它使用你的真实浏览器会话进行网页自动化,因此你只需登录一次,AI 就能导航、点击按钮、填写表单,并从屏蔽自动化请求的网站提取内容。

这款网页浏览器 MCP 服务基于 Model Context Protocol(MCP)构建,可与 Claude Desktop、Claude Code(CLI)、GitHub Copilot、Kiro、Antigravity 以及任何兼容 MCP 的 AI 助手无缝协作。它可以处理企业 SSO、CAPTCHA、Cloudflare 保护、SPA、仪表板,以及任何屏蔽自动化请求的网站。你的 AI 能获得与你相同的浏览器访问权限——无需专用 API,无需担心无头浏览器检测,只需使用你已通过身份验证的浏览器会话。

AI 助手使用 MCPBrowser 的示例工作流

1. browser_fetch_webpage    → Load the login page
2. browser_type_text        → Enter username & password (multiple fields at once)
3. browser_click_element    → Click "Sign In"
4. browser_get_current_html → Extract the content after login

目录

要求

  • Chrome、Edge 或 Brave 浏览器
  • Node.js 18+(包含 npm)

注意: 系统必须安装 Node.js。VS Code 扩展和 npm 包都需要 Node.js 才能运行 MCP 服务。如果尚未安装,请从 nodejs.org 下载。

为什么选择 MCPBrowser,而不是 Puppeteer/Playwright MCP 服务?

Puppeteer 和 Playwright 是浏览器自动化库——它们的 MCP 服务会暴露底层浏览器命令,因此 Agent 必须自行处理单页应用、身份验证流程、复杂的 HTML 和各种边缘情况。**MCPBrowser 专为 AI Agent 打造。**它在底层使用 Puppeteer,并添加了智能层,让 Agent 可以专注于任务,而不是应付浏览器。

MCPBrowserPuppeteer/Playwright MCP
HTML 输出简洁、针对大模型优化(约减少 90%)——移除脚本、样式、SVG、跟踪属性,并转换相对 URL原始 DOM
单页应用支持自动检测 React、Vue、Angular、Svelte、Next.js、Nuxt——应用适配框架的等待策略Agent 必须手动配置等待
身份验证检测登录页面、SSO 重定向、多步骤身份验证——跟随重定向链,采用两阶段超时(SSO 5 秒 → 手动操作 20 分钟)Agent 必须为每个身份验证步骤编写脚本
表单交互browser_detect_forms 可发现所有字段、标签和约束;browser_type_text 可一次填充多个字段一次处理一个字段,需手动指定选择器
响应格式类型化、结构化,并提供 nextSteps 指引——区分软失败与硬失败,并提供恢复操作原始结果,通用错误
标签页管理按域名池化——复用标签页,并可在浏览器重新连接后继续使用每个请求都创建新的上下文
重新提取 DOMbrowser_get_current_html——即时提取,无需重新加载(速度快 10–50 倍)必须重新获取整个页面
插件系统根据 URL/DOM 模式检测已知网站,提供针对特定网站的操作并评估置信度不适用
专为……打造AI Agent浏览器测试自动化
Agent 效率一次工具调用可替代 5–8 次原始浏览器调用——4 步登录流程只需 4 次调用,而非 20 次以上,节省 Token 和往返次数每个步骤(导航、等待、查询、输入、点击)都需要单独调用

安装

快速入门

首先,使用你的 MCP 客户端安装 MCPBrowser。

标准配置适用于大多数工具:

{
  "mcpServers": {
    "mcpbrowser": {
      "command": "npx",
      "args": ["-y", "mcpbrowser@latest"]
    }
  }
}

在 VS Code 中安装 在 VS Code Insiders 中安装


Amp

通过 Amp VS Code 扩展的设置界面添加,或更新你的 settings.json 文件:

"amp.mcpServers": {
  "mcpbrowser": {
    "command": "npx",
    "args": ["-y", "mcpbrowser@latest"]
  }
}

Amp CLI 设置:

amp mcp add mcpbrowser -- npx -y mcpbrowser@latest

Claude Code

使用 Claude Code CLI 添加 MCPBrowser MCP 服务:

claude mcp add mcpbrowser --scope user -- npx -y mcpbrowser@latest

验证是否正常工作:

claude mcp list

你应该会看到:

mcpbrowser: npx -y mcpbrowser@latest - ✓ Connected

Claude Desktop

将以下内容添加到配置文件中(如果文件不存在,请创建):

Windows: %APPDATA%\Claude\claude_desktop_config.json(例如,C:\Users\<username>\AppData\Roaming\Claude\claude_desktop_config.json)
Mac: ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "mcpbrowser": {
      "command": "npx",
      "args": ["-y", "mcpbrowser@latest"]
    }
  }
}

保存后,重启 Claude Desktop。


Cline

按照配置 MCP 服务章节中的说明操作。

将以下内容添加到你的 cline_mcp_settings.json 文件中:

{
  "mcpServers": {
    "mcpbrowser": {
      "type": "stdio",
      "command": "npx",
      "timeout": 30,
      "args": ["-y", "mcpbrowser@latest"],
      "disabled": false
    }
  }
}

Codex

使用 Codex CLI 添加 MCPBrowser MCP 服务:

codex mcp add mcpbrowser npx "-y" "mcpbrowser@latest"

或者,创建或编辑配置文件 ~/.codex/config.toml 并添加:

[mcp_servers.mcpbrowser]
command = "npx"
args = ["-y", "mcpbrowser@latest"]

更多信息请参阅 Codex MCP 文档。


Copilot CLI

使用 Copilot CLI 以交互方式添加 MCPBrowser MCP 服务:

/mcp add

出现提示时,输入以下值:

字段值
服务名称mcpbrowser
服务类型1(本地)
命令npx -y mcpbrowser@latest
环境变量(留空)
工具*

或者,创建或编辑配置文件 ~/.copilot/mcp-config.json 并添加:

{
  "mcpServers": {
    "mcpbrowser": {
      "type": "local",
      "command": "npx",
      "tools": ["*"],
      "args": ["-y", "mcpbrowser@latest"]
    }
  }
}

更多信息请参阅 Copilot CLI 文档。


Cursor

在 Cursor 中安装

或手动安装:

前往 Cursor Settings -> MCP -> Add new MCP Server。名称可自行设置,使用 command 类型,并将命令设为 npx -y mcpbrowser@latest。你也可以点击 Edit 来验证配置或添加类似参数的命令。


Factory

使用 Factory CLI 添加 MCPBrowser MCP 服务:

droid mcp add mcpbrowser "npx -y mcpbrowser@latest"

或者,在 Factory droid 中输入 /mcp,打开用于管理 MCP 服务的交互式界面。

更多信息请参阅 Factory MCP 文档。


Gemini CLI

按照 MCP 安装指南操作,并使用上面的标准配置。


Goose

在 Goose 中安装

或手动安装:

前往 Advanced settings -> Extensions -> Add custom extension。名称可自行设置,类型选择 STDIO,并将 command 设为 npx -y mcpbrowser@latest。点击“Add Extension”。


Kiro

请遵循 MCP 服务文档。例如,在 .kiro/settings/mcp.json 中:

{
  "mcpServers": {
    "mcpbrowser": {
      "command": "npx",
      "args": ["-y", "mcpbrowser@latest"]
    }
  }
}

LM Studio

将 MCP 服务 mcpbrowser 添加到 LM Studio

或手动安装:

前往右侧边栏中的 Program -> Install -> Edit mcp.json。使用上面的标准配置。


opencode

请遵循 MCP 服务文档。例如,在 ~/.config/opencode/opencode.json 中:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "mcpbrowser": {
      "type": "local",
      "command": ["npx", "-y", "mcpbrowser@latest"],
      "enabled": true
    }
  }
}

OpenClaw

OpenClaw 是一款在你的设备上运行的个人 AI 助手。使用命令行添加 MCPBrowser:

openclaw mcp add mcpbrowser -- npx -y mcpbrowser@latest

验证是否正常运行:

openclaw mcp list

更多信息请参阅 OpenClaw MCP 文档。


Qodo Gen

在 VSCode 或 IntelliJ 中打开 Qodo Gen 聊天面板 → Connect more tools → + Add new MCP → 粘贴上面的标准配置。

点击 Save。


VS Code(GitHub Copilot)

在 VS Code 中安装 在 VS Code Insiders 中安装

或手动安装:

请遵循 MCP 安装指南,并使用上面的标准配置。你也可以使用 VS Code CLI 安装 MCPBrowser MCP 服务:

# For VS Code
code --add-mcp '{"name":"mcpbrowser","command":"npx","args":["-y","mcpbrowser@latest"]}'

安装后,即可在 VS Code 中将 MCPBrowser MCP 服务与 AI Agent 配合使用。


VS Code 扩展

从 VS Code Marketplace 或 Open VSX Registry 安装,或运行:

code --install-extension cherchyk.mcpbrowser

该扩展会自动为你的 AI Agent(GitHub Copilot、Kiro Agent、Antigravity Agent)安装并配置所有内容。也适用于 VSCodium 和其他兼容 Open VSX 的编辑器。


Warp

前往 Settings -> AI -> Manage MCP Servers -> + Add,以添加 MCP 服务。使用上面的标准配置。

或者,在 Warp 提示词中使用斜杠命令 /add-mcp,并粘贴上面的标准配置。


Windsurf

请遵循 Windsurf MCP 文档。使用上面的标准配置。

MCP 工具

browser_fetch_webpage

使用你的 Chrome/Edge/Brave 浏览器获取网页。可处理身份验证、CAPTCHA、SSO、反机器人保护和大量使用 JavaScript 的网站。会在浏览器标签页中打开 URL(同一域名会复用现有标签页),并等待页面完全加载后再返回内容。自动检测 SPA(React、Vue、Angular),并等待 JavaScript 渲染内容。

参数:

  • url(字符串,必填)- 要获取的 URL
  • removeUnnecessaryHTML(布尔值,可选,默认值:true)- 移除不必要的 HTML,体积约可缩小 90%
  • postLoadWait(数字,可选,默认值:0)- 页面加载后、提取 HTML 前额外等待的毫秒数。适用于需要更多时间来渲染的页面。

示例:

// Basic fetch
{ url: "https://example.com" }

// Fetch with extra wait time for slow-rendering pages
{ url: "https://dashboard.example.com", postLoadWait: 2000 }

// Keep full HTML without cleanup
{ url: "https://example.com", removeUnnecessaryHTML: false }

browser_execute_javascript

在当前页面上下文中执行 JavaScript 片段,并返回带有元数据的结果(执行时间、截断标记、URL 变更检测)。可用于提取结构化数据(例如收件箱行),或执行通过协议点击不可靠的 JavaScript 驱动型界面操作。

⚠️ 注意: 必须先通过 browser_fetch_webpage 加载页面。

参数:

  • url(字符串,必填)- 页面 URL(必须与之前获取的页面一致)
  • script(字符串,必填)- 要在页面上下文中执行的 JavaScript 源代码
  • timeoutMs(数字,可选,默认值:30000,最大值:60000)- 执行超时时间
  • returnType(字符串,可选,默认值:json)- json | text | void

返回: 序列化结果(DOM 节点返回 outerHTML)、type、executionTimeMs、truncated、urlChanged、currentUrl,以及失败时的结构化 error。

示例:

// Extract structured data from a page
{
  url: "https://mail.google.com/",
  script: "[...document.querySelectorAll('tr.zA')].slice(0,5).map(r => ({sender: r.querySelector('.zF')?.textContent, subject: r.querySelector('.bog')?.textContent}))"
}

// Click an element via JS when protocol clicks fail
{ url: "https://example.com", script: "document.querySelector('#tricky-button').click(); return 'clicked';" }

// Return void (side-effect only)
{ url: "https://example.com", script: "localStorage.clear();", returnType: "void" }

browser_click_element

点击任何可点击元素(按钮、链接、带有 onclick 处理程序的 div 等)。可通过 CSS 选择器或可见文本内容定位。会自动滚动到元素所在位置,并在点击后等待页面稳定。

⚠️ 注意: 必须先通过 browser_fetch_webpage 加载页面。

参数:

  • url(字符串,必填)- 页面 URL(必须与之前获取的页面一致)
  • selector(字符串,可选)- 元素的 CSS 选择器(例如 #submit-btn、.login-button)
  • text(字符串,可选)- 未提供选择器时用于搜索的文本内容(例如“登录”“提交”)
  • returnHtml(布尔值,可选,默认值:true)- 是否等待页面稳定并在点击后返回 HTML。对于快速表单交互(复选框、单选按钮),设为 false
  • removeUnnecessaryHTML(布尔值,可选,默认值:true)- 移除不必要的 HTML 以缩小体积。仅当 returnHtml 为 true 时使用
  • postClickWait(数字,可选,默认值:1000)- 点击后等待的毫秒数,以便 SPA 渲染动态内容
  • waitForElementTimeout(数字,可选,默认值:1000)- 等待元素的最长时间,单位为毫秒

示例:

// Click by text content
{ url: "https://example.com", text: "Sign In" }

// Click by CSS selector
{ url: "https://example.com", selector: "#login-button" }

// Click without waiting for HTML (fast checkbox toggle)
{ url: "https://example.com", selector: "#agree-checkbox", returnHtml: false }

// Click with custom wait time
{ url: "https://example.com", text: "Load More", postClickWait: 2000 }

回退行为: 如果找到元素后原生点击超时,MCPBrowser 会自动改用基于 JavaScript 的点击方式重试。响应中包含 fallbackUsed、nativeAttempt 和 fallbackAttempt 元数据。如果两次尝试都失败,响应会列出两种错误,以便你选择其他方案。


browser_type_text

在一次调用中向一个或多个输入字段输入文本。支持一次性填写整个表单,以提高自动化效率。默认会自动清除现有文本。

**⚠️ 注意:**必须先通过 browser_fetch_webpage 加载页面。

参数:

  • url(字符串,必填)- 页面 URL(必须与之前获取的页面一致)
  • fields(数组,必填)- 要填写的字段数组。每个字段对象包含:
    • selector(字符串,必填)- 输入元素的 CSS 选择器(例如,#username、input[name="email"])
    • text(字符串,必填)- 要输入到字段中的文本
    • clear(布尔值,可选,默认值:true)- 是否先清除现有文本
    • waitForElementTimeout(数字,可选,默认值:5000)- 等待元素的最长时间,单位为毫秒
  • returnHtml(布尔值,可选,默认值:true)- 是否等待页面稳定并在输入后返回 HTML
  • removeUnnecessaryHTML(布尔值,可选,默认值:true)- 是否移除不必要的 HTML 以减小内容体积。仅在 returnHtml 为 true 时使用
  • postTypeWait(数字,可选,默认值:1000)- 输入后等待的毫秒数,以便 SPA 渲染动态内容

示例:

// Fill multiple fields at once (login form)
{
  url: "https://example.com/login",
  fields: [
    { selector: "#username", text: "[email protected]" },
    { selector: "#password", text: "secretpass123" }
  ]
}

// Single field input
{ url: "https://example.com", fields: [{ selector: "#search", text: "query" }] }

// Append text without clearing
{ url: "https://example.com", fields: [{ selector: "#notes", text: " additional text", clear: false }] }

// Fast form fill without HTML return
{
  url: "https://example.com/signup",
  fields: [
    { selector: "#firstName", text: "John" },
    { selector: "#lastName", text: "Doe" },
    { selector: "#email", text: "[email protected]" }
  ],
  returnHtml: false
}

**错误处理:**如果某个字段填写失败,响应会指出:

  • 失败的字段编号(例如,“第 2 个字段(共 3 个)填写失败”)
  • 已成功填写的字段
  • 明确提示不要重新输入已填写的字段

browser_get_current_html

从已加载的页面获取当前 HTML,不会导航或重新加载页面。由于只提取当前 DOM 状态,因此比 browser_fetch_webpage 快得多。在点击、输入等交互后使用此工具,可以高效获取更新后的页面内容。

**⚠️ 注意:**必须先通过 browser_fetch_webpage 加载页面。

参数:

  • url(字符串,必填)- 页面 URL(必须与之前获取的页面一致)
  • removeUnnecessaryHTML(布尔值,可选,默认值:true)- 是否移除不必要的 HTML,以将内容体积减少约 90%

示例:

// Get current HTML after interactions
{ url: "https://example.com" }

// Get full HTML without cleanup
{ url: "https://example.com", removeUnnecessaryHTML: false }

性能对比:

  • browser_fetch_webpage:2-5 秒(完整重新加载页面)
  • browser_get_current_html:0.1-0.3 秒(仅提取 HTML)✅

browser_scroll_page

在已加载的页面中滚动。在使用 browser_take_screenshot 截取页面不同部分之前,或在交互前将元素滚动到可见区域时使用。支持多种滚动模式:

  • 按方向滚动:按指定像素量向上、向下、向左或向右滚动
  • 滚动到元素:滚动至指定元素可见
  • 滚动到位置:滚动到绝对坐标

**⚠️ 注意:**必须先通过 browser_fetch_webpage 加载页面。

参数:

  • url(字符串,必填)- 页面 URL(必须与之前获取的页面一致)
  • direction(字符串,可选)- 滚动方向:up、down、left、right。与 amount 配合使用。
  • amount(数字,可选,默认值:500)- 指定方向的滚动像素量(约半个视口)
  • selector(字符串,可选)- 要滚动到可见区域的元素的 CSS 选择器。此时会忽略方向和滚动量。
  • x(数字,可选)- 绝对水平滚动位置。与 y 配合使用。
  • y(数字,可选)- 绝对垂直滚动位置。与 x 配合使用。

示例:

// Scroll down by 500px (default)
{ url: "https://example.com", direction: "down" }

// Scroll down by 1000px
{ url: "https://example.com", direction: "down", amount: 1000 }

// Scroll an element into view
{ url: "https://example.com", selector: "#footer" }

// Scroll to specific position
{ url: "https://example.com", x: 0, y: 2000 }

// Scroll to top of page
{ url: "https://example.com", x: 0, y: 0 }

**返回:**当前滚动位置、页面尺寸和视口大小,可用于了解当前在页面中的位置。


browser_take_screenshot

截取已加载页面的屏幕截图,用于视觉分析。适用于 HTML 解析不足的情况——例如包含图表、图片、复杂布局、弹窗或难以仅凭 HTML 理解的视觉内容的页面。返回 PNG 图片。

⚠️ 注意: 必须先通过 browser_fetch_webpage 加载页面。

参数:

  • url(字符串,必填)- 页面 URL(必须与之前获取的页面匹配)
  • fullPage(布尔值,可选,默认值:false)- 截取整个可滚动页面,而不只是视口

示例:

// Capture viewport screenshot (default)
{ url: "https://example.com" }

// Capture full scrollable page
{ url: "https://dashboard.example.com", fullPage: true }

使用场景:

  • 当 HTML 难以解析时,查看页面布局
  • 截取图表、图形或数据可视化内容
  • 调试弹窗、模态框或叠加层
  • 理解视觉反馈(高亮、动画)
  • 查看阻碍元素点击的内容

browser_close_tab

关闭给定 URL 主机名对应的浏览器标签页。从标签页池中移除该页面,并在下次访问该主机名时强制启动新会话。适用于清除身份验证状态、管理内存或重新开始访问某个域名。

⚠️ 注意: 使用完全匹配的主机名(www.example.com 和 example.com 会被视为不同的标签页)。

参数:

  • url(字符串,必填)- 要关闭其主机名对应标签页的 URL

示例:

// Close tab for a domain
{
  url: 'https://example.com';
}

// This will close the tab for portal.azure.com
{
  url: 'https://portal.azure.com/dashboard';
}

使用场景:

  • 清除身份验证/会话状态
  • 释放浏览器内存
  • 在新登录前重置为初始状态

CLI 模式

MCPBrowser 也可以作为独立的命令行工具使用,方便从 Shell 脚本、CI/CD 流水线或通过 Shell 命令工作的 AI Agent(例如 GitHub Copilot CLI)调用。

# Show help
mcpbrowser --help

# Fetch a page (handles auth, SSO, SPAs automatically)
mcpbrowser fetch https://eng.ms/docs/my-page

# Fetch with raw HTML output
mcpbrowser fetch https://github.com --browser chrome --raw

# Take a screenshot
mcpbrowser screenshot https://example.com --output page.png --full-page

# Click an element on a loaded page
mcpbrowser click https://example.com --selector "#login-btn"

# Type into a form field
mcpbrowser type https://example.com --selector "input[name=q]" --text "search query"

# Execute JavaScript
mcpbrowser exec https://example.com --script "document.title"

# Get current HTML of a loaded page
mcpbrowser html https://example.com

CLI 模式与 MCP 模式对比: 不带参数运行时,MCPBrowser 会作为 MCP 服务启动(通过 stdin/stdout 使用 JSON-RPC)。带子命令运行时,则会执行该命令并退出——无需 MCP 协议。


配置(可选)

高级设置所用的环境变量:

变量说明默认值
CHROME_PATHChrome/Edge/Brave 的路径自动检测
CHROME_USER_DATA_DIR浏览器配置文件目录%LOCALAPPDATA%/ChromeAuthProfile
CHROME_REMOTE_DEBUG_PORTDevTools 端口9222

故障排查

浏览器无法打开?

  • 确认已安装 Chrome、Edge 或 Brave
  • 尝试明确设置 CHROME_PATH

无法连接到浏览器?

  • 关闭所有 Chrome 实例后重试
  • 检查端口 9222 是否已被占用

身份验证状态未保留?

  • 保持浏览器标签页打开(默认行为)
  • 相关请求使用相同的域名

使用 npx/私有 npm 注册表时出现 E401 错误?

如果项目中的 .npmrc 指向私有注册表(例如 Azure Artifacts、GitHub Packages、Artifactory),npx 会尝试从该注册表而非 npmjs.org 获取 mcpbrowser,导致失败并报错 E401。

解决方法: 在 MCP 配置的 env 块中添加 npm_config_registry:

{
  "mcpServers": {
    "mcpbrowser": {
      "command": "npx",
      "args": ["-y", "mcpbrowser@latest"],
      "env": {
        "npm_config_registry": "https://registry.npmjs.org"
      }
    }
  }
}

替代方法: 全局安装以完全跳过 npx:

npm install -g mcpbrowser

然后在 MCP 配置中使用 "command": "mcpbrowser",不设置 args。

开发者指南

克隆并设置:

git clone https://github.com/cherchyk/MCPBrowser.git
cd MCPBrowser
npm run install:all  # Installs dependencies for all workspace packages

运行测试:

# Test everything
npm test

# Test MCP server only
npm run test:mcp

# Test extension only
npm run test:extension

构建并格式化这两个项目:

pnpm build   # Creates the MCP server .tgz and VS Code extension .vsix
pnpm format  # Formats the entire workspace

链接

许可证

MIT

评论

支持 Markdown

第一次接触 MCP?

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

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