别让登录流程卡住你的AI,直接把Agent连上你正在用的Chrome吧

摘要:做自动化的时候,最烦的就是处理登录。写一堆代码去填账号密码,还得管验证码,搞到最后头都大了。现在有个新玩法:直接让 AI 去控制你电脑上已经打开的那个 Chrome。登录状态、Cookie 全都在,省事多了。

做自动化的时候,最烦的就是处理登录。写一堆代码去填账号密码,还得管验证码,搞到最后头都大了。现在有个新玩法:直接让 AI 去控制你电脑上已经打开的那个 Chrome。登录状态、Cookie 全都在,省事多了。

今年 Chrome 更新之后,官方出了一个叫 chrome-devtools-mcp 的工具,就是为了让 Agent 能直接连上浏览器。像 OpenClaw 这类开源项目,其实也是基于这个思路做的。

这篇文章就跟你聊聊这个东西怎么用,背后是怎么回事,以及怎么写到自己的自动化脚本里。


一、怎么让Agent连上你电脑上的Chrome

先把准备工作做好

  1. Chrome 版本要够新,最好是 146 以上。

  2. 打开 Chrome,在地址栏输入 chrome://inspect/#remote-debugging,然后把“允许调试”这个开关打开。

  3. 装一下 MCP 工具。

如果你用的是 Claude Code,可以直接执行下面这句:

claude mcp add chrome-devtools -- npx chrome-devtools-mcp@latest --autoConnect

要是手动配置,就找到 MCP 的配置文件,加上这段:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

一切就绪后,你给 AI 下一个指令,比如“帮我看看现在这个网页的性能怎么样”,它就会去连你的浏览器并干活。

需要注意一点:第一次连的时候,Chrome 会弹窗让你确认,这是为了保护安全。点“允许”就行。

这么连的好处是什么?

老办法新办法
每次都要新开一个浏览器窗口直接用你已经打开的那个
每次都得重新登录一遍登录状态直接跟着走
环境是独立干净的,跟平时用的不一样就是你平常上网的真实环境

二、这个直连到底是怎么实现的

其实没啥黑科技,Chrome 启用远程调试后,会在用户文件夹里自动生成一个叫 DevToolsActivePort 的小文件。这个文件里面就两行字:第一行是端口号,第二行是 WebSocket 的地址。

有了端口和地址,再把它们拼成一个 ws://127.0.0.1:端口号/路径 这样的链接,然后用 Puppeteer 的 connect 方法接上去就行了。不管是 OpenClaw 还是 Chrome 官方的 MCP 工具,走的基本都是这个路子。

Chrome 以前用 --remote-debugging-port 参数启动的是独立的用户数据目录,没法直接用你现在浏览器的登录状态。而现在新版 Chrome 允许 MCP 工具直接请求调试连接,又能复用你当前在用的用户数据,这才是直连能用的关键。


三、把这个思路用到你的自动化项目里

搞懂了原理,事情就好办了。我们完全可以在自己的 Puppeteer 脚本里,也通过读 DevToolsActivePort 文件,去连上正在用的 Chrome。

这样调试的时候就不用每次都跑一遍登录流程了,非常方便。

下面是一段可以直接用的代码,我已经帮你封装好了:

const puppeteer = require('puppeteer');
const fs = require('fs').promises;
const path = require('path');
const os = require('os');

// 根据你用的系统,找到 Chrome 存放数据的文件夹
function getUserDataDir(channel = 'stable') {
  const platform = os.platform();
  let basePath = '';

  if (platform === 'darwin') { // macOS
    basePath = path.join(os.homedir(), 'Library', 'Application Support', 'Google', 'Chrome');
  } else if (platform === 'win32') { // Windows
    const localAppData = process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local');
    basePath = path.join(localAppData, 'Google', 'Chrome', 'User Data');
  } else { // Linux
    basePath = path.join(os.homedir(), '.config', 'google-chrome');
  }
  
  return basePath;
}

// 去 Chrome 的文件夹里,把 DevToolsActivePort 这个文件的内容读出来
async function readDevToolsActivePort(userDataDir) {
  const portPath = path.join(userDataDir, 'DevToolsActivePort');
  console.log(`正在找这个文件: ${portPath}`);

  try {
    const fileContent = await fs.readFile(portPath, 'utf8');
    const lines = fileContent.split('\
').filter(line => line.trim().length > 0);
    
    if (lines.length < 2) {
      throw new Error('文件格式不对,至少应该有两行(端口和路径)');
    }

    const port = parseInt(lines[0], 10);
    const wsPath = lines[1];
    
    return { port, wsPath };
  } catch (error) {
    if (error.code === 'ENOENT') {
      throw new Error(
        `没找到 DevToolsActivePort 文件。\
` +
        `请检查:\
` +
        `1. Chrome 是不是正在运行\
` +
        `2. 远程调试有没有开(去 chrome://inspect/#remote-debugging 看一眼)\
` +
        `3. 允许调试的弹窗有没有点“允许”\
` +
        `4. 用户文件夹路径对不对: ${userDataDir}`
      );
    }
    throw error;
  }
}

// 主函数:连接到你正在用的 Chrome
async function connectToChrome() {
  console.log('准备连接到你电脑上的 Chrome...\
');
  
  // 1. 找到文件夹
  const userDataDir = getUserDataDir();
  console.log(`用户数据文件夹: ${userDataDir}`);
  
  // 2. 读文件,拿到端口和路径
  const { port, wsPath } = await readDevToolsActivePort(userDataDir);
  
  // 3. 拼出 WebSocket 地址
  const browserWSEndpoint = `ws://127.0.0.1:${port}${wsPath}`;
  console.log(`WebSocket 地址是: ${browserWSEndpoint}\
`);
  
  // 4. 连上去!
  const browser = await puppeteer.connect({
    browserWSEndpoint,
    defaultViewport: null,
  });
  
  console.log('连上了!\
');
  return browser;
}

// 试一下
async function main() {
  const browser = await connectToChrome();
  
  // 看看现在打开了几个页面
  const pages = await browser.pages();
  console.log(`当前打开了 ${pages.length} 个页面`);
  
  // 用第一个页面去跳转
  let page = pages[0] || await browser.newPage();
  await page.goto('https://www.baidu.com');
  console.log('已经跳转到百度了');
  
  // 记得关掉连接
  // await browser.disconnect();
}

main();

跑这个脚本的时候记得把 Chrome 开着,不然会报错。连上之后,你就能像操作普通浏览器那样去操作它了,而且网站会认为你就是正常用户在访问,不需要重新登录。


总结

Agent 直连 Chrome 这个功能,说白了就是把 Puppeteer 的 connect 方法用得更巧妙了一些。Chrome 这边放开了普通用户的调试权限,也为了让 AI 更好地跟浏览器配合。

不管你是用现成的 OpenClaw,还是自己写脚本,这个功能都能省下不少事。下次写自动化脚本的时候,可以试试这个方法,至少不用再跟登录逻辑较劲了。

本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://shenqiku.cn/article/FLY_13731