Skip to content
WebScreenshot with Google Apps script and API FLASH
TypeScript JavaScript Shell
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows
docs/images
scripts
src
tests/unit
.clasp.json
.editorconfig
.gitignore
CONTRIBUTING.md
LICENSE
README.md
package-lock.json
package.json
renovate.json
tsconfig.json
tslint.json
webpack.config.js

README.md

web-screenshot-to-slack-gas

Img

license standard-readme compliant PRs Welcome Actions Status

WebScreenshot with Google Apps script and API FLASH

This app is take screenshots of Web pages with GAS(Google Apps Script) and send images to Slack channel with Slack API.

Table of Contents

Background

I should get a screen capture of my website and paste it into Slack channels.

Because I wanted to do it easily, instead of setting up a dedicated server, I make it as FaaS using Google Apps Script (GAS).

And also, I want to use TypeScript because of a Test and Type lint, so using with clasp referenced by howdy39/gas-clasp-starter

Article

(Japanese)Google Apps Script(GAS)とAPI FLASHとSlackAPIをClaspとJestとGitHub Actionで調理して定期的にWebページのスクリーンショットを撮る

Install

Precondition

Create API FLASH Website Screenshot API AccessKey

This tool needs to API FLASH Access key because of taking of a Web page screenshot.

Visit https://apiflash.com and signup your account.

When create your account, visit Documentation page, check your access key, and note this!

Img

Create Slack API

Visit https://api.slack.com/apps?new_app=1 and Create New app

Img

Next, you add BOT features because need to Bot TOKEN

Img

And also, change Basic Information with API, install this app to your workspace.

Img

Additionally, Change your Slack bot Name.

Img

Finally, you can check your app's BOT users OAuth Access TOKEN, note this!!

Img

Create GAS Project

First you create a empty GAS project from Google Drive.

Img

When you create a GAS project, enter name and note script ID include the URL. (Red Underline)

Img

Next, enter your script ID to .clasp.json

{
  "scriptId": "FIXME: This value is your script ID",
  "rootDir": "dist"
}

Set environment variables with Script Properties

Set your API FLASH TOKEN, Slack API TOKEN, and some variables with Script Properties

Img

Img

Set variables below.

SLACK_TOKEN="Your Slack TOKEN Required"
API_FLASH_ACCESS_KEY="Your API FLASH Access Key Required"
WEB_PAGE_URL="Your Web pages URL, default value is Author's Blog"
SLACK_TITLE="Slack Message title, default value is Test"
WEB_PAGE_WIDTH="Screenshot Page Width, default is 1920"
WEB_PAGE_HEIGHT="Screenshot Page Height, default is 1080"
WEB_PAGE_CAPTURE_DELAY="This value is delay time between access your page and take a screenshot, default is 10 sec"
SLACK_CHANNEL="Slack channel which Send a screenshot, default is #general"

Install dependencies

Use npm, install dependencies.

npm install

Usage

Build App

Execute the command below, build script file using with webpack and create script files under dist directory.

npm run build

Push App

Before push app, you need to change GA user setting which enable API.

https://script.google.com/home/usersettings

Push App.

clasp login  # only first access
clasp push

Demos

Run main function , send Slack your web page screenshot.

Img

Test

If you modify this codes, run unit test with jest.

npm test

Also, this repo is integrated with GitHub Action.

So, Run CI test, if you write test.

GitHub Action

This repo use GitHub Action, Run tests, Build scripts and push scripts to GAS triggered by push to master branch.

If you want to upload script with GitHub Action, you will set your .clasprc.json on GitHub Action SECRET.

How to setup your clasprc.json

Before set your clasprc.json, run clasp login with your local PC.

clasp login

And you open ~/.clasprc.json with editor.

# If you use VSCode
code ~/.clasprc.json

Img

Copy it and paste another window, and replace " character to \" because of reading to one-line string on bash command.

Img

Copy it and paste your GitHub Action Secret (https://github.com/{your_name}/{your_repo}/settings/secrets)

Sectet name is CLASPRC_JSON and paste your clasprc.json.

Image

Congratulation! You can deploy to GitHub Action!

Contributing

See the contributing file!

PRs accepted.

Small note: If editing the Readme, please conform to the standard-readme specification.

License

MIT © tubone.

You can’t perform that action at this time.