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

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

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('\n').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 文件。\n` +
        `请检查:\n` +
        `1. Chrome 是不是正在运行\n` +
        `2. 远程调试有没有开（去 chrome://inspect/#remote-debugging 看一眼）\n` +
        `3. 允许调试的弹窗有没有点“允许”\n` +
        `4. 用户文件夹路径对不对: ${userDataDir}`
      );
    }
    throw error;
  }
}

// 主函数：连接到你正在用的 Chrome
async function connectToChrome() {
  console.log('准备连接到你电脑上的 Chrome...\n');
  
  // 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}\n`);
  
  // 4. 连上去！
  const browser = await puppeteer.connect({
    browserWSEndpoint,
    defaultViewport: null,
  });
  
  console.log('连上了！\n');
  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();