気まぐれDeveloperブログ: HeadlessChrome

2017年7月2日日曜日

HeadlessChrome

↑こちらを参考に進めて見る。

環境構築

Chrome 59以上がインストールされている事

CLIコマンドのエイリアス

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"
alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"
alias chromium="/Applications/Chromium.app/Contents/MacOS/Chromium"

ヘッドレスChromeを使う

簡単なサンプル

DOM出力 --dump-dom

sh

$ chrome --headless --disable-gpu --dump-dom https://www.yahoo.co.jp/

PDF出力 --print-to-pdf

sh

$ chrome --headless --disable-gpu --print-to-pdf https://www.yahoo.co.jp/

スクリーンショット --screenshot

sh

$ chrome --headless --disable-gpu --screenshot https://www.yahoo.co.jp/

DevToolsを使う --remote-debugging-port=9222
sh
```
$ chrome --headless --disable-gpu --remote-debugging-port=9222 https://www.yahoo.co.jp/
```
起動後http://localhost:9222を別ブラウザで見るとDevToolsが使える

プログラムから利用する(Node.js)

Lighthouse の ChromeLauncher を使う

インストール

sh

$ yarn add chrome-launcher --dev

シンプルな実装

js

const chromeLauncher = require('chrome-launcher');

chromeLauncher.launch({
  startingUrl: 'https://google.com',
  chromeFlags: ['--headless', '--disable-gpu']
}).then(chrome => {
  console.log(`Chrome debugging port running on ${chrome.port}`);
});

起動

sh

$ node main.js

chrome-remote-interfaceを使う

chrome-remote-interface
DevToolsと同じような事ができるようにしてくれるAPI

インストール

sh

$ yarn add chrome-remote-interface --dev

キャプチャを撮るサンプル

js

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
const fs = require('fs');

chromeLauncher.launch({
  port: 9222,
  startingUrl: 'https://google.com',
  chromeFlags: ['--headless', '--disable-gpu']
}).then(chrome => {
  console.log(`Chrome debugging port running on ${chrome.port}`);

  CDP(async (client) => {
    const { Page } = client;
    try {
      await Page.enable();
      await Page.navigate({ url: 'https://www.chromestatus.com/features/' });
      await Page.loadEventFired();
      const { data } = await Page.captureScreenshot();
      console.log('Image saved');
      fs.writeFileSync('scrot.png', Buffer.from(data, 'base64'));
    } catch (err) {
      console.error(err);
    }
  }).on('error', (err) => {
    console.error(err);
  });
});