Headless Chrome og Firefox: Fra et script, Lave skrærmbilleder, PDF filer, og meget mere

[lath]

Introduktion

Chromium, Firefox, og Chrome browserne kan køre i en headless tilstand, hvor headless betyder uden en GUI.
Herunder er der eksempler med Chrome browseren:

Om CLI kommandoerne
Da jeg ikke bruger Ubuntu (Jeg bruger openSUSE Tumbleweed), så skal du i alle kommandoer herunder erstatte "chrome" med resultatet af:

Kode: Vælg alt

which google-chrome

Hvis which kommandoen giver et resultat der begynder med / kan man i bash erstatte "chrome" med

Kode: Vælg alt

$(which chrome)

I alle kommandoer herunder kan man udelade --disable-gpu, da den er der for det tilfælde at man bruger Windows.

Eksempler

Gemme DOM træet fra en web side:
DOM træet udskrives til stdout, så du kan lede STDOUT ud i en fil eller til et andet program via en pipe, "|".

Kode: Vælg alt

chrome --headless --disable-gpu --dump-dom https://ubuntudanmark.dk/

Du kan gemme den i filen dom.txt ved at tilføje

Kode: Vælg alt

 > dom.txt

... til kommandoen herover.

Lav en PDF fil af en web side

Kode: Vælg alt

chrome --headless --disable-gpu --print-to-pdf https://ubuntudanmark.dk/

Lave et skærmbillede af en web side

• Bare et skærmbillede
  

  Kode: Vælg alt

  chrome --headless --disable-gpu --screenshot https://ubuntudanmark.dk/

• Med en bestemt opløsning, her HD (1920 x 1080 pixels):
  

  Kode: Vælg alt

  chrome --headless --disable-gpu --screenshot --window-size=1980,1080 https://ubuntudanmark.dk/

• Samsung Galaxy S9 mobiltelefon (360 x 740 pixels) :
  

  Kode: Vælg alt

  chrome --headless --disable-gpu --screenshot --window-size=412,732 https://ubuntudanmark.dk/

Der laves en fil: screenshot.png, der gemmes i den mappe hvorfra du kører din kommando.

Du kan finde flere detaljer om at lave automatiske screenshots her : https://medium.com/@dschnr/using-headless-chrome-as-an-automated-screenshot-tool-4b07dffba79a

REPL mode (read-eval-print loop)
Om REPL :https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop
Når du bruger en terminal interaktivt, så bruger du terminalen i REPL tilstand

Start Chrome browseren i REPL tilstand :

Kode: Vælg alt

chrome --headless --disable-gpu --repl --crash-dumps-dir=./tmp https://ubuntudanmark.dk/

Chrome browseren svarer med for eksempel:

Kode: Vælg alt

[0608/112805.245285:INFO:headless_shell.cc(278)] Type a Javascript expression to evaluate or "quit" to exit.
 >>> 

>>> er en kommando-prompten i Chrome browserens REPL tilstand. I en terminal er kommandoprompten $ for en almindelig bruger, og # for superbrugeren, root.

Lad os skive noget JavaScript

Kode: Vælg alt

location.href

Chrome browseren svarer med:

Kode: Vælg alt

{"result":{"type":"string","value":"https://ubuntudanmark.dk/"}}

Du har sikkert bemærket at svaret er i JSON format.

Med den opdagelse, så ved du nu at du kan kommunikere med Chrome browseren via STDIN og STDOUT med et script eller et andet program
I svaret fra browseren skal du bare klippe teksten efter den sidste } ud før du kan unmarshall (deserialisere) JSON teksten ind i data strukturer via en JSON parser.


Lad os afslutte REPL sessionen med:

Kode: Vælg alt

exit

Remote debugging

Kode: Vælg alt

chrome \
  --headless \                            # Runs Chrome in headless mode.
  --disable-gpu \                         # Temporarily needed if running on Windows.
  --remote-debugging-port=9222 \
https://ubuntudanmark.dk/   # URL to open. Defaults to about:blank.

DevTools protokollen bruges til at kommunikere med browseren: https://chromedevtools.github.io/devtools-protocol/

/Lars