Supported tags and respective `Dockerfile` links

latest, 81 (Dockerfile)
with-webgl (Dockerfile)
with-node, 81-with-node, 81-with-node-12 (Dockerfile)
with-puppeteer, 81-with-puppeteer (Dockerfile)
80, 77, 76, 73, 72, 71, 68, 64
80-with-node, 77-with-node, 76-with-node
80-with-puppeteer, 77-with-puppeteer, 76-with-puppeteer

alpine-chrome

Chrome running in headless mode in a tiny Alpine image

Why this image

We often need a headless chrome. We created this image to get a fully headless chrome image. Be careful to the "--no-sandbox" flag from Chrome

3 ways to use Chrome Headless with this image

❌ With nothing

Launching the container using only docker container run -it kohlmannj/drone-alpine-chrome ... will fail with some logs similar to #33.

Please use the 3 others ways to use Chrome Headless.

✅ With `--no-sandbox`

Launch the container using:

docker container run -it --rm kohlmannj/drone-alpine-chrome and use the --no-sandbox flag for all your commands.

Be careful to know the website you're calling.

Explanation for the no-sandbox flag in a quick introduction here and for More in depth design document here

✅ With `SYS_ADMIN` capability

Launch the container using: docker container run -it --rm --cap-add=SYS_ADMIN kohlmannj/drone-alpine-chrome

This allows to run Chrome with sandboxing but needs unnecessary privileges from a Docker point of view.

✅ The best: With `seccomp`

Thanks to ever-awesome Jessie Frazelle seccomp profile for Chrome.

chrome.json

Also available here wget https://raw.githubusercontent.com/jfrazelle/dotfiles/master/etc/docker/seccomp/chrome.json

Launch the container using: docker container run -it --rm --security-opt seccomp=$(pwd)/chrome.json kohlmannj/drone-alpine-chrome

How to use in command line

Default entrypoint

The default entrypoint does the following command: chromium-browser --headless --disable-gpu --disable-software-rasterizer --disable-dev-shm-usage

You can get full control by overriding the entrypoint using: docker container run -it --rm --entrypoint "" kohlmannj/drone-alpine-chrome chromium-browser ...

Use the devtools

Command (with no-sandbox): docker container run -d -p 9222:9222 kohlmannj/drone-alpine-chrome --no-sandbox --remote-debugging-address=0.0.0.0 --remote-debugging-port=9222 https://www.chromestatus.com/

Open your browser to: http://localhost:9222 and then click on the tab you want to inspect. Replace the beginning https://chrome-devtools-frontend.appspot.com/serve_file/@.../inspector.html?ws=localhost:9222/[END] by chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/[END]

Print the DOM

Command (with no-sandbox): docker container run -it --rm kohlmannj/drone-alpine-chrome --no-sandbox --dump-dom https://www.chromestatus.com/

Print a PDF

Command (with no-sandbox): docker container run -it --rm -v $(pwd):/usr/src/app kohlmannj/drone-alpine-chrome --no-sandbox --print-to-pdf --hide-scrollbars https://www.chromestatus.com/

Take a screenshot

Command (with no-sandbox): docker container run -it --rm -v $(pwd):/usr/src/app kohlmannj/drone-alpine-chrome --no-sandbox --screenshot --hide-scrollbars https://www.chromestatus.com/

Size of a standard letterhead.

Command (with no-sandbox): docker container run -it --rm -v $(pwd):/usr/src/app kohlmannj/drone-alpine-chrome --no-sandbox --screenshot --hide-scrollbars --window-size=1280,1696 https://www.chromestatus.com/

Nexus 5x

Screenshot owned by current user (by default the file is owned by the container user)

Command (with no-sandbox): docker container run -u `id -u $USER` -it --rm -v $(pwd):/usr/src/app kohlmannj/drone-alpine-chrome --no-sandbox --screenshot --hide-scrollbars --window-size=412,732 https://www.chromestatus.com/

How to use with Puppeteer

With tool like "Puppeteer", we can add a lot things with our Chrome Headless.

With some code in NodeJS, we can improve and make some tests.

See the "with-puppeteer" folder for more details.

If you have a NodeJS/Puppeteer script in your src folder named pdf.js, you can launch it using the following command:

docker container run -it --rm -v $(pwd)/src:/usr/src/app/src --cap-add=SYS_ADMIN kohlmannj/drone-alpine-chrome:with-puppeteer node src/pdf.js

With the "wqy-zenhei" library, you could also manipulate asian pages like in "screenshot-asia.js"

docker container run -it --rm -v $(pwd)/src:/usr/src/app/src --cap-add=SYS_ADMIN kohlmannj/drone-alpine-chrome:with-puppeteer node src/screenshot-asia.js

These websites are tested with the following supported languages:

Chinese (with https://m.baidu.com)
Japanese (with https://www.yahoo.co.jp/)
Korean (with https://www.naver.com/)

How to use with WebGL

Links:

docker container run -it --rm --cap-add=SYS_ADMIN -v $(pwd):/usr/src/app kohlmannj/drone-alpine-chrome:with-webgl --screenshot --hide-scrollbars https://webglfundamentals.org/webgl/webgl-fundamentals.html

docker container run -it --rm --cap-add=SYS_ADMIN -v $(pwd):/usr/src/app kohlmannj/drone-alpine-chrome:with-webgl --screenshot --hide-scrollbars https://browserleaks.com/webgl

References

Headless Chrome website: https://developers.google.com/web/updates/2017/04/headless-chrome
List of all options of the "Chromium" command line: https://peter.sh/experiments/chromium-command-line-switches/
Where to file issues: https://github.com/kohlmannj/drone-alpine-chrome/issues
Maintained by: @kohlmannj

Versions (in latest)

Alpine version

docker run -it --rm --entrypoint "" kohlmannj/drone-alpine-chrome cat /etc/alpine-release
3.11.6

Chrome version

docker run -it --rm --entrypoint "" kohlmannj/drone-alpine-chrome chromium-browser --version
Chromium 81.0.4044.113

Image disk size

docker image inspect kohlmannj/drone-alpine-chrome --format='{{.Size}}'
368279892

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_{Yonggang Luo} 💻 🤔 💬	_{Dennis Koch} 💻 🤔 💬	_{Sargon Piraev} 💻	_{Eric Briand} 💻	_栩风 💻 🤔	_{Roman Pushkin} 💻	_{Juan Lladó} 💻
_{Chris Watson} 🐛	_{Wang Guan} 🐛	_{Óscar Soto Sánchez} 🐛	_{Calinoiu Alexandru Nicolae} 🐛	_{Mark Macdonald} 🐛	_{Felix Mann} 🐛	_horacimacias 🐛
_{Emil Kjer} 🐛	_{Jeff Gonzalez} 🐛	_{George Gaál} 🐛	_{wheestermans31} 🐛	_{Hodossy, Szabolcs} 🐛	_{Corentin Ardeois} 🐛	_{Danny Althoff} 💬
_{Chad Wilson} 💬 🤔	_fenchu 🐛	_nrawat151290 🐛	_{Julien Landuré} 💻 👀 ⚠️ 🤔 💬 🚧	_x0rzkov 🐛 🤔	_{Jakob Ketterl} 🐛