How to Inject Custom JavaScript and Hide Elements Before Capturing Screenshots

How to Inject Custom JavaScript and Hide Elements Before Capturing Screenshots

author

Snapshot Site Team

04 May 2025 - 01 Min read

In web automation and visual testing, control over the page content is critical before capturing screenshots.

By injecting JavaScript or hiding specific elements, you can customize the appearance of a webpage to:

  • Remove ads, popups, or cookie banners
  • Change styles (e.g., highlight important sections)
  • Ensure a clean and professional screenshot result

Why Inject JavaScript Before a Screenshot?

  • Highlight Key Areas: Modify styles dynamically before capture.
  • Clean Visuals: Hide unwanted elements like notifications and modals.
  • Dynamic Testing: Adjust layouts for different conditions or devices.
  • Increase Automation Accuracy: Capture exactly what matters without distractions.

Example: Modify Wikipedia Before Taking a Screenshot

Here's an example using Java and AsyncHttpClient to call the Snapshot Site API, inject JavaScript, and hide elements:

import org.asynchttpclient.*;

public class ScreenshotExample {
    public static void main(String[] args) throws Exception {
        AsyncHttpClient client = new DefaultAsyncHttpClient();

        client.prepare("POST", "https://screenshot-snapshot-site2.p.rapidapi.com/api/v2/screenshot")
            .setHeader("x-rapidapi-key", "YOUR_API_KEY")
            .setHeader("x-rapidapi-host", "screenshot-snapshot-site2.p.rapidapi.com")
            .setHeader("Content-Type", "application/json")
            .setHeader("Accept", "application/json")
            .setBody("""
            {
              "url": "https://wikipedia.org",
              "format": "png",
              "width": 1280,
              "height": 720,
              "delay": 0,
              "fullSize": false,
              "hideCookie": false,
              "javascriptCode": "document.body.style.color = '#fd7e14'; var elements = document.querySelectorAll('a'); [].slice.call(elements).forEach(function(elem) { elem.style.color = '#fd7e14'; });",
              "hide": "#js-link-box-en, #js-link-box-fr"
            }
            """)
            .execute()
            .toCompletableFuture()
            .thenAccept(System.out::println)
            .join();

        client.close();
    }
}

Recent Articles

Top 5 Screenshot APIs for Developers in 2025

Top 5 Screenshot APIs for Developers in 2025

Looking for the best screenshot API for your web project? Discover the top 5 screenshot APIs developers trust in 2025 — from automation to SEO and UI testing....

- 02 Mins read

Subscribe to Snapshot Site API

Snapshot Site is a powerful API that allows you to capture full-page, high-resolution screenshots of any website with pixel-perfect accuracy.
Simply send a URL to the API to generate a complete snapshot — not just the visible area — covering entire web pages, scrolling content, landing pages, blogs, news articles, social media posts, videos, and more.
Designed for developers, designers, marketers, and journalists,
Snapshot Site makes it easy to integrate web page capture into your applications, workflows, and automation tools.

Subscribe Now
bg wave