Hide Cookie Banners Before Chrome Headless Screenshots

This guide shows you how to suppress cookie consent banners and similar pop-ups when taking screenshots with Chrome’s headless mode. By injecting a small script that hides or removes these elements before the page renders, you get clean, uncluttered screenshots without manual intervention. You’ll need a basic familiarity with the command line and Chrome’s headless flags.

What You’ll Need

• Google Chrome or Chromium installed (version 60+ for headless mode, though newer versions are recommended)
• Access to a terminal or command prompt
• A URL of the page you want to screenshot
• Optional: a text editor to create a JavaScript file for more complex hiding rules

Step-by-Step

1. Identify the cookie banner selector. Open the page in regular Chrome, right-click the cookie banner, and select “Inspect”. In the Elements panel, find a unique CSS selector (e.g., #cookie-banner, .cookie-consent, [data-testid="cookie-popup"]). Note it down; you’ll need it for the next steps.
2. Use the --virtual-time-budget flag to wait for the banner to appear. Cookie banners often load via JavaScript after the initial page load. Add --virtual-time-budget=5000 to your command to simulate 5 seconds of page time, ensuring the banner exists before you hide it. Adjust the number if the banner loads slower.
3. Inject a script to hide the banner with --run-all-compositor-stages-before-draw and --disable-gpu (optional). These flags help ensure the page is fully rendered before the screenshot. The core trick is to use the --headless flag with a script that runs on page load. For a quick one-liner, use the --evaluate-on-new-document flag (available in Chrome 96+) to inject CSS that hides the banner before it renders. Example: --evaluate-on-new-document="document.querySelector('#cookie-banner').style.display='none';". If your Chrome version doesn’t support this flag, skip to step 4.
4. Create a JavaScript file for more robust hiding (if needed). If the banner appears after a delay or uses complex selectors, create a file (e.g., hide-banner.js) with content like:

   // Hide cookie banner after DOM is ready
   function hideBanner() {
     const banner = document.querySelector('#cookie-banner');
     if (banner) banner.style.display = 'none';
   }
   // Run after DOM is parsed
   document.addEventListener('DOMContentLoaded', hideBanner);
   // Also run after a short delay for late-loading banners
   setTimeout(hideBanner, 2000);

5. Use the --run-all-compositor-stages-before-draw flag with the --virtual-time-budget to allow the script to execute. Combine everything in your command: chrome --headless --disable-gpu --screenshot="output.png" --window-size=1280,800 --virtual-time-budget=5000 --run-all-compositor-stages-before-draw --evaluate-on-new-document="document.querySelector('#cookie-banner').style.display='none';" https://example.com. If you created a JS file, use --evaluate-on-new-document="$(cat hide-banner.js)" (on Unix) or the equivalent on Windows.
6. Take the screenshot and verify. Run the command. Open the resulting PNG to confirm the banner is gone. If it’s still there, adjust the selector or the delay in your script.
7. For multiple pages, create a simple script. Instead of typing the long command each time, write a shell script or batch file that loops through a list of URLs and uses the same flags.

Common Mistakes

• Using a wrong selector. The most common issue. Copy the selector exactly from DevTools; a missing dot or hash will break the query.
• Not waiting for the banner to load. If you hide the banner before it exists, the script does nothing. Use --virtual-time-budget to give the page time.
• Forgetting to quote the JavaScript. In most shells, spaces and special characters in the --evaluate-on-new-document value need to be inside double quotes.
• Using an old Chrome version. The --evaluate-on-new-document flag is relatively new. If it fails, update Chrome or use the JS file method with --virtual-time-budget.

Tips

• Test the selector in the console first. In DevTools, type document.querySelector('#cookie-banner') to confirm it returns the element.
• Hide multiple elements. If there are other pop-ups (newsletter sign-ups, etc.), add multiple lines to your JS file to hide them all.
• Use --hide-scrollbars for a cleaner look. This removes scrollbars from the screenshot.
• Set a specific window size. Use --window-size=1920,1080 to get a consistent, high-resolution screenshot.
• Consider using a browser automation tool. If you need to do this regularly, tools like Puppeteer or Playwright give you more control, but the headless flags are a lightweight solution for one-off screenshots.

Troubleshooting

• The banner still appears. Check the selector again. Some banners are inside shadow DOM or iframes; you’ll need a more complex script to reach into those. Also, try increasing the --virtual-time-budget to 10000 or more.
• The screenshot is blank or white. This often happens with --disable-gpu on some systems. Try removing that flag, or add --no-sandbox if you’re on Linux.
• The --evaluate-on-new-document flag is not recognized. Your Chrome is likely outdated. Update to the latest version, or use the JS file approach with --virtual-time-budget instead.
• The script runs but the banner reappears. Some sites re-insert the banner on user interaction or after a timer. Add a MutationObserver in your JS file to continuously remove it, or take the screenshot quickly after the page loads.

Frequently Asked Questions

Can I use this method with Chrome’s new headless mode?

Yes. The new headless mode (using --headless=new) supports the same flags, though you may need to adjust the script timing.

Will this work on any website?

Mostly, but not always. Sites with complex cookie consent frameworks that use iframes or shadow DOM may require more advanced scripting. For those, consider using Puppeteer.

Do I need to install anything extra?

No, just Chrome/Chromium. The flags are built-in.

Can I hide multiple different banners on the same page?

Yes, just add multiple lines to your JavaScript file, each targeting a different selector.

Is there a way to do this without writing any code?

You can use the --evaluate-on-new-document one-liner for simple cases, but for robust results, a small JS file is recommended.

Does this affect the page’s functionality in the screenshot?

No, it only hides the element visually. The page’s underlying code is unchanged.

Related

• How to Choose a Cloud GPU Provider for AI Models
• Fix Data Source References Not Valid in Excel
• iPhone Charging on Hold: What It Means & Fixes