打造一个完美的容器来玩转无头铬合金

🤔 为什么要使用无头 Chrome 浏览器

💡打造完美容器

💚 开源与乐趣

🚀 达到某个阶段

🗓 未来

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

自 2017 年 7 月 30 日起，我一直在为一个副项目做贡献：从一开始的想法就是能够使用 Chrome 在无头模式下进行一些测试，并使用一个小型 Docker 镜像来避免 CI 构建的长队列。

🤔 为什么要使用无头 Chrome 浏览器

在 Web 开发领域，快速运行端到端测试至关重要。像 Puppeteer 这样的热门技术让开发者能够轻松实现各种有趣的功能，例如测试、表单自动化、网页爬虫、生成屏幕截图、捕获时间线等等……而且还有一个秘密：其中一些功能在 Chrome 浏览器中就能直接使用！🙌

想了解无头模式为何如此实用，请阅读以下示例，了解您可以实现哪些功能：

使用 Node.js 和 Puppeteer 创建 PDF

David Neal ・ 2020年2月6日

＃节点

💡打造完美容器

我们与 28 位贡献者一起致力于这个项目，旨在创建一个完美的镜像，以便在无头模式下运行 Chromium：

• 📦 最小的无头 Chrome 浏览器 ( 393 MB )
• 🐳 易于使用、临时且可复现的无头 Chrome 浏览器（基于 Docker）
• 📝 文档友好，提供打印 DOM、生成移动设备比例图像或生成 PDF 的示例。
• 👷‍♂️ 使用Docker Hub自动构建，同步项目并自信地发布镜像
• 📌 已更新至 Chromium 81 (81.0.4044.138) 版本，并提供标签以测试不同版本的 Chromium
• 🔐 使用 Chrome 和 Docker 的最佳安全方式 -请参阅“安全使用 Chrome 无头模式的 3 种方法”部分
• 🌐 已准备好进行国际化使用：支持亚洲字符 -请参阅“screenshot-asia.js”文件
• 💄 已准备好用于设计：支持 WebGL -请参阅“如何与 WebGL 一起使用”部分
• 📄 采用 Apache2 许可证的开源软件
• 👥 由 28 位贡献者共同构建的社区 -请参阅“✨ 贡献者”部分
• 💚 对开发者友好，提供使用 NodeJS、Puppeteer 和 docker-compose 的示例，以及 X11 显示器的测试 -请参阅“运行示例”部分

💚 开源与乐趣

为了这个开源副项目，我们搭建并使用了一些开源且有趣的子项目。我想和大家分享一下：维护一个 GitHub 代码库确实能带来价值和信心。👌

• 更新内容将遵循GitHub 社区个人资料中推荐的社区标准
• 我用Gitmoji 表情符号来表示我过去贡献的代码的提交信息😊
• 所有贡献者感谢所有为该项目做出贡献的人
• 灵感来自我朋友Franck Abgrall制作的readme-md-generator 。
• 我从这份关于“如何推广你的开源项目？”的速查表中获得了灵感。
• 更新依赖项
• dev.to 上有很多文章介绍了 Web 开发人员如何使用 Chrome 和 Puppeteer。

🚀 达到某个阶段

对于一个工具来说，最有趣的一点是：它应该被使用，并且实用！大约两周后，这个镜像将被拉取到Docker Hub上……

🎉一万次！🎉

目前下载量约为 92.2 万次，每天增长约 6000 次。
在GitHub上，该存储库每两周获得约 3000 次浏览量、约 1000 名独立访客和约 464 个星标。

经过三年的维护，我衷心感谢所有使用这个容器的人。这是我的第一个副业项目如此受欢迎。

🗓 未来

✨ 以下是路线图中的一些功能：

• with-playwright使用Playwright的版本可以重用已安装的无头 Chromium（PR 草稿中）
• with-deno使用Deno版本来创建实用且有趣的 Deno 功能
• with-lighthouse使用Lighthouse版本，以便在 CI 构建中监控网站性能。
• 创建专门的主页和文档网站：README.md文件内容开始变得难以浏览和更新。
• 使用此容器创建以项目或产品名称命名的图库。

📣 请测试或体验一下这个容器！
💻 如果您有兴趣帮助我维护这个镜像，我们非常欢迎！仓库中有一些标记为“适合新手”的问题。

免责声明：本文中的这些术语是同义词：“Chrome”与“Chromium”以及“图像”与“容器”。