如何通过PageSpeedApi与Google Apps Script获取网站全页截图？

架构老林

2026-7-31

问题分析

你当前使用的PageSpeed API返回的final-screenshot是Lighthouse性能检测时生成的视口局部截图（默认对应移动端360x640的视口尺寸），这是该API的设计特性——它的截图仅用于展示性能测试时的页面初始状态，无法直接获取完整页面截图。

解决方案：用Chrome DevTools Protocol生成整页截图

在Google Apps Script中，可以通过启用Chrome Advanced Service，调用无头Chrome来生成完整页面截图，具体步骤和代码如下：

步骤1：启用Chrome Advanced Service

在Apps Script编辑器中：

点击左侧菜单栏的「服务」>「添加服务」
在弹出的列表中找到「Chrome」，点击「添加」完成授权

步骤2：替换为整页截图脚本

function getFullPageScreenshot() {
  const targetUrl = "http://www.amafruits.com";
  const screenshotName = "amafruits_fullpage.jpg";

  // 启动无头Chrome，配置视口和整页截图参数
  const chrome = Chrome.getV8();
  const tab = chrome.newTab();
  tab.navigate(targetUrl);
  tab.waitForLoadEvent();

  // 捕获整页截图
  const screenshot = tab.captureScreenshot({
    format: "jpeg",
    quality: 80,
    captureBeyondViewport: true, // 关键参数：捕获视口外内容
    fromSurface: true
  });

  // 将截图保存到Google Drive
  const blob = Utilities.newBlob(
    Utilities.base64Decode(screenshot.data),
    "image/jpeg",
    screenshotName
  );
  const fileId = DriveApp.createFile(blob).getId();
  console.log("完整截图已保存，文件ID：" + fileId);

  // 关闭标签页
  tab.close();
}