Retrieving Screen Shots of Sites using Google Apps Script

submit.md

Retrieving Screen Shots of Sites using Google Apps Script

This is a sample script for retrieving screen shots of sites using Google Apps Script. In order to retrieve the screen shot, here, I used PageSpeed API.

When you use this, please copy and paste the following script, and set an URL you want to retrieve a screen shot.

var siteUrl = "### URL you want to retrieve a screen shot. ###";
var url =
  "https://www.googleapis.com/pagespeedonline/v4/runPagespeed?screenshot=true&fields=screenshot&url=" +
  encodeURIComponent(siteUrl);
var res = UrlFetchApp.fetch(url).getContentText();
var obj = JSON.parse(res);
var blob = Utilities.newBlob(
  Utilities.base64DecodeWebSafe(obj.screenshot.data),
  "image/png",
  "sample.png"
);
DriveApp.createFile(blob);

Note :

• Retrieved value of screen shot is a base64 data with Web Safe.
• In my environment, when I ran this script as a test, it was not required to enable this API at API console. And also I used no API key. If you want to retrieve values from a lot of URLs, it might be required to enable API and use API key.

Updated at December 9, 2021

Now, version 5 can be used. The script is as follows. In this case, please add the scope as the value of openid. By this, the access token can be used. Although this sample script uses the access token, of course, you can also use the API key instead of the access token.

function myFunction() {
  const siteUrl = "https://tanaikech.github.io/"; // Please set the site URL.

  const url = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(
    siteUrl
  )}&fields=${encodeURIComponent("lighthouseResult")}`;
  const res = UrlFetchApp.fetch(url, {
    muteHttpExceptions: true,
    headers: { authorization: "Bearer " + ScriptApp.getOAuthToken() },
  });
  const obj = JSON.parse(res.getContentText());
  const base64 = obj["lighthouseResult"]["audits"]["final-screenshot"][
    "details"
  ]["data"]
    .split(",")
    .pop();
  const blob = Utilities.newBlob(
    Utilities.base64Decode(base64),
    "image/jpeg",
    "sample1.jpg"
  );
  const id = DriveApp.createFile(blob).getId();
  console.log(id);
}

Reference

• Method: pagespeedapi.runpagespeed

Testing

• On January 30, 2024: I confirmed that the script of "Updated at December 9, 2021" worked.

Although I'm not sure whether I could correctly understand your expected result, is my post useful?

https://tanaikech.github.io/2022/08/10/report-challenging-exporting-selected-cells-on-spreadsheet-as-image-using-google-apps-script-and-javascript/

I am working in Google's App Script and getting this error :
TypeError: Cannot read properties of undefined (reading 'audits')

I suspect there is something I have to do to use the PageSpeed api that I am not doing. I have never used a web api before.

What do I need to do? I appreciate any help anyone can offer.

getting same error: TypeError: Cannot read properties of undefined (reading 'audits')

Code that I have in google script.

`function pageScreenshot() {
  const siteUrl = "https://tanaikech.github.io/"; // Please set the site URL.

  const url = `https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${encodeURIComponent(
    siteUrl
  )}&fields=${encodeURIComponent("lighthouseResult")}`;
  const res = UrlFetchApp.fetch(url, {
    muteHttpExceptions: true,
    headers: { authorization: "Bearer " + ScriptApp.getOAuthToken() },
  });
  const obj = JSON.parse(res.getContentText());
  const base64 = obj["lighthouseResult"]["audits"]["final-screenshot"][
    "details"
  ]["data"]
    .split(",")
    .pop();
  const blob = Utilities.newBlob(
    Utilities.base64Decode(base64),
    "image/jpeg",
    "sample1.jpg"
  );
  const id = DriveApp.createFile(blob).getId();
  console.log(id);
}`