木偶师mcp claude
](https://www.npmjs.com/package/puppeteer-mcp-claude) ](https://www.npmjs.com/package/puppeteer-mcp-claude)  ](https://nodejs.org/) 
A. 模型上下文协议 通过Puppeteer为Claude Code(以及任何其他支持MCP的客户端)提供真实浏览器的服务器——导航页面、点击和键入、运行JavaScript、捕获屏幕截图、管理Cookie、拦截请求。
需求
- Node.js≥18
- MCP感知客户端(Claude Code、Claude Desktop、Cursor、Codex CLI等)
- Chromium在首次安装时由Puppeteer自动下载(约170 MB)
安装
macOS/Linux
curl -fsSL https://raw.githubusercontent.com/jaenster/puppeteer-mcp-claude/main/install.sh | bashWindows(PowerShell)
iwr -useb https://raw.githubusercontent.com/jaenster/puppeteer-mcp-claude/main/install.ps1 | iex这两个脚本都验证Node≥18,通过npm全局安装包,并在用户范围内向Claude Code注册。覆盖范围 SCOPE=project (bash)或 $env:SCOPE='project' (PowerShell)。
手册 --如果您不想运行远程脚本:
npm install -g puppeteer-mcp-claude
claude mcp add puppeteer-mcp-claude -- npx -y puppeteer-mcp-claude serve然后重新启动Claude Code并询问: *“截取example.com的屏幕截图”*.
工具
你不必打电话 puppeteer_launch 首先,当任何其他工具运行时,浏览器会自动以默认值启动。页面ID默认为 "default",因此可以省略单个选项卡流 pageId 完全。
|工具|它做什么| |-|-| | puppeteer_launch |(可选)启动浏览器或通过以下方式连接到现有的Chrome浏览器 browserWSEndpoint。将其用于隐身模式、代理、自定义视口等。 | | puppeteer_new_page |打开一个新选项卡| | puppeteer_navigate |转到URL| | puppeteer_click |单击CSS选择器。 | | puppeteer_type |在输入中键入。 | | puppeteer_get_text |阅读 textContent 一个元素。 | | puppeteer_screenshot |捕获PNG——作为MCP图像块内联返回,也可以选择保存到磁盘。 | | puppeteer_evaluate |在页面上下文中运行一个JS表达式,返回值。 | | puppeteer_wait_for_selector |等待元素出现。 | | puppeteer_close_page |关闭选项卡| | puppeteer_close_browser |关闭整个浏览器。 | | puppeteer_set_cookies / puppeteer_get_cookies / puppeteer_delete_cookies |Cookie罐管理。 | | puppeteer_set_request_interception |按类型阻止资源或注入请求标头。 |
响应格式
每个工具都以两种并行形式返回结果:
content[0].text— 香椿 (面向令牌的对象表示法),一种紧凑的、支持模式的JSON替代方案。适用于将文本正文直接导入模型上下文的宿主。structuredContent--与类型化JSON对象相同的数据,适用于更喜欢机器可读输出的MCP客户端。
您的主机使用哪一个取决于主机——两者都符合MCP规范。需要对象而不依赖于的类型化客户端 structuredContent 能 import { decode } from '@toon-format/toon' 并解析 content[0].text.
例子
LLM通常如何驱动此服务器——每个示例都显示了您给Claude的提示及其生成的工具序列。
对网站进行截图
“截取news.ycombinator.com的屏幕截图。”
puppeteer_navigate { url: "https://news.ycombinator.com" }
puppeteer_screenshot { fullPage: true }返回PNG作为内联图像块(Claude直接看到它),加上结构化 { bytes, path: null, fullPage: true }.
废弃文章标题
“以降价列表的形式给我Hacker News上排名前10的故事的标题。”
puppeteer_navigate { url: "https://news.ycombinator.com" }
puppeteer_evaluate { script: "[...document.querySelectorAll('.titleline > a')].slice(0,10).map(a => a.textContent)" }Claude将得到的数组格式化为请求的markdown列表。
填写表格
在example.com上,在搜索框中填写“TOON”并提交
puppeteer_navigate { url: "https://example.com" }
puppeteer_type { selector: "input[name=q]", text: "TOON" }
puppeteer_click { selector: "button[type=submit]" }
puppeteer_wait_for_selector { selector: ".results" }
puppeteer_get_text { selector: ".results h1" }重用现有的登录浏览器
“连接到我正在运行的Chrome浏览器,并截取GitHub仪表板的屏幕截图。”
# In one terminal
puppeteer-mcp-claude chrome 9222
# Sign in to GitHub once in the launched Chrome window.puppeteer_launch { browserWSEndpoint: "ws://localhost:9222" }
puppeteer_navigate { url: "https://github.com" }
puppeteer_screenshot {}避免在每个会话中重复登录流程。
阻止图像以加快抓取速度
“从中删除文章文本 尽快。"
puppeteer_set_request_interception { enable: true, blockResources: ["image","media","font","stylesheet"] }
puppeteer_navigate { url: "" }
puppeteer_get_text { selector: "article" }命令行界面
puppeteer-mcp-claude install [--scope user|project|local] Register with Claude Code
puppeteer-mcp-claude uninstall [--scope ...] Remove from Claude Code
puppeteer-mcp-claude status Show "claude mcp list"
puppeteer-mcp-claude serve Run the MCP server on stdio
puppeteer-mcp-claude chrome [port] [userDataDir] Launch Chrome with remote debugging
puppeteer-mcp-claude help Show help发展
pnpm install
pnpm build
pnpm test # node:test via tsx, ~165 tests
pnpm dev # run the server directly from src/我维护的其他MCP服务器
- 远程shell mcp --持久SSH、SFTP、端口转发和MCP上的Docker。长时间运行的守护进程,因此会话、隧道和PTY shell在克劳德代码/克劳德桌面/光标/Codex CLI重启后仍然存在。
- 节点调试器mcp --基于MCP的真正的Node.js调试器。断点、步进、范围检查、eval、源映射感知BP、子进程和工作线程自动附加。说V8检查器协议。
链接
许可证
麻省理工学院
