能否在Chrome扩展中调用Chrome Devtools Protocol（CDP）？

Chrome 扩展完全支持通过官方提供的 API 调用 CDP，相比注入脚本，CDP 能获取到更底层的页面运行指标（如渲染性能、网络时序、V8内存数据等），刚好能满足你扩展的需求。

核心实现方式：chrome.debugger API #

这是扩展调用 CDP 的官方标准方式，允许扩展连接到指定标签页、扩展自身页面，发送 CDP 命令并监听事件。

步骤说明 #

1. 声明权限：在扩展的manifest.json中添加debugger权限：

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

   （注：如果需要获取标签页ID，还需添加tabs权限）

2. 连接标签页并发送CDP命令：
   以下是一个获取页面性能指标的简单示例：

   // 获取当前激活的标签页ID
   chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
     const tabId = tabs[0].id;
     // 连接到目标标签页，指定CDP版本（这里用1.3）
     chrome.debugger.attach({tabId: tabId}, "1.3", () => {
       // 启用Performance域
       chrome.debugger.sendCommand({tabId: tabId}, "Performance.enable", {}, () => {
         // 获取性能指标
         chrome.debugger.sendCommand({tabId: tabId}, "Performance.getMetrics", {}, (result) => {
           // 处理获取到的性能数据，比如传递到popup展示
           console.log("页面性能指标:", result.metrics);
           // 调试完成后断开连接，释放资源
           chrome.debugger.detach({tabId: tabId});
         });
       });
     });
   });
   

关键注意事项 #

• 当扩展通过chrome.debugger连接标签页时，Chrome会向用户显示提示，告知该扩展正在调试页面；
• 调试会话会占用标签页的调试资源，不需要时务必调用chrome.debugger.detach释放；
• CDP的命令和事件会随Chrome版本更新，建议使用与当前Chrome版本匹配的CDP协议版本。

对比注入脚本的优势 #

注入脚本仅能访问页面上下文的DOM和有限JS API，而CDP可以获取：

• 页面渲染阶段的Layout、Paint、Composite事件时序；
• 网络请求的完整生命周期数据（包括请求头、响应体、耗时拆解）；
• V8引擎的内存使用、GC事件；
• JS执行栈、函数调用耗时等底层运行数据。

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