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:
- User-Initiated Toggle: A slider in the popup initiates the JavaScript state change.
- Background Update: The background script updates Chrome’s content settings using the contentSettings API.
- Persistent Configuration: JavaScript preference is saved across sessions via the chrome.storage API.
- Visual Feedback: The extension icon dynamically reflects JavaScript status.
- 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:
- Full Page Canvas Generation: Computes complete scroll dimensions and dynamically sizes a capture canvas.
- Fixed Element Suppression: Hides sticky or fixed-position elements during capture to prevent duplication.
- Pre-Capture Validation: Ensures images, fonts, and dynamic assets are fully loaded.
- Segmented Capture with Stitching: Scrolls the page, captures each viewport, and stitches segments with overlap for flawless alignment.
- 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:
- Automatically capture a “before” screenshot with JavaScript enabled.
- Toggle JavaScript off and reload the page.
- Compare rendering side-by-side to detect discrepancies.
- 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.
| Action | Purpose | Source ➝ Target |
|---|---|---|
| setJsState | Update JS setting without reload | Popup ➝ Background |
| setJsStateAndReload | Toggle JS and reload active tab | Popup ➝ Background |
| captureFullPage | Capture full screenshot (no size check) | Popup ➝ Background |
| captureFullPageWithChecks | Capture screenshot with storage validation | Popup ➝ Background |
| clearScreenshot | Delete current screenshot | Popup ➝ Background |
| updateProgress | Send capture progress to UI | Background ➝ Popup |