Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Retrieving Screen Shots of Sites using Google Apps Script

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

@choraria
Copy link

This was exactly what I was looking for. Is there any way to save the image's size as per page_rect? Referring to dimensions from this part here -

"page_rect":{
   "left":0,
   "top":0,
   "width":1366,
   "height":768
}

@tanaikech
Copy link
Author

Thank you for your comment. If my understanding of your comment is correct, is this GAS library useful?
https://github.com/tanaikech/ImgApp

@choraria
Copy link

Wouldn't resizing it make the image more pixelated? I was rather hoping to save it in a higher resolution. Any way, will figure this out :)

@tanaikech
Copy link
Author

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"));

@MichaelBatistich
Copy link

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:)

@Fcornetg
Copy link

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!

@comefrombeginning
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment