Playwriter MCP

使用 Cursor、Claude、VS Code 自动化您的浏览器。比剧作家 MCP 更有能力、更高效。

通过 MCP 控制您的浏览器。使用 AI 自动执行浏览器任务。

类似于剧作家 MCP，但通过扩展。更少的上下文窗口使用。通过全面的 CDP 支持，功能增强 10 倍

完全开源：https://github.com/remorses/playwriter

## MCP 安装

1. **安装 Chrome 扩展程序**

从 Chrome Web Store 安装 [Playwriter MCP 扩展](https://github.com/remorses/playwriter)（或在开发过程中加载解压的包）。将扩展程序固定到 Chrome 工具栏以方便访问。

2. **连接到选项卡**

单击您想要控制的任何选项卡上的 Playwriter MCP 扩展图标。连接成功后图标会变成绿色。

**图标状态：**
- **灰色：** 未连接
- **绿色：** 已连接并准备就绪
- **橙色徽章 (...):** 正在连接
- **红色徽章 (!):** 错误

3. **将 MCP 添加到您的代理**

将以下配置添加到您的 MCP 客户端设置（例如，Claude Desktop 的 `claude_desktop_config.json`）：

```json
{
“mcp服务器”：{
“剧作家”：{
“命令”：“npx”，
“参数”：[
“剧作家@最新”
]
}
}
}
````

重新启动您的 MCP 客户端，您就可以开始了！您的人工智能助手现在可以通过扩展程序控制浏览器。

＃＃ 用法

### 使用 MCP

**重要提示：** 在使用 MCP 之前，您必须在至少一个选项卡上启用该扩展：

1. 将 Playwriter 扩展固定到 Chrome 工具栏（单击拼图图标）
2. 导航到您要控制的选项卡
3. 单击扩展程序图标 - 连接后它将变为绿色

在一个或多个选项卡上启用后，您的 AI 助手可以：
- 通过“执行”工具控制所有启用的选项卡
- 使用剧作家的上下文和页面 API 在选项卡之间切换
- 以编程方式创建新选项卡
- 针对您的浏览器选项卡运行任何 Playwright 代码

MCP 将自动启动中继服务器并连接到您启用的浏览器选项卡。

### 与剧作家一起使用

您可以通过 playwright-core 以编程方式使用 playwriter：

``打字稿
从 'playwright-core' 导入 { chromium }
从 'playwriter' 导入 { startPlayWriterCDPRelayServer, getCdpUrl }


const 服务器 = 等待 startPlayWriterCDPRelayServer()


const 浏览器 = 等待 chromium.connectOverCDP(getCdpUrl())

const context = browser.contexts()[0]
const page = context.pages()[0]

等待 page.goto('https://example.com')
等待页面.screenshot({ 路径: 'screenshot.png' })

等待 browser.close()
服务器.close()
````

＃＃ 比较

### vs 剧作家 MCP

Playwriter 使用 Chrome 扩展程序，而不是启动全新的 Chrome 窗口。这种方法有几个好处：

- **与您的代理协作** - 在同一浏览器中与 AI 一起工作，在遇到验证码或复杂交互时为其提供帮助
- **从现有页面开始** - 在现有浏览器的页面上启动 MCP，以准确复制错误发生的情况
- **重复使用您的扩展程序** - 继续使用广告拦截器、密码管理器和您已安装的其他扩展程序
- **绕过自动化检测** - 通过断开扩展连接来暂时禁用 CDP/自动化，以绕过 Google 登录等检测系统，然后重新连接以继续自动化。借助 Playwright 的无头 Chrome，自动化始终会被检测到并阻止您的工作流程
- **资源使用更少** - 无需生成单独的 Chrome 实例，节省内存和 CPU
- **单一浏览器工作流程** - 一切都发生在您的主 Chrome 浏览器中，无需在窗口之间切换

### 与 BrowserMCP 对比

Playwriter 可以访问完整的剧作家 API，它可以通过剧作家方法发送任何 CDP 命令。它只使用 1 个工具“execute”来发送剧作家代码片段。这意味着法学硕士可以重用其有关剧作家的知识，并且使用更少的上下文窗口来公开浏览器自动化工具。

Playwriter 的功能也更强大，因为它公开了完整的剧作家 API，而不是仅使用一些工具。

为了进行比较，这里列出了 BrowserMCP 支持的工具：

导航：

- `browsermcp_browser_navigate` - 导航到 URL
- `browsermcp_browser_go_back` - 返回上一页
- `browsermcp_browser_go_forward` - 前进到下一页
页面检查：
- `browsermcp_browser_snapshot` - 捕获当前页面的可访问性快照（使用它来获取对元素的引用）
- `browsermcp_browser_screenshot` - 截取当前页面的屏幕截图
- `browsermcp_browser_get_console_logs` - 从浏览器获取控制台日志
互动：
- `browsermcp_browser_click` - 单击一个元素（需要快照中的元素引用）
- `browsermcp_browser_hover` - 将鼠标悬停在元素上
- `browsermcp_browser_type` - 将文本键入可编辑元素（带有可选提交）
- `browsermcp_browser_select_option` - 在下拉列表中选择一个选项
- `browsermcp_browser_press_key` - 按键盘上的一个键
公用事业：
- `browsermcp_browser_wait` - 等待指定的时间（以秒为单位）


＃＃ 安全

Playwriter 的设计考虑到了安全性，确保只有您可以控制您的浏览器。

### 它是如何运作的

1. **本地 WebSocket 服务器**：当 MCP 启动时，它会在 `localhost:19988` 上启动一个单例 WebSocket 服务器
2. **双连接**：Chrome扩展程序和MCP客户端都连接到此本地服务器
3. **用户控制的访问**：扩展程序只能控制您明确单击扩展程序图标的选项卡（绿色图标表示已连接的选项卡）
4. **Localhost-Only**：WebSocket 服务器不发送 CORS 标头，从而阻止任何网页或远程服务器连接到它 - 只有在本地计算机上运行的进程才能建立连接
5. **明确同意**：Chrome 在受控选项卡上显示“自动化横幅”，使选项卡自动化时显而易见

### 可以控制什么

- **仅启用的选项卡**：通过单击扩展图标显式连接的选项卡
- **通过自动化创建的新选项卡**：通过 Playwright 命令以编程方式创建的选项卡
- **没有别的**：其他浏览器选项卡、您的浏览历史记录或您未明确连接的任何选项卡仍然无法访问

### 不可能发生什么

- **无远程访问**：外部网站或服务器无法连接到 WebSocket（仅限本地主机）
- **无被动监控**：扩展程序无法读取或监控您未连接的选项卡
- **无自动传播**：调试器不会自动附加到您手动打开的新选项卡

这种架构确保浏览器自动化仅在您选择的选项卡获得明确许可的情况下才会发生。