Chrome 扩展连接 Chrome 调试器并截取完整屏幕截图答案

【问题标题】：Chrome Extension connect Chrome Debugger and take full screenshotChrome 扩展连接 Chrome 调试器并截取完整屏幕截图
【发布时间】：2020-10-13 21:14:23
【问题描述】：

我想使用 chrome 插件在活动标签中截取完整尺寸的屏幕截图。

我知道有一个函数叫chrome.tabs.captureVisibleTab()，但这无助于获取整页截图。

我知道我们可以从 chrome 获得整页截图（devtools > ctrl+shift+p > Capture full size screenshot）。我想使用此功能或其他功能截屏。

使用我在下面给出的代码，我可以在 linux 机器上为我的目的截取整页屏幕截图。但是当我在 windows 机器上运行插件时，我得到一个像这样的图像：

这是我的代码。从底部开始阅读可能更有帮助：

chrome.tabs.onUpdated.addListener(attachToDebugger);

function clearDeviceMetricsOverride(tabId, base_64_data) {
  chrome.debugger.sendCommand(
    {
      tabId: tabId,
    },
    "Emulation.clearDeviceMetricsOverride",
    function () {
      postData(base_64_data, tabId);
    }
  );
}


function captureScreenshot(tabId) {
  console.log(`{page}: captureScreenshot: status=aboutTo, tabId=${tabId}`);

  chrome.debugger.sendCommand(
    { tabId: tabId },
    "Page.captureScreenshot",
    {
      format: "jpeg",
      quality: 60,
      fromSurface: false,
    },
    (response) => {
      if (chrome.runtime.lastError) {
        console.log(`{back}: captureScreenshot: status=failed, tabId=${tabId}`);
      } else {
        var dataType = typeof response.data;
        console.log(
          `{back}: captureScreenshot: status=success, tabId=${tabId}, dataType=${dataType}`
        );
        let base_64_data = "data:image/jpg;base64," + response.data;
        setTimeout(() => {
          clearDeviceMetricsOverride(tabId, base_64_data);
        }, 500);
      }
    }
  );

  console.log(`{page}: captureScreenshot: status=commandSent, tabId=${tabId}`);
}

//---------------------------------------------------------------------------
function setDeviceMetricsOverride(tabId, height, width) {
  chrome.debugger.sendCommand(
    {
      tabId: tabId,
    },
    "Emulation.setDeviceMetricsOverride",
    { height: height, width: width, deviceScaleFactor: 1, mobile: false },
    function () {
      setTimeout(() => {
        captureScreenshot(tabId);
      }, 500);
    }
  );
}

//---------------------------------------------------------------------------

function getLayoutMetrics(tabId) {
  chrome.debugger.sendCommand(
    {
      tabId: tabId,
    },
    "Page.getLayoutMetrics",
    {},
    function (object) {
      console.log("---- get layout w: " + object.contentSize.width);
      console.log("---- get layout h: " + object.contentSize.height);
      const { height, width } = object.contentSize;
      setDeviceMetricsOverride(tabId, height, width);
    }
  );
}

//---------------------------------------------------------------------------

function setColorlessBackground(tabId) {
  console.log(`{back}: setColorlessBackground: status=aboutTo, tabId=${tabId}`);

  chrome.debugger.sendCommand(
    { tabId: tabId },
    "Emulation.setDefaultBackgroundColorOverride",
    { color: { r: 0, g: 0, b: 0, a: 0 } },
    function () {
      console.log(
        `{back}: setColorlessBackground: status=enabled, tabId=${tabId}`
      );
      getLayoutMetrics(tabId);
    }
  );

  console.log(
    `{back}: setColorlessBackground: status=commandSent, tabId=${tabId}`
  );
}

//---------------------------------------------------------------------------

function enableDTPage(tabId) {
  console.log(`{back}: enableDTPage: status=aboutTo, tabId=${tabId}`);

  chrome.debugger.sendCommand({ tabId: tabId }, "Page.enable", {}, function () {
    console.log(`{back}: enableDTPage: status=enabled, tabId=${tabId}`);
    setColorlessBackground(tabId);
  });

  console.log(`{back}: enableDTPage: status=commandSent, tabId=${tabId}`);
}

//---------------------------------------------------------------------------

function attachToDebugger(tabId, changeInfo, tab) {
  try {
    if (tab.status == "complete") {
      chrome.debugger.attach({ tabId: tabId }, "1.0", () => {
        if (chrome.runtime.lastError) {
          console.log(
            `{back}: debugger attach failed: error=${chrome.runtime.lastError.message}`
          );
        } else {
          console.log(`{back}: debugger attach success: tabId=${tabId}`);
          enableDTPage(tabId);
        }
      });
    }
  } catch {}
}

【问题讨论】：

由于它在 Linux 中可以正常工作，唯一的解释是它是 Chrome 中的一个错误。
当我在 Puppeteer 中查看代码时，我看到它以与我相同的方式截屏 (github.com/puppeteer/puppeteer/blob/…) 在 windows 机器上使用 puppeteer 截屏很好。所以我不认为这是一个错误。
如果扩展中的相同命令在 Linux 中产生正确的结果，但在 Windows 中却没有，则没有其他解释。
嘿！这方面有成功吗？

标签： javascript google-chrome google-chrome-extension google-chrome-devtools

【解决方案1】：

使用我在下面给出的代码，我可以在 linux 机器上为我的目的截取整页屏幕截图。

不确定 Linux 如何区分表面和视图（如果您的代码有效），但对于 Windows，您必须更改：

"Page.captureScreenshot",
    {
      format: "jpeg",
      quality: 60,
      fromSurface: false,

到这里：

"Page.captureScreenshot",
    {
      format: "jpeg",
      quality: 60,
      fromSurface: true,

您的代码将通过此修复生成整页屏幕截图。我不确定您是否更改了您从中获取此代码的示例中的 fromSurface 属性值，因为在文档中他们说如果设置为 false，此属性将强制 API 在视图中制作屏幕截图，这对于结果被裁剪是有意义的。

【讨论】：