AI导哈

浏览器自动化工具

Chrome Local MCP是一个本地浏览器自动化工具，允许通过Claude Code控制真实的Chrome浏览器，实现页面导航、元素点击、表单填写、截图和文本提取等功能，无需云服务。

  • by callmehuyv
  • JavaScript
  • 本地部署
  • 11 星标
  • 更新于
在 GitHub 查看 callmehuyv/chrome-local-mcp

使用说明

Chrome本地MCP

让Claude Code完全控制真正的Chrome浏览器。

浏览页面、点击元素、填写表单、截图、提取文本——所有这些都在本地进行，不需要云。

10秒内安装

claude plugin marketplace add callmehuyv/claude-plugins-marketplace
claude plugin install chrome-local-mcp@callmehuyv-plugins

重新启动克劳德代码。完成。这 mcp__chrome_local__* 工具准备好了。

就这样 没有全局安装，没有配置文件，没有浏览器标志。

它能做什么？

自然地与Claude Code交谈：

> Open Chrome and go to github.com
> Take a snapshot of the page
> Click the "Sign in" button
> Fill in the username field with "myuser"
> Take a screenshot with OCR
> Get all the links on this page

Claude Code会自动选择正确的MCP工具。

为什么选择Chrome本地MCP？

大多数浏览器MCP（Playwright MCP、Chrome DevTools MCP）都是为通用自动化而构建的。 Chrome本地MCP是为Claude Code的实际工作方式而构建的 --快速、令牌高效、实用。

Chrome本地MCP 剧作家MCP Chrome DevTools MCP
持续会话 （保持登录状态） 是 否 否
辅助功能快照 （无视觉标记） 是 是 否
元素参考 用于可靠点击 是 是 否
本地OCR 通过Apple Vision（零成本） 是 否 否
批量操作 在单个工具调用中 是 否 否
可见浏览器 （看看克劳德是怎么做的） 是 可配置 是
适用于您的真实Chrome个人资料 是 否 部分
REST API 用于外部集成 是 否 否
零配置 --只需安装即可 是 是 需要标志

亮点

  • 持久浏览器配置文件 --登录一次网站，克劳德每次都可以访问。会话之间没有重新身份验证。
  • 本地OCR保存令牌 --使用Apple Vision从本地屏幕截图中提取文本。每张截图可节省2000-5000个视觉标记。
  • 批量操作 --在单个工具调用中单击、键入、滚动、导航。往返次数更少，工作流程更快。
  • 真正的Chrome --不是沙盒测试浏览器。扩展、配置文件和站点兼容性都能正常工作。
  • 简单的架构 --一个文件，stdio传输，没有sidecar进程，没有浏览器扩展。只是工作。

安装选项

选项A:Claude代码插件（推荐）

claude plugin marketplace add callmehuyv/claude-plugins-marketplace
claude plugin install chrome-local-mcp@callmehuyv-plugins

两个命令。自动注册。你完了。

选项B:npx（无全局安装）

claude mcp add chrome_local -- npx chrome-local-mcp@latest

选项C：全局安装

npm install -g chrome-local-mcp
claude mcp add --scope user chrome_local chrome-local-mcp

选项D：来源

git clone https://github.com/callmehuyv/chrome-local-mcp.git
cd chrome-local-mcp
npm install
claude mcp add --scope user chrome_local node /path/to/chrome-local-mcp/mcp-server.js

在任何安装方法之后， 重新启动克劳德代码 拿起新工具。

可用工具（22）

工具 它做什么
launch 启动Chrome（可见或无头）
close_browser 关闭浏览器
new_tab 打开新选项卡
list_pages 列出所有打开的选项卡
navigate 转到URL
go_back 回到历史
snapshot 获取带有元素引用的可访问性树（阅读页面最便宜的方法）
click 按选择器、文本或坐标单击
click_ref 按快照引用单击元素
type 在输入中键入文本
type_ref 按快照引用键入元素
press_key 按键盘键（Enter、Tab、Escape等）
select 选择下拉选项
scroll 滚动页面
screenshot 截图（可选本地OCR）
ocr 通过Apple Vision从任何图像文件中提取文本
get_text 获取页面或元素的文本内容
get_links 获取页面上的所有链接
get_inputs 获取所有表单输入
eval 在页面上执行JavaScript
wait_for 等待元素出现
batch 在单个工具调用中运行多个操作

可访问性快照——你的秘密武器

这 snapshot 工具是 最便宜、最快 理解页面的方法。没有截图，没有视觉标记，没有OCR。只是一个结构化的文本树：

> Take a snapshot of the page

- RootWebArea "Example Domain"
  - heading "Example Domain"
  - StaticText "This domain is for use in..."
  - link "Learn more" [ref=e1]

每个交互元素都有一个 参考 （例如。 [ref=e1]).使用它单击或键入：

> Click ref e1
> Type "hello" into ref e3

成本比较

方法 代币成本 速度
snapshot ~ 100-500个文本标记 即时
screenshot 随着 ocr: true 约500-2000个文本标记 约1.4秒
screenshot （图片） ~2000-5000视觉符号 即时

始终尝试 snapshot 第一。 仅在需要视觉背景时使用屏幕截图。

本地OCR（macOS）

从本地屏幕截图中提取文本——无需向Claude发送图像：

> Take a screenshot with OCR
> OCR this image: /tmp/my-image.png

要求：

  • macOS（使用Apple Vision框架）
  • Python 3包含：
    pip3 install pyobjc-framework-Vision pyobjc-framework-Quartz

运作原理

Claude Code  ←— stdio —→  MCP Server  ←———→  Puppeteer  ←———→  Chrome
  1. Claude Code通过MCP协议（stdio）发送工具调用
  2. mcp-server.js 将它们翻译成Puppeteer命令
  3. Puppeteer控制本地Chrome实例
  4. Chrome以可见模式打开，因此您可以看到正在发生的事情

REST API（可选）

包含一个HTTP API服务器，用于Claude Code之外的程序控制：

npm run server   # starts on http://localhost:3033

curl -X POST http://localhost:3033/launch
curl -X POST http://localhost:3033/navigate \
  -H 'Content-Type: application/json' \
  -d '{"pageId": 1, "url": "https://example.com"}'
curl -X POST http://localhost:3033/screenshot \
  -H 'Content-Type: application/json' \
  -d '{"pageId": 1}'

看 server.js 对于所有端点。

配置

无头模式

> Launch Chrome in headless mode

窗口大小

默认值：1440x900。编辑 mcp-server.js 改变 --window-size arg。

需求

  • Node.js 18+
  • Chrome/Chromium（如果需要，Puppeter会自动下载一个）
  • 克劳德代码 命令行界面

故障排除

MCP工具未显示？

  1. 检查注册： claude mcp list
  2. 重新启动Claude Code（新会话）
  3. 验证路径指向正确 mcp-server.js

浏览器未启动？

  • 关闭任何其他Puppeteer/Chrome自动化实例
  • 跑 npm install 重新下载Chrome
  • macOS：在“系统偏好设置”>“隐私和安全”中允许Chrome

截图不返回图像？

  • 使用支持图像的Claude Code模型
  • 屏幕截图保存到 /tmp/ --检查响应中的文件路径

贡献

发现错误或有功能请求？ 打开一个问题 --我们很想收到你的来信。

如果这个项目对你有帮助，可以考虑给它一颗星——它也有助于其他人发现它。

许可证

麻省理工学院

相关 MCP