JavaScript Toggle & Screenshot Extension

Powerful Chrome extension for rendering diagnostics, crawlability, and SEO testing. Explore docs, usage, and architecture.

SEO DiagnosticsJavaScript RenderingFull-page Screenshots

Core Features

Toggle JavaScript, capture full-page screenshots, and compare render states—key features for SEO audits with the JavaScript Toggle & Screenshot tool.

1. JavaScript Toggle Functionality

Why It Matters

JavaScript rendering discrepancies can create invisible barriers to indexability. Search engine crawlers often encounter challenges with dynamically-rendered content, and SLONQ addresses this with precision.

What It Does

The JavaScript Toggle feature enables seamless switching between normal browsing and crawler-simulated rendering (JavaScript disabled)—allowing immediate validation of what search engines actually "see."

How It Works

The toggle workflow is streamlined and intuitive:

  1. User-Initiated Toggle: A slider in the popup initiates the JavaScript state change.
  2. Background Update: The background script updates Chrome’s content settings using the contentSettings API.
  3. Persistent Configuration: JavaScript preference is saved across sessions via the chrome.storage API.
  4. Visual Feedback: The extension icon dynamically reflects JavaScript status.
  5. Instant Reload: The active page reloads automatically, ensuring immediate application of changes.

2. Full-Page Screenshot Capture

Why It Matters

Modern websites often rely on asynchronous content, fixed headers, or infinite scroll. Capturing what the crawler and user experience in full—not just the visible viewport—is key for technical SEO audits.

Advanced Technical Execution

The screenshot capture feature delivers pixel-perfect, comprehensive visual documentation of your web page:

  1. Full Page Canvas Generation: Computes complete scroll dimensions and dynamically sizes a capture canvas.
  2. Fixed Element Suppression: Hides sticky or fixed-position elements during capture to prevent duplication.
  3. Pre-Capture Validation: Ensures images, fonts, and dynamic assets are fully loaded.
  4. Segmented Capture with Stitching: Scrolls the page, captures each viewport, and stitches segments with overlap for flawless alignment.
  5. Chrome Storage Handling: Automatically detects and mitigates file size limitations (5MB threshold).

3. Auto-Screenshot on JavaScript Toggle

Why It Matters

Understanding how content shifts when JavaScript is disabled is essential for diagnosing SEO-critical issues such as missing metadata, hidden content, or dynamic rendering failures.

What It Delivers

This integrated feature empowers users to:

  1. Automatically capture a “before” screenshot with JavaScript enabled.
  2. Toggle JavaScript off and reload the page.
  3. Compare rendering side-by-side to detect discrepancies.
  4. Optionally open a zoomable popup for in-depth analysis.

4. User Interface Components

4.1 JavaScript Toggle UI

The toggle interface is crafted for clarity and efficiency:

  • Slider Switch: Quickly switch JavaScript ON or OFF.
  • Status Indicator: Shows current JavaScript state.
  • Dynamic Icon: Changes to reflect crawler-simulated mode.

4.2 Screenshot Panel

Powerful tools in a compact interface:

  • Capture Button: Initiates full-page screenshot.
  • Preview Viewer: Displays captured image with zoom and pan.
  • Clear Screenshot: Resets the current capture.
  • Progress Feedback: Real-time status messages during capture.
  • Error Handling: Alerts for oversized screenshots or load failures.

5. Core Message Handling System

A robust message-passing system ensures seamless communication between UI and background services.

ActionPurposeSource ➝ Target
setJsStateUpdate JS setting without reloadPopup ➝ Background
setJsStateAndReloadToggle JS and reload active tabPopup ➝ Background
captureFullPageCapture full screenshot (no size check)Popup ➝ Background
captureFullPageWithChecksCapture screenshot with storage validationPopup ➝ Background
clearScreenshotDelete current screenshotPopup ➝ Background
updateProgressSend capture progress to UIBackground ➝ Popup

Need help with SEO rendering or SSR migration?

For enterprise audits, platform integration or technical SEO consulting, contact the SLONQ team for a custom solution.