How to Build a Bulk Screenshot App with Google Sheets

JJ. Ramirez — Sat, 12 Mar 2022 01:31:34 +0000

Have you ever been in a situation where you need to screenshot a long list of websites? Perhaps, the list is so long that doing it manually would take days?

If that sounds familiar, this post is for you. In this tutorial, we will go through the process of building a bulk screenshot app on top of Google Sheets and the GetScreenshot API.

After you finish this tutorial you will have a powerful little app to take screenshots at scale.

Requirements

A Google Sheets Spreadsheet
A screenshot API token from GetScreenshot (5 USD/month for 2500 screenshot but the first month is free)
Some small JS knowledge would be helpful but not necessary.

The Tutorial

1) Creating a spreadsheet in Google Sheets and opening the scripting environment (Google App Script)

The first step of this tutorial is to create a spreadsheet and configure the script that will be the core function of our bulk screenshot application.

After you have created a Google Sheet you will need to open the Google App Script Editor. To do this go to the top bar of Google Sheets and click on Tools and then in Script Editor

2) Add the bulk screenshot code to Google App Script

Once you have your Google App Script editor open you will see an empty function like the one shown below:

Go ahead and delete the initial starter code and add our own custom code which will allow us to create a function to invoke the screenshot API.

The code that you want to paste into the editor is the following one:

// You need to replace the API_KEY value with an actual API Key from GetScreenshot.
// You can sign-up for an account at https://www.getscreenshotapi.com to get an API Key.

var API_KEY = "Your-API-Key"
function retrieveScreenshot(url) {
 var apiEndpoint = `https://api.rasterwise.com/v1/get-screenshot?apikey=${API_KEY}&url=${url}`;
 // Create our json request, w/ text, language, type & encoding
  var nlData = {
   document: {
     type: 'PLAIN_TEXT',
     language: 'en',
   }
  }   ;
 //  Package all of the options and the data together for the call
 var nlOptions = {
   method : 'GET',
 };

 //  And make the call
 var response = UrlFetchApp.fetch(apiEndpoint, nlOptions);
 var jsonified = JSON.parse(response).screenshotImage;
 var stringA = JSON.stringify(jsonified);
 return stringA;
};

The Google App Script Editor should now look like this:

3) Get a screenshot API key from GetScreenshot and add it to your script.

Google Sheets doesn't have a native API or functionality to take screenshots from the cloud. So we will need to rely on a Screenshot API provider for this part of the operation.

In this tutorial, we are using GetScreenshot because it's reliable, accurate, and cheaper than all the other options I've seen out there. But you can use any other screenshot API of your choice. However, you will need to change the parameters to fit whatever API you end up using.

Once you have signed up, you will receive an API key. Go ahead and replace the variable var API_KEY = "Your-API-Key" with whatever API key you receive. After doing it, it should look something like this var API_KEY = "dLDd123dn13KDAsd1n239K34" where the random characters correspond to the API Key you received.

Now simply save the script and close the editor:

4) Test the function invocation from your Google Sheet

What we did with the process above was to instrument our spreadsheet with the function retrieveScreenshot().

Now you can use this function in any cell of the spreadsheet in the same way you can invoke any other standard function by typing = and the name of the function. For example =SUM()

Have in mind that our retrieveScreenshot() function can only receive a valid website URL in order to return back the URL of a screenshot.

To pass the URL of a website you will need to pass it verbatim, for example =retrieveScreenshot('https://google.com') but of course you can also pass the contents of another cell that has a website URL.

This is where our bulk screenshot app comes alive. You can have a list of websites in one column and then do the invocation in the next column. Something like this:

Once you invoke the retrieveScreenshot() function you will see an interim state that reads "Loading...".
This means that the screenshot process is underway and the screenshot URL is about to be returned:

Finally, you can do a corner drop operation to make the same screenshot operation replicated across all the rows in the first column.

BOOM!! Your screenshot bulk machine is up and ready. Now you can use this spreadsheet to generate screenshots at scale.

Caveats and Recommendations

1) You won't see a typeahead or suggestion for the retrieveScreenshot() when you enter it like you do when you type native functions in a cell.
That's alright, the function is there and you should be able to call it normally.

2) Once you’re done with a bulk screenshot operation, you will need to select the results, and then copy and paste the values on the same column. More precisely you need to select the whole column, right-click copy the whole selection, and paste in the same position as Values Only.

If you skip doing this the next time you open the Google Sheet, it will attempt to do the whole bulk screenshot operation again (for all the URLs). This will likely consume your GetScreenshot quota unnecessarily so that's why I recommend pasting the results as values.

That's it. You're done. Enjoy your bulk screenshot app 😃

DEV Community: JJ. Ramirez