Chrome扩展Manifest V3：如何从扩展中获取DevTools WS URL？

Chrome扩展可以通过内置的chrome.debugger API直接获取Browser级别的DevTools WebSocket端点，无需依赖外部命令行参数。以下是具体实现步骤：

1. 配置扩展权限 #

首先在你的manifest.json中添加debugger权限，这是调用相关API的前提：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["debugger"]
}

2. 获取Browser WS Endpoint #

使用chrome.debugger.getTargets()方法获取所有调试目标，筛选出类型为browser的目标，其webSocketDebuggerUrl字段就是你需要的WS端点：

chrome.debugger.getTargets((targets) => {
  // 找到浏览器级别的调试目标
  const browserTarget = targets.find(target => target.type === 'browser');
  
  if (browserTarget) {
    const wsEndpoint = browserTarget.webSocketDebuggerUrl;
    console.log("Browser WS Endpoint:", wsEndpoint);
    
    // 直接传入Puppeteer建立连接
    // const browser = await puppeteer.connect({
    //   browserWSEndpoint: wsEndpoint,
    //   defaultViewport: null
    // });
  } else {
    console.error("未找到浏览器调试目标");
  }
});

关键注意事项 #

• 无需提前调用chrome.debugger.attach()，getTargets()方法可以直接获取所有可用调试目标的元数据。
• 如果需要针对隐身窗口的端点，可以通过筛选target.incognito === true的目标来获取。
• Puppeteer连接时，建议加上defaultViewport: null参数，避免覆盖浏览器原有视口设置。

内容的提问来源于stack exchange，提问作者Svyat