Crafting the perfect container to play with a Headless Chrome

jlandure

Julien LandurΓ©

Posted on May 26, 2020

Crafting the perfect container to play with a Headless Chrome

Since July 30th 2017, I have been contributing to a side project: the idea from the beginning was the ability to use Chrome to make some tests in headless mode and avoid a long queue of CI builds using a tiny Docker image.

πŸ€” Why use a Headless Chrome

In the world of webdev, the ability to run quickly end-to-end tests are important. Popular technologies like Puppeteer enable developers to make fun things like testing, automating forms, crawling, generating screenshots, capturing timeline... And there is a secret: some of these features are directly available on Chrome! πŸ™Œ

For more information on why headless mode is a cool feature, please read a good example on what you can achieve here:

πŸ’‘ Crafting the perfect container

With 28 contributors, I have been working on this project to create the perfect image to run Chromium in Headless mode:

  • πŸ“¦ Tiniest Headless Chrome (393 MB)
  • 🐳 Easy to use, ephemeral and reproducible Headless Chrome with Docker
  • πŸ“ Doc-friendly with examples for printing the DOM, generating an image with a mobile ratio or generating a PDF.
  • πŸ‘·β€β™‚οΈ Autobuild with the Docker Hub to sync the project and ship the images with confidence
  • πŸ“Œ Up-to-date with Chromium 81 (81.0.4044.138) and tags available to test different versions of Chromium
  • πŸ” Secure with the best way to use Chrome and Docker - See "3 ways to securely use Chrome Headless" section
  • 🌐 Ready for internationalisation use: support for asian characters - See "screenshot-asia.js" file
  • πŸ’„ Ready for design use: support for WebGL - See "How to use with WebGL" section
  • πŸ“„ Open Source with an Apache2 licence
  • πŸ‘₯ Community-built with 28 contributors - See "✨ Contributors" section
  • πŸ’š Dev-friendly with examples using NodeJS, Puppeteer, docker-compose and also a test with a X11 display - See "Run examples" section

πŸ’š Open Source & Fun

Some open source & fun projects have been set up and used for this open source side project. I want to share it with you: it adds value and confidence to maintain a GitHub repository. πŸ‘Œ

πŸš€ Reaching a point

Here is the most interesting insight for a tool: to be used and useful! In almost two weeks, this image will be pulled on the Docker Hub...

πŸŽ‰ a million times! πŸŽ‰

there is currently ~922k downloads and it grows ~6k by day
On GitHub, the repository gets ~3000 views, ~1000 unique visitors every two weeks and ~464 stars.

After 3 years maintaining it, I cannot thank everyone using this container. This is the first time a side project has become so popular.

πŸ—“ The Future

✨ Here is some features in the roadmap:

  • with-playwright version with Playwright to reuse the installed headless Chromium (PR in draft)
  • with-deno version with Deno to create a useful and fun things to do with deno
  • with-lighthouse version with Lighthouse to be able to monitor your website performance in CI builds
  • Create a dedicated homepage and documentation website: the README.md begins to be complicated to navigate and update
  • Create a gallery with the name of the project or product using this container

πŸ“£ Please test this container or play with it!
πŸ’» If you are interested to help me maintain this image, we are welcome! There is some "Good first issue" labelled issue on the repository.

Disclaimer: these terms in this post are synonyms: "Chrome" vs "Chromium" and "image" vs "container".

πŸ’– πŸ’ͺ πŸ™… 🚩
jlandure
Julien LandurΓ©

Posted on May 26, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related