Chrome扩展开发：如何通过DevTools API捕获非活跃标签页截图？

核心思路 #

Chrome DevTools协议中的Page.captureScreenshot方法完全可以满足非活跃标签页的截图需求。它通过建立调试会话直接与标签页的渲染进程通信，无需标签页处于前台活跃状态——这正是它区别于chrome.tabs.captureVisibleTab的核心优势，后者仅能捕获当前可见的活跃标签页。

Page.captureScreenshot方法参数说明（翻译自DevTools协议文档） #

该方法支持灵活配置截图参数，关键参数如下：

• format：可选，图片格式，支持png、jpeg两种，默认值为png。
• quality：可选，仅当格式为jpeg时生效，取值范围0-100，默认值80，数值越高图片质量越好。
• clip：可选，指定截图的裁剪区域，包含x（左上角X坐标）、y（左上角Y坐标）、width（宽度）、height（高度）、scale（缩放比例）五个子参数。
• captureBeyondViewport：可选，是否捕获视口之外的页面内容，默认值true，开启后可截取整个页面。
• optimizeForSpeed：可选，是否优先保证截图速度而非质量，默认值false。

实现步骤与代码示例 #

1. 扩展权限配置 #

首先需要在manifest.json中声明必要的权限，以Manifest V3为例：

{
  "manifest_version": 3,
  "name": "非活跃标签截图工具",
  "version": "1.0",
  "permissions": ["debugger", "tabs"],
  "action": {
    "default_popup": "popup.html"
  }
}

2. 核心截图代码 #

以下是完整的异步截图函数，包含调试会话的附加、命令发送、结果处理及会话清理：

// 根据tab ID捕获非活跃标签页截图
async function captureInactiveTab(tabId) {
  try {
    // 附加到目标标签页的调试会话，指定协议版本为1.3
    await chrome.debugger.attach({ tabId }, "1.3");
    
    // 启用DevTools的Page域，确保截图命令可被接收
    await chrome.debugger.sendCommand({ tabId }, "Page.enable");
    
    // 发送截图命令，可根据需求调整参数
    const screenshotResult = await chrome.debugger.sendCommand(
      { tabId },
      "Page.captureScreenshot",
      {
        format: "png",
        quality: 100,
        captureBeyondViewport: true
      }
    );
    
    // 将base64编码的截图数据转换为Blob对象
    const base64Data = screenshotResult.data;
    const blob = await fetch(`data:image/png;base64,${base64Data}`).then(res => res.blob());
    
    // 完成操作后分离调试会话，释放资源
    await chrome.debugger.detach({ tabId });
    
    return blob;
  } catch (error) {
    console.error("截图失败:", error);
    // 异常情况下确保调试会话被正确分离
    if (chrome.debugger.isAttached({ tabId })) {
      await chrome.debugger.detach({ tabId });
    }
    throw error;
  }
}

// 使用示例：传入目标tab ID调用截图函数
captureInactiveTab(123)
  .then(blob => {
    // 将Blob转换为可访问的URL并显示
    const imgUrl = URL.createObjectURL(blob);
    const imgElement = document.createElement("img");
    imgElement.src = imgUrl;
    document.body.appendChild(imgElement);
  })
  .catch(err => console.error("处理截图时出错:", err));

注意事项 #

• 一个标签页同一时间只能被一个扩展的调试会话附加，若已有其他扩展在调试该标签页，当前操作会失败。
• 附加调试会话时，标签页右上角会短暂显示调试标记，但不会影响标签页的正常使用。
• 对于Manifest V2，权限配置逻辑类似，只需将manifest_version改为2即可。

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