1. 为什么自动化脚本总在重复登录如果你用 Playwright 写过需要登录的自动化任务大概率遇到过这个场景脚本第一次跑得好好的第二次再跑页面又跳回登录页验证码、短信、扫码轮番上阵。原因不复杂——Playwright 默认每次启动的是一个全新的、干净的浏览器上下文没有 Cookie、没有 localStorage、没有你平时登录后留下的任何痕迹。Playwright MCP extension 解决的正是这件事。它把 Playwright 的浏览器控制能力包装成一个 MCP 服务让编辑器里的 AI 助手可以直接驱动浏览器。但默认情况下它启动的仍然是隔离环境。真正好用的玩法是让它接管你系统里已经装好的 Chrome复用你日常登录后的状态这样脚本一上来就是已登录态省掉反复登录的麻烦。这篇记录聚焦三件事extension 怎么装、怎么配置成复用系统 Chrome 登录态、以及用 TaoToken 统一 Key 把模型调用和浏览器自动化串起来。适合已经在用 Trae、Qoder、Cursor 这类编辑器想让 AI 直接操作浏览器的同学。全程可跟做配置片段直接复制。2. TaoToken 前置一把 Key 管住模型调用在讲浏览器配置之前先把模型这一侧理顺。Playwright MCP 负责“操作浏览器”但驱动它的 AI 助手需要调用大模型这就需要 API Key。如果你同时用好几个工具每个都单独配 Key、单独充值管理起来很碎。TaoToken 的思路是统一入口一个 Key兼容主流模型接口格式编辑器、CLI、脚本都能用同一套配置。官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册后在控制台生成 Key 即可。具体操作路径打开控制台 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 登录后进入 API Keys 页面 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 新建一个 Key 并复制保存。接口基地址用 https://taotoken.net/api 注意这个地址不带任何查询参数配置时直接填。想先验证模型通不通可以去模型对话页 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 发一条消息试试。如果你主要做长期编码或 Agent 类任务Coding Plan 页面 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 有对应的套餐说明按需选择。拿到 Key 之后下面所有配置里的sk-xxxx都替换成你自己的。这一步做完模型侧就统一了接下来专心搞浏览器登录态。3. 安装 Playwright MCP extension 并配置复用 Chrome 登录态3.1 安装扩展本体Playwright MCP 的浏览器扩展是复用登录态的关键。它负责在你已打开的 Chrome 和 MCP 服务之间建立连接通道。安装来源是官方仓库的 extension 目录和 releases 页面按 README 指引把扩展加载到 Chrome 里。安装完成后点击扩展图标会看到 MCP 的安装配置信息里面有一段 JSON 配置直接复制。这段配置就是待会儿要放进编辑器 MCP 设置里的内容。3.2 关键让 Chrome 以可连接模式启动默认双击打开的 Chrome 是不接受外部调试连接的。要让 Playwright MCP 接管你日常用的 Chrome需要用调试端口启动它。这里有个取舍用独立的用户数据目录还是复用默认目录。复用默认目录能直接拿到你现有的登录态但要求 Chrome 完全退出后再用参数启动。命令如下# macOS 示例复用默认用户数据目录 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \ --remote-debugging-port9222 \ --user-data-dir$HOME/Library/Application Support/Google/Chrome# Windows 示例 C:\Program Files\Google\Chrome\Application\chrome.exe ^ --remote-debugging-port9222 ^ --user-data-dirC:\Users\你的用户名\AppData\Local\Google\Chrome\User Data# Linux 示例 google-chrome \ --remote-debugging-port9222 \ --user-data-dir$HOME/.config/google-chrome启动后Chrome 会带着你原有的 Cookie 和登录态运行同时开放 9222 端口供 MCP 连接。你可以先访问一个需要登录的站点确认还是登录状态。注意如果 Chrome 已经在运行需要先完全退出包括后台进程否则新参数不生效。macOS 上可以用CmdQ彻底退出Windows 在任务管理器里确认没有残留进程。3.3 编辑器里的 MCP 配置骨架在 Trae 或 Qoder 的 MCP 设置里加入从扩展复制来的配置并补上连接已启动 Chrome 的参数。一个可用的 settings 骨架如下{ mcpServers: { playwright: { command: npx, args: [ playwright/mcplatest, --cdp-endpoint, http://127.0.0.1:9222 ], env: { OPENAI_API_KEY: sk-xxxx, OPENAI_BASE_URL: https://taotoken.net/api } } } }这里的--cdp-endpoint指向刚才用 9222 端口启动的 ChromeMCP 会通过 CDP 协议连上去从而复用该浏览器的登录态。env里的两个变量把模型调用指向 TaoTokenKey 换成你自己的。如果你用的是扩展提供的连接方式而非 CDP配置字段名可能不同以扩展复制出来的内容为准把 endpoint 部分替换成指向本地已启动的 Chrome 即可。4. 验证登录态是否共享成功配置保存后重启编辑器让 MCP 生效。然后在 AI 助手里发一条指令让它打开一个需要登录的页面并读取页面标题。比如用 playwright 打开 https://github.com/settings/profile 告诉我当前登录的用户名是什么如果登录态共享成功助手会直接读到你的用户名而不是跳转到登录页。你也可以用一条更直接的命令验证 CDP 连接是否通curl -s http://127.0.0.1:9222/json/version正常会返回类似下面的 JSON包含Browser和webSocketDebuggerUrl字段{ Browser: Chrome/1xx.0.xxxx.xx, Protocol-Version: 1.3, webSocketDebuggerUrl: ws://127.0.0.1:9222/devtools/browser/xxxx }只要这个接口有响应说明 Chrome 的调试通道是开的MCP 就能连上。再配合助手实际打开一个已登录页面双重确认。实测下来最容易出问题的不是配置本身而是 Chrome 没退干净导致 9222 端口没起来。先跑上面这条 curl能省掉很多排查时间。5. 本篇常见报错排查5.1 无法解析 shell 环境意外退出代码 9编辑器报这个错通常是 shell 启动脚本里有干扰项。检查~/.bash_profile如果里面有source ~/.bash_profile这类自我引用的写法删掉它退出编辑器重新打开。如果你用的是 zsh检查~/.zshrc把export NODE_OPTIONS--openssl-legacy-provider这类可能引起冲突的配置处理掉再重启编辑器。5.2 ReferenceError: crypto is not defined这个报错来自扩展运行环境常见于 Node 版本偏低。把 Node 升级到 24 或更高版本重新安装依赖后再试。升级命令可以用 nvm 管理nvm install 24 nvm use 24 node -v确认输出是 v24 开头即可。升级后重启编辑器和 Chrome再走一遍验证流程。5.3 连不上 9222 端口先确认 Chrome 是不是用带--remote-debugging-port9222的参数启动的再确认没有其他 Chrome 实例占用。用curl http://127.0.0.1:9222/json/version测一下没响应就说明端口没开回到 3.2 重新启动。另外注意某些安全软件会拦截本地调试端口必要时加白名单。6. 把 Key 和浏览器串起来之后到这里模型调用走 TaoToken 统一 Key浏览器操作复用系统 Chrome 登录态两条链路都通了。后续你再写需要登录的自动化任务AI 助手直接在你已登录的浏览器里操作不用每次重新走登录流程。几个实用建议日常调试时保持那个带调试端口的 Chrome 开着别随手关掉如果任务涉及多个站点确认这些站点的登录态都在同一个 Chrome 用户目录里Key 和 endpoint 建议放在项目级的配置文件里别硬编码在脚本中方便切换。需要长期跑编码或 Agent 任务的话可以去 Coding Plan 页面 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 看看套餐接入过程中遇到 Key 或 endpoint 的问题API Keys 页面 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 和接入文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 里有对应说明。先把 curl 那条验证命令跑通剩下的就是顺水推舟。
【Playwright】playwright mcp extension 安装记录：用 TaoToken 统一 Key 打通已装 Chrome 登录态
1. 为什么自动化脚本总在重复登录如果你用 Playwright 写过需要登录的自动化任务大概率遇到过这个场景脚本第一次跑得好好的第二次再跑页面又跳回登录页验证码、短信、扫码轮番上阵。原因不复杂——Playwright 默认每次启动的是一个全新的、干净的浏览器上下文没有 Cookie、没有 localStorage、没有你平时登录后留下的任何痕迹。Playwright MCP extension 解决的正是这件事。它把 Playwright 的浏览器控制能力包装成一个 MCP 服务让编辑器里的 AI 助手可以直接驱动浏览器。但默认情况下它启动的仍然是隔离环境。真正好用的玩法是让它接管你系统里已经装好的 Chrome复用你日常登录后的状态这样脚本一上来就是已登录态省掉反复登录的麻烦。这篇记录聚焦三件事extension 怎么装、怎么配置成复用系统 Chrome 登录态、以及用 TaoToken 统一 Key 把模型调用和浏览器自动化串起来。适合已经在用 Trae、Qoder、Cursor 这类编辑器想让 AI 直接操作浏览器的同学。全程可跟做配置片段直接复制。2. TaoToken 前置一把 Key 管住模型调用在讲浏览器配置之前先把模型这一侧理顺。Playwright MCP 负责“操作浏览器”但驱动它的 AI 助手需要调用大模型这就需要 API Key。如果你同时用好几个工具每个都单独配 Key、单独充值管理起来很碎。TaoToken 的思路是统一入口一个 Key兼容主流模型接口格式编辑器、CLI、脚本都能用同一套配置。官网在 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册后在控制台生成 Key 即可。具体操作路径打开控制台 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 登录后进入 API Keys 页面 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 新建一个 Key 并复制保存。接口基地址用 https://taotoken.net/api 注意这个地址不带任何查询参数配置时直接填。想先验证模型通不通可以去模型对话页 https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 发一条消息试试。如果你主要做长期编码或 Agent 类任务Coding Plan 页面 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 有对应的套餐说明按需选择。拿到 Key 之后下面所有配置里的sk-xxxx都替换成你自己的。这一步做完模型侧就统一了接下来专心搞浏览器登录态。3. 安装 Playwright MCP extension 并配置复用 Chrome 登录态3.1 安装扩展本体Playwright MCP 的浏览器扩展是复用登录态的关键。它负责在你已打开的 Chrome 和 MCP 服务之间建立连接通道。安装来源是官方仓库的 extension 目录和 releases 页面按 README 指引把扩展加载到 Chrome 里。安装完成后点击扩展图标会看到 MCP 的安装配置信息里面有一段 JSON 配置直接复制。这段配置就是待会儿要放进编辑器 MCP 设置里的内容。3.2 关键让 Chrome 以可连接模式启动默认双击打开的 Chrome 是不接受外部调试连接的。要让 Playwright MCP 接管你日常用的 Chrome需要用调试端口启动它。这里有个取舍用独立的用户数据目录还是复用默认目录。复用默认目录能直接拿到你现有的登录态但要求 Chrome 完全退出后再用参数启动。命令如下# macOS 示例复用默认用户数据目录 /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \ --remote-debugging-port9222 \ --user-data-dir$HOME/Library/Application Support/Google/Chrome# Windows 示例 C:\Program Files\Google\Chrome\Application\chrome.exe ^ --remote-debugging-port9222 ^ --user-data-dirC:\Users\你的用户名\AppData\Local\Google\Chrome\User Data# Linux 示例 google-chrome \ --remote-debugging-port9222 \ --user-data-dir$HOME/.config/google-chrome启动后Chrome 会带着你原有的 Cookie 和登录态运行同时开放 9222 端口供 MCP 连接。你可以先访问一个需要登录的站点确认还是登录状态。注意如果 Chrome 已经在运行需要先完全退出包括后台进程否则新参数不生效。macOS 上可以用CmdQ彻底退出Windows 在任务管理器里确认没有残留进程。3.3 编辑器里的 MCP 配置骨架在 Trae 或 Qoder 的 MCP 设置里加入从扩展复制来的配置并补上连接已启动 Chrome 的参数。一个可用的 settings 骨架如下{ mcpServers: { playwright: { command: npx, args: [ playwright/mcplatest, --cdp-endpoint, http://127.0.0.1:9222 ], env: { OPENAI_API_KEY: sk-xxxx, OPENAI_BASE_URL: https://taotoken.net/api } } } }这里的--cdp-endpoint指向刚才用 9222 端口启动的 ChromeMCP 会通过 CDP 协议连上去从而复用该浏览器的登录态。env里的两个变量把模型调用指向 TaoTokenKey 换成你自己的。如果你用的是扩展提供的连接方式而非 CDP配置字段名可能不同以扩展复制出来的内容为准把 endpoint 部分替换成指向本地已启动的 Chrome 即可。4. 验证登录态是否共享成功配置保存后重启编辑器让 MCP 生效。然后在 AI 助手里发一条指令让它打开一个需要登录的页面并读取页面标题。比如用 playwright 打开 https://github.com/settings/profile 告诉我当前登录的用户名是什么如果登录态共享成功助手会直接读到你的用户名而不是跳转到登录页。你也可以用一条更直接的命令验证 CDP 连接是否通curl -s http://127.0.0.1:9222/json/version正常会返回类似下面的 JSON包含Browser和webSocketDebuggerUrl字段{ Browser: Chrome/1xx.0.xxxx.xx, Protocol-Version: 1.3, webSocketDebuggerUrl: ws://127.0.0.1:9222/devtools/browser/xxxx }只要这个接口有响应说明 Chrome 的调试通道是开的MCP 就能连上。再配合助手实际打开一个已登录页面双重确认。实测下来最容易出问题的不是配置本身而是 Chrome 没退干净导致 9222 端口没起来。先跑上面这条 curl能省掉很多排查时间。5. 本篇常见报错排查5.1 无法解析 shell 环境意外退出代码 9编辑器报这个错通常是 shell 启动脚本里有干扰项。检查~/.bash_profile如果里面有source ~/.bash_profile这类自我引用的写法删掉它退出编辑器重新打开。如果你用的是 zsh检查~/.zshrc把export NODE_OPTIONS--openssl-legacy-provider这类可能引起冲突的配置处理掉再重启编辑器。5.2 ReferenceError: crypto is not defined这个报错来自扩展运行环境常见于 Node 版本偏低。把 Node 升级到 24 或更高版本重新安装依赖后再试。升级命令可以用 nvm 管理nvm install 24 nvm use 24 node -v确认输出是 v24 开头即可。升级后重启编辑器和 Chrome再走一遍验证流程。5.3 连不上 9222 端口先确认 Chrome 是不是用带--remote-debugging-port9222的参数启动的再确认没有其他 Chrome 实例占用。用curl http://127.0.0.1:9222/json/version测一下没响应就说明端口没开回到 3.2 重新启动。另外注意某些安全软件会拦截本地调试端口必要时加白名单。6. 把 Key 和浏览器串起来之后到这里模型调用走 TaoToken 统一 Key浏览器操作复用系统 Chrome 登录态两条链路都通了。后续你再写需要登录的自动化任务AI 助手直接在你已登录的浏览器里操作不用每次重新走登录流程。几个实用建议日常调试时保持那个带调试端口的 Chrome 开着别随手关掉如果任务涉及多个站点确认这些站点的登录态都在同一个 Chrome 用户目录里Key 和 endpoint 建议放在项目级的配置文件里别硬编码在脚本中方便切换。需要长期跑编码或 Agent 任务的话可以去 Coding Plan 页面 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 看看套餐接入过程中遇到 Key 或 endpoint 的问题API Keys 页面 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 和接入文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 里有对应说明。先把 curl 那条验证命令跑通剩下的就是顺水推舟。
