Блог

Главная - Вопросы по программированию - Расширение Chrome подключите отладчик Chrome и сделайте полный снимок экрана

Расширение Chrome подключите отладчик Chrome и сделайте полный снимок экрана

#javascript #google-chrome #google-chrome-extension #google-chrome-devtools

#javascript #google-chrome #google-chrome-расширение #google-chrome-devtools

Вопрос:

Я хочу сделать полноразмерный снимок экрана на активной вкладке с помощью плагина Chrome.

Я знаю, что есть функция с именем chrome.tabs.captureVisibleTab (), но это не помогает получить полный снимок экрана страницы.

Я знаю, что мы можем получить скриншот полной страницы из Chrome (devtools> ctrl shift p> Сделать снимок экрана в натуральную величину). Я хочу сделать снимок экрана, используя эту функцию или другую функцию.

С помощью кода, который я привел ниже, я могу делать полные скриншоты страницы на компьютере с 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 {}
}

Комментарии:

1. Поскольку он корректно работает в Linux, единственное объяснение заключается в том, что это ошибка в Chrome.

2. Когда я просматриваю коды в Puppeteer, я вижу, что он делает снимок экрана так же, как и я ( github.com/puppeteer/puppeteer/blob /… ) Создание скриншотов с помощью puppeteer на компьютере с Windows — это нормально. так что я не думаю, что это ошибка.

3. Других объяснений нет, если одна и та же команда в расширении выдает правильный результат в Linux, но не в Windows.

4. Привет! Есть какие-либо успехи в этом?

Ответ №1:

С помощью кода, который я привел ниже, я могу делать полные скриншоты страницы на компьютере с Linux для своих целей.

Не уверен, как Linux различает surface и view (если ваш код работает), но для Windows вы должны это изменить:

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

Для этого:

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

Ваш код создаст скриншот всей страницы с этим исправлением. Я не уверен, что вы изменили значение fromSurface свойства из примера, из которого вы взяли этот код, поскольку в документах говорится, что это свойство заставит API сделать снимок экрана в представлении, если установлено значение false , что имеет смысл для обрезки результата.