如何通过附加调试器来捕获带有chrome扩展名的全屏屏幕截图？

Question

Chrome devtools前端是开放源代码，可使用其捕获整页屏幕截图的逻辑here。

他们使用远程chrome调试器API拍摄整个屏幕截图。我已经在Chrome扩展程序中重新实现了他们的逻辑。这是有关代码的摘录：

const captureFullPageScreenshot = async (tabId) => {
  const [ sendCommand, detachDebugger ] = await getDebugger(tabId)

  // Do not show viewport size
  await sendCommand('Overlay.setShowViewportSizeOnResize', { show: false })

  // Get the page dimensions
  const layout = await sendCommand('Page.getLayoutMetrics')

  // Destructure metrics from layout
  const {
    contentSize: {
      width: contentWidth,
      height: contentHeight
    }
  } = layout

  // Define the scale factor
  // TBD
  const deviceScaleFactor = window.devicePixelRatio

  // Define maximum safe content height
  const safeContentHeight = Math.min((1 << 14) / deviceScaleFactor, contentHeight)

  console.log(`retrieved deviceScaleFactor %o safeContentHeight %o and layout %o`, deviceScaleFactor, safeContentHeight, layout)

  // Define metrics of the device on which screenshot is captured
  const deviceMetrics = {
    width: Math.floor(contentWidth),
    height: Math.floor(safeContentHeight),
    deviceScaleFactor,
    mobile: false,
  }

  // Define the area of the screenshot
  const clip = {
    x: 0,
    y: 0,
    width: deviceMetrics.width,
    height: deviceMetrics.height,
    scale: 1
  }

  // Reset page scale factor
  await sendCommand('Emulation.resetPageScaleFactor')

  // Pretend to be a different device with ideal dimensions
  // TBD
  await sendCommand('Emulation.setDeviceMetricsOverride', deviceMetrics)

  // Take a screenshot
  await sendCommand('DOM.enable')
  await sendCommand('Overlay.disable')
  const screenshot = await sendCommand('Page.captureScreenshot', {
    format: 'png',
    quality: 100,
    clip,
    fromSurface: true
  })
  await sendCommand('Overlay.enable')

  // Cleanup
  await detachDebugger()

  // Display
  const image = new Image()
  image.src = 'data:image/png;base64,' + screenshot.data;
  var w = window.open('');
  w.document.write(image.outerHTML)
}

const getDebugger = (tabId) => new Promise((dResolve, dReject) => {
    chrome.debugger.attach({ tabId }, '1.3', () => {
      if (chrome.runtime.lastError) {
        dReject(new Error(chrome.runtime.lastError.message))
      }
      else {
        const sendCommand = (command, args) => new Promise((cResolve, cReject) => {
          const cArgs = args ? args : {}
  
          chrome.debugger.sendCommand({ tabId }, command, cArgs, (result) => {
            if (chrome.runtime.lastError) {
              cReject(new Error(chrome.runtime.lastError.message))
            }
            else {
              cResolve(result)
            }
          })
        })
  
        const detachDebugger = () => new Promise((detResolve, detReject) => {
          chrome.debugger.detach({ tabId }, () => {
            if (chrome.runtime.lastError) {
              detReject(new Error(chrome.runtime.lastError.message))
            }
            else {
              detResolve()
            }
          })
        })
  
        dResolve([sendCommand, detachDebugger])
      }
    })
  })

由于某种原因，屏幕截图与原始chrome开发人员工具屏幕截图不同。

例如对于此网站：https://tweakers.net/

Chrome开发者工具的输出是：