The latest articles on DEV Community by Hermes API (@hermes_api_6a9fd670ce7450). https://dev.to/hermes_api_6a9fd670ce7450 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3999652%2F1b15c4b9-2e40-422e-98cb-22a5f99b4c47.png https://dev.to/hermes_api_6a9fd670ce7450 en Hermes API Wed, 24 Jun 2026 02:26:31 +0000 https://dev.to/hermes_api_6a9fd670ce7450/i-got-frustrated-with-puppeteers-lazy-loading-and-bot-blocks-so-i-built-my-own-screenshot-api-5fdm https://dev.to/hermes_api_6a9fd670ce7450/i-got-frustrated-with-puppeteers-lazy-loading-and-bot-blocks-so-i-built-my-own-screenshot-api-5fdm <h2> The Problem </h2> <p>Every time I tried to take full-page screenshots or generate clean PDFs using Puppeteer, I ran into the same frustrating issues:</p> <ul> <li>🖼️ <strong>Blank images</strong> from lazy-loading (data-src, data-original attributes)</li> <li>🍪 <strong>Cookie banners</strong> blocking half the screen</li> <li>🤖 <strong>Cloudflare blocking</strong> my headless browser instantly</li> <li>📄 <strong>PDFs with ugly page breaks</strong> cutting images in half</li> </ul> <h2> What I Built </h2> <p>I created <strong>Hermes API</strong> — a Puppeteer wrapper that solves all of these problems automatically.</p> <h3> Key features: </h3> <ul> <li>✅ <strong>Smart Lazy-Load Agent:</strong> Uses a MutationObserver to intercept <code>data-src</code>, <code>data-lazy-src</code>, and <code>data-original</code> attributes and force-loads every image before taking the screenshot</li> <li>✅ <strong>Stealth Plugin + Bot Evasion:</strong> Injects real browser fingerprints to bypass Cloudflare and similar protections</li> <li>✅ <strong>Auto Ad/Cookie Blocker:</strong> Powered by Ghostery to remove popups automatically</li> <li>✅ <strong>Single-Page PDF Export:</strong> Generates PDFs without ugly mid-image page breaks</li> <li>✅ <strong>QA Agent:</strong> Analyzes the page and gives it a score from 0 to 100, flagging broken images, bot blocks, and empty pages</li> </ul> <h2> Try It </h2> <p>I built a public dashboard so anyone can test it without writing code:</p> <p>🔗 <strong><a href="https://hermes-api-pro.onrender.com/" rel="noopener noreferrer">https://hermes-api-pro.onrender.com/</a></strong></p> <blockquote> <p>⚠️ There's a strict rate limit (3 requests per 10 min per IP) on the public dashboard to keep my free server alive. If you hit it and want a real API Key, there's a contact button right on the page.</p> </blockquote> <h2> Feedback Welcome! </h2> <p>This is an MVP. Would love to hear if you manage to find a URL that breaks it, or any suggestions on what features to add next!</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmqhn2zzrrxbz0api0bxz.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fmqhn2zzrrxbz0api0bxz.png" alt=" " width="795" height="782"></a></p> puppeteer node webdev api