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.

I have to apologize for my poor English skill. I proposed the GAS library for retrieving the size from the image blob. When the image with the small size is expanding to the large size, the quality of the modified image is low.

By the way, when PageSpeed API is used, it seems that the image size is fixed and that cannot be created with the large size. This might be the specification.

When I want to retrieve the screen shot with the large size with Google Apps Script, I used the following script. But this cannot be used for all site. I apologize for this. I think that the reason of this is due to that Javascript might not be able to be used for this method.

var url = "###";
DriveApp.createFile(Charts.newTableChart().setDataTable(Charts.newDataTable().addColumn(Charts.ColumnType.STRING, '').addRow(['<meta http-equiv="refresh" content="0; URL=' + url + '">']).build()).setOption('allowHtml', true).setDimensions(1000, 1000).build().getAs('image/png').setName("test.png"));

Love the code, thanks for sharing.

I'd like to retrieve screenshots from a list or URLs in Sheet1!A:A vs a specific URL, as per your example.

FROM THIS: var siteUrl = "### URL you want to retrieve a screen shot. ###";
TO THIS: var siteUrl = [Sheet1!A:A]

Can you recommend what script would work?

Many thanks:)

Hello Kanshi TANAIKE,
is this still working? I didn't manage to make it work for me.
This is what i'm looking for https://superuser.com/questions/1618597/saving-web-page-periodically
Thanks for your help!

Hello really nice script. Just i am wondering if it is possible to implement to google spread sheet , so we can schedule some screenshot on the sheets to send via email

Is it possible to get a screenshot from a google spreadsheet cell or range?

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);
}`