[JS/TS] 如何让AI直接操作你的浏览器？基于Playwright与MCP的开源工具Playwriter

在开发或使用 AI Agent 进行自动化任务时，你是否遇到过这样的困境：让AI去访问特定网站、抓取数据或执行操作，它在后台运行许久后，最终却报错失败？很多时候，问题的症结都卡在了登录验证这一环。

我们明明就坐在电脑前，浏览器里保存着登录状态，甚至动动手指就能通过滑动验证码。但AI运行在一个封闭的“黑盒”环境，我们无法介入协助，只能干着急。

最近在 GitHub 上发现了一个新项目—— Playwriter ，它以一种巧妙的方式，优雅地解决了上述难题。看到名字你可能会联想到微软的浏览器自动化测试框架 Playwright。没错，它的核心正是基于 Playwright，但作者将其封装成了一个 Chrome 插件 ，并集成了 MCP（Model Context Protocol）服务器，为用户带来了更丝滑、更灵活的体验。

可以说，它是目前实现 AI 操作浏览器的极具潜力的方案之一。

给浏览器装上“副驾驶”

Playwriter 的创新之处在于，它能以插件形式“附身”于你的 Chrome 浏览器，接管标签页，替你处理繁琐的网页操作任务。

其工作原理主要由两部分构成：

1. 一个 Chrome 浏览器扩展。
2. 一个 MCP Server，作为连接 AI 模型与真实浏览器的桥梁。

当你点击插件图标激活连接后，AI 便能通过 Playwright 提供的丰富 API，直接控制这个特定的浏览器标签页。这意味着 AI 不再是远程的“云端操作”，而是直接运行在你的本地浏览器环境中，成为了你的“数字副驾驶”。

精准解决三大核心痛点

Playwriter 的设计直击当前浏览器自动化领域的几个关键痛点：

1. 实现无缝人机协作
这是其最突出的优势。以往遇到各种登录验证（如密码、短信、图形验证码），AI 往往束手无策。现在，基于 Playwriter，你可以先手动完成登录或协助通过验证，然后将“方向盘”交给 AI，让它继续执行后续的数据抓取、内容整理等任务。这种人与 AI 之间流畅的上下文切换能力，是衡量一个辅助工具是否合格的关键。

2. 极致节省 Token 消耗
许多 AI 工具（包括一些官方插件）为了让模型“看清”网页，会不断截取屏幕图像发送给 AI。这种方式不仅响应慢，更会急剧消耗 Token，成本高昂。

Playwriter 则巧妙地利用了浏览器的“无障碍树”（Accessibility Tree）技术。它将网页上的所有交互元素（按钮、输入框、链接等）转化为结构化的文本描述，再传递给 AI。相较于整页截图的方式，这种方法能减少约 80% 的上下文占用，既快速又经济。

3. 提供完整的 Playwright 能力
市面上不少工具为了降低使用门槛，只向 AI 暴露了“点击”、“输入文本”等基础指令。对于开发者或需要复杂操作的用户来说，这远远不够。

Playwriter 将 Playwright 的强大 API 几乎完整地对接给了 AI，解锁了更多高级玩法，例如：

• 拦截并分析网络请求。
• 在页面上下文中执行任意 JavaScript 脚本。
• 直接与前端框架（如 React）组件进行交互和调试。

快速上手教程

尽管功能强大，Playwriter 的配置却相当简单。

第一步：安装浏览器扩展
前往 Chrome 网上应用店搜索并安装 “Playwriter MCP Extension”，或者直接从其 GitHub 仓库 下载源码进行开发者模式加载。

第二步：配置 MCP 服务器
在你使用的 AI 客户端中配置 MCP 服务器。例如，在 Claude Desktop 的配置文件（如 claude_desktop_config.json）中添加以下配置：

{
  “mcpServers”: {
    “playwriter”: {
      “command”: “npx”,
      “args”: [“-y”, “playwriter@latest”]
    }
  }
}

第三步：开始使用
打开你想要控制的网页，点击浏览器工具栏中的 Playwriter 插件图标。当图标变为绿色时，表示连接已建立。此时，你便可以在 AI 对话窗口中发出指令，例如：“将这个页面的产品列表整理成表格”、“监控这个页面的价格变化，如果有降价就告诉我”。AI 将直接在你的浏览器中开始自动操作。

总结

如果用一词来形容 Playwriter，那便是“通透”。它打破了 AI 与我们日常工作环境之间的那层壁垒。

以往的 AI Agent 就像是在异地远程办公的助手，遇到障碍时你爱莫能助。而 Playwriter 让 AI 仿佛就坐在你身旁，与你共用同一块屏幕、同一套交互环境。这种 “看得见、摸得着、帮得上忙” 的体验，或许是现阶段 AI 在浏览器自动化领域应有的理想形态。

目前，该项目已在 GitHub 上完全开源，如果你对浏览器自动化、AI 智能体开发感兴趣，非常值得一试。也欢迎在云栈社区分享你的使用心得或发现的更多有趣的开源实战项目。