Playwright MCP 和 Playwright Extension 都能让 AI Agent 操作浏览器，但它们解决的是两个不同问题：前者更像是 Agent 专用的浏览器自动化环境，后者则是把 Agent 连接到你日常使用的 Chrome/Edge 浏览器。

这篇文章记录一次在 opencode 中配置和验证两种方式的过程，并重点说明登录态应该如何处理。

1. 普通 Playwright MCP：Agent 自己启动浏览器

在 opencode 中接入 Playwright MCP，最小配置如下：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "playwright": {
      "type": "local",
      "command": ["npx", "-y", "@playwright/mcp@latest"],
      "enabled": true
    }
  }
}

重启 opencode 后，Agent 就可以调用 Playwright MCP 的浏览器工具，例如打开页面、点击元素、读取可访问性快照、查看 console 和 network。

验证时，Agent 成功打开了浏览器，并导航到了 example.com。

普通 Playwright MCP 的特点是：它控制的是 MCP 自己管理的浏览器，不是你手动打开的 Chrome 页签。因此它默认看不到你日常浏览器里的登录态、cookie、插件和已打开页面。

2. 普通 MCP 的登录态如何保持

一开始访问 visionaryblog.cn 时，页面没有登录态。

但这并不代表普通 MCP 不能保持登录。Playwright MCP 默认使用持久 profile，同一个项目、同一套 MCP 配置下，登录后的 cookie 和 localStorage 会保存到 MCP 的 profile 中。

实际验证过程是：

1. 用普通 Playwright MCP 打开 visionaryblog.cn。
2. 在 MCP 打开的浏览器中完成登录。
3. 关闭 MCP 浏览器页签。
4. 再次让 MCP 打开 visionaryblog.cn。

重新打开后，页面已经不再显示登录按钮，并且出现了头像入口，说明登录态保留成功。

如果希望登录态目录更明确，可以显式配置 --user-data-dir：

{
  "mcp": {
    "playwright": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "@playwright/mcp@latest",
        "--user-data-dir=.playwright-profile"
      ],
      "enabled": true
    }
  }
}

同时建议把这个目录加入 .gitignore：

.playwright-profile/

这样登录态会固定保存在项目目录下，便于理解和排查。注意不要提交这个目录，因为里面可能包含 cookie、localStorage 等敏感信息。

3. Playwright Extension：连接日常浏览器

如果希望 Agent 复用你日常 Chrome/Edge 中已经登录的状态，就需要使用 Playwright Extension。

官方配置方式是给 MCP server 增加 --extension：

{
  "mcp": {
    "playwright-extension": {
      "type": "local",
      "command": ["npx", "-y", "@playwright/mcp@latest", "--extension"],
      "enabled": true
    }
  }
}

这种方式不会启动一个全新的隔离浏览器，而是通过浏览器扩展连接到你已经打开的 Chrome/Edge。适合以下场景：

1. 页面依赖 SSO、二次验证或复杂登录流程。
2. 需要复用日常浏览器里已有的 cookie 和登录状态。
3. 需要操作已经打开的浏览器页签。
4. 页面行为依赖某些浏览器插件。

4. 不配置 token：手动授权并选择页签

如果不配置 token，Agent 第一次使用 Playwright Extension 时会打开授权页。只有你手动授权并选择的页签，Agent 才能控制。

这种模式的优点是安全、直观。你能明确决定 Agent 可以连接哪个页面。缺点是每次建立新连接时都需要人工确认，不适合频繁自动化操作。

5. 配置 token：跳过授权弹窗

Playwright Extension 支持通过 PLAYWRIGHT_MCP_EXTENSION_TOKEN 跳过授权确认。

安装 Playwright Extension 后，点击浏览器插件图标，打开 extension 状态页。

然后复制页面上展示的 token。

官方写法是直接放到 MCP 的 env 中：

{
  "mcp": {
    "playwright-extension": {
      "type": "local",
      "command": ["npx", "-y", "@playwright/mcp@latest", "--extension"],
      "env": {
        "PLAYWRIGHT_MCP_EXTENSION_TOKEN": "your-token-here"
      },
      "enabled": true
    }
  }
}

不过不建议把 token 直接写进 opencode.json，因为它很容易被提交到仓库。更安全的方式是把 token 放进本地环境文件，例如 .env.local：

PLAYWRIGHT_MCP_EXTENSION_TOKEN=your-token-here

再用一个启动脚本读取它：

#!/usr/bin/env bash
set -euo pipefail

SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
PROJECT_ROOT="$(cd "$SCRIPT_DIR/.." && pwd)"
ENV_FILE="$PROJECT_ROOT/.env.local"

if [[ -f "$ENV_FILE" ]]; then
  TOKEN_LINE="$(grep -E "^PLAYWRIGHT_MCP_EXTENSION_TOKEN=" "$ENV_FILE" || true)"
  PLAYWRIGHT_MCP_EXTENSION_TOKEN="${TOKEN_LINE#PLAYWRIGHT_MCP_EXTENSION_TOKEN=}"
  FIRST_CHAR="${PLAYWRIGHT_MCP_EXTENSION_TOKEN:0:1}"
  LAST_CHAR="${PLAYWRIGHT_MCP_EXTENSION_TOKEN: -1}"
  if [[ ( "$FIRST_CHAR" == '"' && "$LAST_CHAR" == '"' ) || ( "$FIRST_CHAR" == "'" && "$LAST_CHAR" == "'" ) ]]; then
    PLAYWRIGHT_MCP_EXTENSION_TOKEN="${PLAYWRIGHT_MCP_EXTENSION_TOKEN:1:${#PLAYWRIGHT_MCP_EXTENSION_TOKEN}-2}"
  fi
  export PLAYWRIGHT_MCP_EXTENSION_TOKEN
fi

exec npx -y @playwright/mcp@latest --extension

opencode 中对应配置为：

{
  "mcp": {
    "playwright-extension": {
      "type": "local",
      "command": ["bash", "scripts/start-playwright-mcp.sh"],
      "enabled": true
    }
  }
}

6. token 配置时容易踩的坑

Invalid token provided. 是最常见的问题。排查时可以关注这几点：

1. token 必须来自当前 Chrome/Edge profile 中安装的 Playwright Extension。
2. 如果刷新过 token，必须同步更新 .env.local，并重启 opencode。
3. token 是敏感信息，不要提交到 git，也不要贴到公开对话或日志里。

另外，token 自动授权模式有一个体验差异：它可能先连接到 extension 的 connect.html 页面，而不是让你手动选择已有业务页签。这时可以让 Agent 直接从连接页导航到目标 URL，但这不等同于“接管已经打开的另一个页签”。如果必须控制某个已打开页签，手动授权并选择页签更可靠。

7. 两种方式怎么选

普通 Playwright MCP 更适合稳定、可重复的自动化验证。它的浏览器环境由 MCP 管理，不污染你的日常浏览器。登录一次后，默认持久 profile 通常能保留登录态。

Playwright Extension 更适合复用日常浏览器状态。它可以利用你已经登录的账号、已有 cookie、浏览器插件和打开的页面，但连接和授权链路更复杂，也更依赖当前浏览器 profile。

简单总结：

我的实际建议是：日常开发调试优先使用普通 Playwright MCP。只有遇到 SSO、二次验证、企业内网页面或必须复用日常浏览器状态时，再切换到 Playwright Extension。