No More Cookie Banners: Implementing Pre-Capture CSS Injections for Clean Layouts

When presenting UI mockups or creating archival recordings of web pages, design cleanliness is paramount. Yet, the modern browsing experience is a visual battlefield. A typical landing page greets visitors with a cookie consent dialog, a GDPR notification bar, a promotional discount banner, and a floating live chat bubble in the lower-right corner.

If you take automated screenshots of these pages, the overlays will block the layouts behind them. To resolve this, OmniCapt includes a unique Pre-Capture CSS Injection engine. This tool sweeps unwanted overlay layers out of the frame immediately before capturing a screenshot, restoring the page to its original interactive state immediately after.

Part of the engineering behind OmniCapt.

Why CSS Injections Override DOM Deletions

When trying to hide cookie banners, a naive approach is to find matching elements and remove them from the document using element.remove(). However, deleting DOM elements during page renders is dangerous. Many modern Single Page Applications (built on React, Vue, or Angular) maintain a virtual representation of the DOM. If a background script mutates the document structure directly, the framework's reconciliation engine can throw fatal script errors, breaking page interactivity.

Instead of editing the DOM structure, OmniCapt injects a temporary CSS stylesheet rule mapping target selectors to display: none !important;. Because CSS changes the render tree without altering the document structure, the host application's Javascript lifecycle is preserved.

The Pre-Capture lifecycle

To execute rules cleanly, OmniCapt operates a three-stage capture lifecycle managed by our content script orchestrator:

1. Analyze and Apply: Read the ruleset from chrome.storage.local. Identify rules matching the current tab domain and inject a temporary <style> node.
2. Snap frame: Signal the background script to execute the screenshot capture.
3. Retract stylesheet: Immediately delete the temporary <style> element, returning the DOM visual render state to normal.

The entire sequence takes less than 100 milliseconds, minimizing any visual flicker for the user.

// Dynamic injection implementation inside content.js
function applyPreCaptureRules(selectors) {
  const styleEl = document.createElement('style');
  styleEl.id = 'omnicapt-injection-mask';
  
  // Combine all selectors to hide into a clean rule block
  const cssRule = `${selectors.join(', ')} { display: none !important; }`;
  styleEl.textContent = cssRule;
  
  document.head.appendChild(styleEl);
}

function removePreCaptureRules() {
  const mask = document.getElementById('omnicapt-injection-mask');
  if (mask) {
    mask.remove();
  }
}

Automated Wildcard Rulesets

To save time, OmniCapt lets users define custom selector blocks mapping to domain patterns in their settings. By default, OmniCapt ships with common selectors for popular cookie consent tools (like OneTrust and Cookiebot) and customer chat widgets (like Intercom and Zendesk):

[
  {
    "domainPattern": "*",
    "selectors": [
      "#onetrust-consent-sdk",
      ".cookie-consent",
      ".intercom-app",
      "#hubspot-messages-iframe-container"
    ]
  }
]

Conclusion: Design Archives Made Easy

By decoupling visual presentation styling from structural HTML manipulation, OmniCapt's Pre-Capture ruleset engine offers clean screenshots of any design layout. Developers and designers can archive clean page flows, completely on-device, without annoying cookie prompts or chat panels blocking the views.