Agent 终于能实时控制 Chrome 了！还能集成到 UI自动化中

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

# 注：autoConnect 就表示直连已启动的 Chrome。`

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

`{
  "Browser": "Chrome/146.0.6814.46",
  "Protocol-Version": "1.3",
  "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/browser/..."
}`

`const browser = await puppeteer.connect({
    browserWSEndpoint: webSocketDebuggerUrl,
    defaultViewport: null,
  });`

`9222
/devtools/browser/abc123-def456-...`

`/**
 * 根据操作系统和 Chrome 通道获取用户数据目录
 */
functiongetUserDataDir(channel = 'stable') {
const platform = os.platform();
const channelMap = {
    'stable': 'Chrome',
    'beta': 'Chrome Beta',
    'dev': 'Chrome Dev',
    'canary': 'Chrome Canary'
  };

const chromeName = channelMap[channel] || channelMap['stable'];

if (platform === 'darwin') {
    // macOS
    return path.join(
      os.homedir(),
      'Library',
      'Application Support',
      'Google',
      chromeName
    );
  } elseif (platform === 'win32') {
    // Windows
    const localAppData = process.env.LOCALAPPDATA || path.join(os.homedir(), 'AppData', 'Local');
    return path.join(localAppData, 'Google', chromeName, 'User Data');
  } else {
    // Linux
    return path.join(
      os.homedir(),
      '.config',
      'google-chrome' + (channel !== 'stable' ? `-${channel}` : '')
    );
  }
}

/**
 * 读取并解析 DevToolsActivePort 文件
 *
 * Chrome 会在用户数据目录中创建这个文件，包含：
 * - 第一行：调试端口号
 * - 第二行：WebSocket 路径
 */
asyncfunctionreadDevToolsActivePort(userDataDir) {
const portPath = path.join(userDataDir, 'DevToolsActivePort');

console.log(`📂 读取文件: ${portPath}`);

try {
    const fileContent = await fs.readFile(portPath, 'utf8');
    const lines = fileContent
      .split('\n')
      .map(line => line.trim())
      .filter(line => line.length > 0);

    if (lines.length < 2) {
      thrownewError(`DevToolsActivePort 文件格式无效，需要至少两行（端口和路径）`);
    }

    const [rawPort, rawPath] = lines;
    const port = parseInt(rawPort, 10);

    if (isNaN(port) || port <= 0 || port > 65535) {
      thrownewError(`无效的端口号: ${rawPort}`);
    }

    console.log(`✅ 解析成功:`);
    console.log(`   端口: ${port}`);
    console.log(`   路径: ${rawPath}`);

    return { port, path: rawPath };
  } catch (error) {
    if (error.code === 'ENOENT') {
      thrownewError(
        `DevToolsActivePort 文件不存在。\n` +
        `请确保:\n` +
        `1. Chrome 正在运行\n` +
        `2. 远程调试已启用（访问 chrome://inspect/[#remote]()-debugging）\n` +
        `3. 已允许调试连接\n` +
        `4. 用户数据目录正确: ${userDataDir}`
      );
    }
    throw error;
  }
}

/**
 * 连接到已运行的 Chrome 实例
 */
asyncfunctionconnectToChrome(channel = 'stable') {
console.log(`🔌 连接到 Chrome (${channel} 通道)...\n`);

// 1. 获取用户数据目录
const userDataDir = getUserDataDir(channel);
console.log(`📁 用户数据目录: ${userDataDir}`);

// 2. 读取 DevToolsActivePort 文件
const { port, wsPath } = awaitreadDevToolsActivePort(userDataDir);

// 3. 构建 WebSocket 端点 URL
const browserWSEndpoint = `ws://127.0.0.1:${port}${wsPath}`;
console.log(`🔗 WebSocket 端点: ${browserWSEndpoint}\n`);

// 4. 使用 Puppeteer 连接
console.log(`⚡ 正在连接...`);
const browser = await puppeteer.connect({
    browserWSEndpoint,
    defaultViewport: null,
  });

console.log(`✅ 连接成功！\n`);

return browser;
}`

`/**
 * 主函数：连接和页面操作
 */
asyncfunctionmain() {
const channel = process.env.CHROME_CHANNEL || 'stable';
const targetUrl = process.env.TARGET_URL || 'https://example.com';

    // 连接到 Chrome
    const browser = awaitconnectToChrome(channel);

    // 获取所有页面
    const pages = await browser.pages();
    console.log(`📄 当前打开的页面数量: ${pages.length}`);

    // 创建新页面或使用现有页面
    let page;
    if (pages.length === 0) {
      console.log(`🆕 创建新页面...`);
      page = await browser.newPage();
    } else {
      console.log(`🔄 使用现有页面...`);
      page = pages[0];
    }

    // 访问目标页面
    console.log(`🌐 访问页面: ${targetUrl}`);
    await page.goto(targetUrl, { waitUntil: 'networkidle2' });
}`