[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"pack-detail-mcp-browser-automation-stack-zh":3,"seo:pack:mcp-browser-automation-stack:zh":95},{"code":4,"message":5,"data":6},200,"操作成功",{"pack":7},{"slug":8,"icon":9,"tone":10,"status":11,"status_label":12,"title":13,"description":14,"items":15,"install_cmd":94},"mcp-browser-automation-stack","🌐","#06B6D4","new","本周新建","MCP 浏览器自动化栈","想把真浏览器接进 Claude Code \u002F Cursor \u002F Gemini CLI 的开发者必装十件套：Playwright MCP 做确定性快照打底 + Chrome DevTools MCP 实时调试 + Chrome MCP \u002F Puppeteer MCP \u002F Browserbase MCP 三种运行时取舍 + 多浏览器代理 \u002F 登录状态共享 \u002F 弹窗抢焦点修复 \u002F 日志审计闭环。按推荐安装顺序排列。",[16,28,36,43,50,57,64,73,80,87],{"id":17,"uuid":18,"slug":19,"title":20,"description":21,"author_name":22,"view_count":23,"vote_count":24,"lang_type":25,"type":26,"type_label":27},152,"290f10c7-59c4-49aa-bfdd-56e8becfa222","playwright-mcp-server-browser-automation-ai-290f10c7","Playwright MCP Server — Browser Automation for AI","Official Playwright MCP server for browser automation. Lets Claude Code, Cursor, and other AI tools navigate pages, fill forms, click buttons, take screenshots, and run end-to-end tests via natural la","Microsoft AI",169,0,"en","mcp","MCP",{"id":29,"uuid":30,"slug":31,"title":32,"description":33,"author_name":34,"view_count":35,"vote_count":24,"lang_type":25,"type":26,"type_label":27},3059,"7f3a756c-8ec2-4b20-8ad6-99bfc5155af3","playwright-mcp-browser-automation-server","Playwright MCP — Browser Automation Server","Playwright MCP is an MCP server for browser automation via Playwright snapshots. Add via npx in Claude Code\u002FCodex to run deterministic actions.","MCP Hub",149,{"id":37,"uuid":38,"slug":39,"title":40,"description":41,"author_name":34,"view_count":42,"vote_count":24,"lang_type":25,"type":26,"type_label":27},477,"17f46368-d971-4227-ab65-f5f183e7dedc","chrome-devtools-mcp-browser-debugging-ai-agents-17f46368","Chrome DevTools MCP — Browser Debugging for AI Agents","Give your AI coding agent full access to Chrome DevTools for browser automation, debugging, and performance analysis. Works with Claude, Cursor, Copilot, and 15+ AI tools.",207,{"id":44,"uuid":45,"slug":46,"title":47,"description":48,"author_name":34,"view_count":49,"vote_count":24,"lang_type":25,"type":26,"type_label":27},3060,"e10ca754-dc37-41c7-b94a-fdad9e5de1bf","chrome-mcp-server-extension-based-browser-mcp","Chrome MCP Server — Extension-Based Browser MCP","mcp-chrome turns Chrome into an MCP server via an extension + bridge. Install mcp-chrome-bridge, load the extension, then connect to 127.0.0.1:12306\u002Fmcp.",61,{"id":51,"uuid":52,"slug":53,"title":54,"description":55,"author_name":34,"view_count":56,"vote_count":24,"lang_type":25,"type":26,"type_label":27},675,"efa97531-0468-4c2b-ab24-aff9b4090ac3","puppeteer-mcp-headless-chrome-server-ai-agents-efa97531","Puppeteer MCP — Headless Chrome Server for AI Agents","MCP server wrapping Google Puppeteer for headless Chrome automation. Navigate pages, screenshot, generate PDFs, scrape SPAs, and test web apps through AI agent commands. 2,000+ stars.",121,{"id":58,"uuid":59,"slug":60,"title":61,"description":62,"author_name":34,"view_count":63,"vote_count":24,"lang_type":25,"type":26,"type_label":27},3192,"33a22c18-fe2c-4870-9a56-5f86ac0991cb","browserbase-mcp-cloud-browser-automation-tools","Browserbase MCP — Cloud Browser Automation Tools","Browserbase MCP server exposes automation tools (navigate, act, observe, extract) backed by Browserbase + Stagehand, letting agents operate real web pages.",66,{"id":65,"uuid":66,"slug":67,"title":68,"description":69,"author_name":70,"view_count":71,"vote_count":24,"lang_type":72,"type":26,"type_label":27},2610,"deaee53e-ad94-4671-a766-5c6aeb5f186c","multi-browser-mcp-proxies-arc-browser-chrome-beta-variants-deaee53e","Multi-Browser MCP Proxies — Arc Browser & Chrome Beta Variants","Companion to 'Chrome MCP Background Proxy' for running parallel, isolated MCP fleets against Arc Browser and Chrome Beta on top of the same cdp-proxy.mjs. Arc-specific proxy auto-discovers the WebSocket path from \u002Fjson\u002Fversion (Arc doesn't write a DevToolsActivePort file in the standard location); Chrome Beta proxy points at Beta's own DevToolsActivePort. Lets you run mcp__chrome__*, mcp__beta__*, and mcp__arc__* side-by-side with independent client state and no cross-talk.","henuwangkai",192,"",{"id":74,"uuid":75,"slug":76,"title":77,"description":78,"author_name":70,"view_count":79,"vote_count":24,"lang_type":72,"type":26,"type_label":27},2611,"20bc3ffd-1d7a-41d1-86d0-b668e8500cee","chrome-fleet-multi-agent-browser-pool-shared-login-state-20bc3ffd","Chrome Fleet — Multi-Agent Browser Pool with Shared Login State","Multi-agent control plane for chrome-devtools-mcp. Two modes: (1) shared main Chrome — N CDP proxies on 9401\u002F9402\u002F9403... all multiplexing onto one logged-in Chrome :9222 so every agent inherits your real cookies\u002Fextensions, with focus protection and ID isolation handled by cdp-proxy.mjs; (2) isolated agent Chromes — dedicated Chrome instance per agent on :930N with its own user-data-dir for multi-account \u002F persona-isolation testing. Includes a status tool to inspect the running fleet.",186,{"id":81,"uuid":82,"slug":83,"title":84,"description":85,"author_name":70,"view_count":37,"vote_count":86,"lang_type":25,"type":26,"type_label":27},498,"29944683-2033-4e30-9449-6d18dffa60f5","chrome-mcp-background-proxy-fix-popups-focus-stealing-multi-29944683","Chrome MCP Background Proxy — Fix Popups, Focus Stealing & Multi-Agent Conflicts","Persistent CDP proxy + entry script that lets chrome-devtools-mcp run against your real, logged-in Chrome without the Chrome 146+ consent popup spamming on every connection, without focus stealing (Target.activateTarget \u002F Page.bringToFront are intercepted, createTarget is forced to background), and without request-ID \u002F event collisions when multiple Claude Code windows or sub-agents share one Chrome. Includes the proxy core (cdp-proxy.mjs v3), entry script, safe cleanup, pre-flight healthcheck, and a launchd-style self-healing watchdog with Feishu alerts.",1,{"id":88,"uuid":89,"slug":90,"title":91,"description":92,"author_name":34,"view_count":93,"vote_count":24,"lang_type":25,"type":26,"type_label":27},3819,"80bc9d31-f1e5-5528-8e4b-bc93fe9b1d88","browsertoolsmcp-audit-browser-logs-via-mcp","BrowserToolsMCP — Audit Browser Logs via MCP","BrowserToolsMCP streams browser logs to MCP clients: install via `npx`, run a local server, and audit network\u002Fconsole events from your IDE (7.2k★).",57,"tokrepo install pack\u002Fmcp-browser-automation-stack",{"pageType":96,"pageKey":8,"locale":97,"title":98,"metaDescription":99,"h1":100,"tldr":101,"bodyMarkdown":102,"faq":103,"schema":119,"internalLinks":125,"citations":138,"wordCount":151,"generatedAt":152},"pack","zh","MCP 浏览器自动化栈 — 10 个 MCP 把真浏览器接进 Claude \u002F Cursor \u002F Gemini","Playwright MCP \u002F Chrome DevTools MCP \u002F Chrome MCP \u002F Puppeteer MCP \u002F Browserbase MCP + 多浏览器代理 + 登录状态共享 fleet + 弹窗抢焦修复 + 日志审计 — 一套有顺序的 MCP，把真浏览器接进你的 AI agent。含 cookie 作用域 \u002F iframe \u002F 调试 \u002F CI 的取舍说明。","MCP 浏览器自动化栈 — 把真浏览器接进你的 Agent","十个 MCP 服务器，按推荐安装顺序排：Playwright MCP 做确定性快照、Chrome DevTools MCP 实时看网络和 console、Chrome MCP \u002F Puppeteer MCP \u002F Browserbase MCP 三种运行时取舍、多浏览器代理覆盖 iframe 和 Arc\u002FBeta、Chrome Fleet 共享登录、弹窗抢焦点修复、BrowserToolsMCP 日志审计。装完你的 agent 就能像资深 QA 一样开浏览器。","## 这个 pack 解决什么\n\n所有 MCP 浏览器服务器都号称同一件事 — 让 AI 助手点击、输入、读网页。但它们在**确定性 \u002F cookie 作用域 \u002F iframe 支持 \u002F 调试可见性 \u002F CI 友好度**这五点上各有取舍。本 pack 选 10 个 MCP，正面覆盖这些取舍，并安排了安装顺序 — 每装一个解锁下一层。\n\n目标用户是把浏览器接进 **Claude Code \u002F Cursor \u002F Gemini CLI** 做 E2E 测试、登录态爬取、agent 自吃狗粮、UI 实时调试的开发者。装完之后你的 agent 会**按场景挑合适的 MCP**，而不是硬把一个服务器套到所有形状上。\n\n## 推荐安装顺序\n\n1. **Playwright MCP Server（微软官方）** — 从这里起步。基于快照（snapshot）的动作是确定性的，API 表面小，三大引擎（Chromium \u002F Firefox \u002F WebKit）通用。可访问性树快照是 agent 可靠的关键 — 读结构化节点 ID，不靠猜 CSS 选择器。Playwright 文档明确说 snapshot 是给 AI 客户端用的推荐接口。\n2. **Playwright MCP — Browser Automation Server（社区 npx 版）** — 同引擎，更轻装，靠 `npx` 拉起。已有 Playwright 安装、想避开官方包打包开销时用。Codex \u002F Cursor 重度用户首选。\n3. **Chrome DevTools MCP** — 第二个装，不是第一个。挂在 DevTools Protocol 上，暴露网络、console、性能 trace、DOM 检查。和 Playwright MCP 配对用：Playwright 驱动页面，Chrome DevTools MCP 告诉你**为啥挂了**。\n4. **Chrome MCP Server（扩展版）** — 完全不同的模型。作为 Chrome 扩展运行，不是另起一个浏览器进程 — 这意味着它**复用你真实的登录态 profile**：cookie、扩展、保存的密码全有。SSO 后台或者反 bot 卡得严、Playwright 新 context 一开就被挑战时选它。\n5. **Puppeteer MCP — Headless Chrome Server** — CI 精瘦选项。没有跨浏览器抽象层，安装小、冷启动快。纯 Chromium 爬虫管线、用不到 Firefox \u002F WebKit fallback 时用。\n6. **Browserbase MCP — 云浏览器** — 本地 Chromium 撞到 IP 封禁、需要 stealth、规模拉不动时的逃生通道。云端浏览器池 + stealth profile，MCP 暴露的工具形状一致 — agent 代码可移植。\n7. **多浏览器 MCP 代理（Arc \u002F Chrome Beta 变体）** — iframe 感知层。原生 Chrome MCP 经常进不去 Arc 的分屏面板、Beta 的变体 DOM；这个代理把 Arc \u002F Beta \u002F Chrome Stable 多路复用，agent 选窗口。**站点核心 UI 跑在 iframe 里时是关键**（嵌入的支付、Stripe、Cloudflare 挑战页都是）。\n8. **Chrome Fleet — 多 Agent 浏览器池 + 共享登录态** — 一旦你有多个 agent，登录疲劳就成主要成本。Fleet 维护一个已登录的预热浏览器池，每个 agent 取一个用。cookie 作用域是**整个 fleet 共享**，不是 per-agent — 这是设计取舍：上线快、隔离弱。agent 之间互信时用。\n9. **Chrome MCP Background Proxy — 弹窗 \u002F 焦点修复** — 这是**修 bug 的 MCP**。原生 Chrome MCP 在弹窗或 OAuth 窗口跳出来时会丢焦点，agent 的下一个点击就点错 tab。这个代理拦截焦点事件、确定性重路由。**在接入第一个登录流之前就装上**，不要等到 debug flaky 跑挂三次再补。\n10. **BrowserToolsMCP — 通过 MCP 审计浏览器日志** — 收官。Agent 跑完之后，BrowserToolsMCP 让它（或你）回放 console 错误、网络失败、页面生命周期事件。这是\"测试通过了\" vs \"测试通过且零错误\" 的差别。\n\n## 它们怎么协同\n\n```\n          Playwright MCP（确定性，跨浏览器）\n                │\n                ├── Chrome DevTools MCP（为啥挂的）\n                │\n          Chrome MCP（真实 profile）  ←  多浏览器代理（Arc \u002F Beta）\n                │\n          Puppeteer MCP（CI 精瘦）       Chrome Fleet（共享登录）\n                │\n          Browserbase MCP（云端 + stealth）\n                │\n          Chrome MCP Background Proxy（弹窗焦点修复）\n                │\n          BrowserToolsMCP（日志审计）\n```\n\n主干是 **Playwright MCP + Chrome DevTools MCP + BrowserToolsMCP** — 这三件套覆盖 CI 流派 80% 的 agent 浏览器工作。Chrome MCP \u002F Chrome Fleet 是**真实 profile 分支**，应对 SSO 闸口。Browserbase MCP 是**逃生通道**。\n\n## Cookie \u002F 会话 \u002F iframe — 选对作用域\n\n- **Per-context cookie（Playwright MCP \u002F Puppeteer MCP \u002F Browserbase MCP）** — 每个会话从零开始。最适合测试。最不适合那种第一次访问就被指纹封的反 bot 站。\n- **真实 profile cookie（Chrome MCP 扩展）** — agent 复用你登录好的 Chrome profile。最适合 SSO 后台。最不适合并行 agent（会抢同一个 cookie jar）。\n- **Fleet 共享 cookie（Chrome Fleet）** — agent 共享预热池。最适合同一租户下多 agent。最不适合多租户隔离 — 不要把两个客户的 agent 跑同一个 fleet。\n- **iframe 处理** — Playwright MCP 原生暴露 frame snapshot；Chrome DevTools MCP 通过 CDP target ID 进跨域 frame；Chrome MCP 扩展只能进同源 frame（除非你写 content script）。目标站集成 Stripe \u002F Cloudflare Turnstile \u002F Auth0 时，**默认 Playwright MCP + 多浏览器代理**。\n\n## 调试 → CI 路径\n\n1. **本地开发**：Playwright MCP + Chrome DevTools MCP，有头模式，看 agent 实时驱动、DevTools 面板实时反馈。\n2. **切到 BrowserToolsMCP** 捞你漏掉的隐藏错误 — console warning、失败的 XHR、hydration mismatch。\n3. **进 CI**：把 Playwright MCP 换成 Puppeteer MCP（更轻），跑 headless。CI 出口 IP 被反 bot 拦时再切 Browserbase MCP — 工具调用形状一致。\n4. **生产 agent fleet**：Chrome Fleet 共享登录 + Background Proxy 处理 OAuth 弹窗 + BrowserToolsMCP 抓日志进 post-mortem 面板。\n\n## 常见踩坑\n\n- **同时装 Chrome MCP 扩展和 Playwright MCP** — 它们抢同一个 DevTools 端口。选一个做主，另一个只做 fallback。\n- **忘记 `npx playwright install`** — 官方 Playwright MCP 需要 Chromium \u002F Firefox \u002F WebKit 二进制。缺了 MCP 服务器会哑掉。\n- **Cookie 作用域混淆** — dev 跑得好好的（真实 profile），到 CI 静默挂掉（新 context、过不了 SSO）。**第一天就定下 cookie 作用域**。\n- **iframe 盲区** — Stagehand \u002F Browser-Use 风格的 agent 在简单页面好用，碰到嵌入式支付就挂。目标用 iframe → 默认 Playwright MCP + 多浏览器代理。\n- **OAuth 弹窗抢焦点** — 在**第一个**登录流之前就装 Background Proxy，不要等第三次 flaky 跑挂。\n",[104,107,110,113,116],{"q":105,"a":106},"只来得及装一个，先装哪个？","Playwright MCP（微软官方版）。基于 snapshot 的动作给 agent 最确定的接口 — 读结构化 accessibility-tree 节点 ID，而不是猜 CSS 选择器，同一套 API 通吃 Chromium \u002F Firefox \u002F WebKit。本 pack 里其他 MCP 都是在它之上做优化。如果你跳过 Playwright MCP 直接上 Chrome MCP 或 Puppeteer MCP，你是用确定性换\"真实 profile cookie\"或\"更小安装体积\" — 那是你已经清楚知道哪个约束更重要时才做的取舍。",{"q":108,"a":109},"Playwright MCP 和 Chrome DevTools MCP 都能驱动 Chrome，区别是啥？","它们驱动 Chrome 的层不同。Playwright MCP 挂在 Playwright 自动化库上，暴露的是动作动词：navigate \u002F click \u002F fill。Chrome DevTools MCP 直接挂在 Chrome DevTools Protocol 上，暴露的是检查动词：拿网络请求 \u002F 读 console 消息 \u002F 跑性能 profile。两个都要 — Playwright MCP 做事，Chrome DevTools MCP 告诉你为啥没做成。光跑 Chrome DevTools MCP 等于让 agent 用底层 CDP 原语拼动作，脆。",{"q":111,"a":112},"需要登录的站怎么处理？","三种方案，按成本排。(1) Playwright MCP + 保存的 storage state — 脚本登录一次、cookie 存 JSON、每次会话回放。测试场景最干净。(2) Chrome MCP 扩展 — 复用你真实 Chrome profile 的 cookie，零脚本。单人后台爽，并行 agent 容易翻车。(3) Chrome Fleet — 已登录的预热浏览器池，多 agent 共享。多 agent 同一租户场景适合。混用要慎重 — cookie 上的竞态是这套栈里最痛的 bug。",{"q":114,"a":115},"这些能在 CI \u002F Docker 无显示器环境跑吗？","能，但要挑对的。Playwright MCP 和 Puppeteer MCP 都能在容器里 headless 跑 — Puppeteer MCP 镜像更小、冷启动更快。Chrome MCP 扩展在 CI 里跑不了 — 它要求真实 Chrome profile 和扩展加载。Browserbase MCP 是云端逃生通道 — 想从 CI 跑、但目标站封 CI IP 段时用它。Chrome DevTools MCP 和 BrowserToolsMCP 都能 headless 跑，因为它们挂的是 DevTools Protocol，不是窗口。",{"q":117,"a":118},"iframe 怎么办？很多支付流嵌的就是 Stripe \u002F Cloudflare 挑战页","iframe 是绝大多数 agent 栈静默翻车的地方。Playwright MCP 原生暴露 frame snapshot，agent 按 ID 进跨域 iframe。Chrome DevTools MCP 通过 CDP target ID 接入任意 frame。Chrome MCP 扩展只能进同源 frame（除非你额外写 content script）。流程经过 Stripe \u002F Cloudflare Turnstile \u002F Auth0 Universal Login 时，默认 Playwright MCP + 装本 pack 里的多浏览器代理，**先把 iframe 路径调通再做别的** — 后期再补就要重写整套工具调用。",{"@context":120,"@type":121,"name":13,"description":122,"numberOfItems":123,"inLanguage":124},"https:\u002F\u002Fschema.org","ItemList","十个 MCP 服务器，按推荐安装顺序排，把真浏览器接进 Claude Code \u002F Cursor \u002F Gemini CLI — 涵盖 Playwright \u002F Chrome DevTools \u002F Chrome 扩展 \u002F Puppeteer \u002F Browserbase \u002F 多浏览器代理 \u002F 登录态 fleet \u002F 弹窗焦点修复 \u002F 日志审计。",10,"zh-CN",[126,130,134],{"url":127,"anchor":128,"reason":129},"\u002Fzh\u002Fai-tools-for\u002Fbrowser-automation","TokRepo 浏览器自动化分类","本 pack 之外的非 MCP agent（Browser-Use \u002F Skyvern \u002F Stagehand）配套",{"url":131,"anchor":132,"reason":133},"\u002Fzh\u002Ftopics\u002Fmcp-server-stack","MCP Server Stack pack","兄弟 pack，覆盖浏览器以外的更广 MCP 服务器菜单",{"url":135,"anchor":136,"reason":137},"\u002Fzh\u002Fmcp\u002Fchrome","TokRepo Chrome MCP 系列","下钻到本 pack 里 Chrome 专项 MCP 的详细页",[139,143,147],{"claim":140,"source_name":141,"source_url":142},"Playwright 通过一套 API 支持 Chromium \u002F Firefox \u002F WebKit","Playwright 官方文档","https:\u002F\u002Fplaywright.dev\u002Fdocs\u002Fintro",{"claim":144,"source_name":145,"source_url":146},"Model Context Protocol 规范定义 AI 客户端如何连接工具服务器","Model Context Protocol","https:\u002F\u002Fmodelcontextprotocol.io\u002F",{"claim":148,"source_name":149,"source_url":150},"Chrome DevTools Protocol 暴露网络 \u002F console \u002F 性能 API","Chrome DevTools Protocol","https:\u002F\u002Fchromedevtools.github.io\u002Fdevtools-protocol\u002F",1414,"2026-05-22T00:00:00Z"]