Component Communication
ULearn how real-time messaging, content scripts, and storage enable seamless communication and reliable SEO diagnostics in the extension.
Communication Channels That Empower SEO Diagnostics
The extension leverages three core communication mechanisms to enable high-impact SEO insights:
- Message Passing — Real-time, asynchronous messaging between the popup UI and background service worker.
- Content Script Injection — Targeted manipulation of live web pages for render simulation and DOM analysis.
- Storage-Based Communication — Persistent state sharing through Chrome’s storage API, enabling cross-session coordination.
Each channel is strategically implemented to maximize diagnostic flexibility and support SLONQ's mission of delivering structurally sound, crawlable websites.
Message Passing System
At the heart of the extension lies a robust message-passing framework, built on Chrome’s native messaging API. It orchestrates communication between isolated browser contexts—popup, background, and content environments—with precision and reliability.
Message Format and Intent
Messages follow a strict schema centered around an action keyword. This structure ensures consistency, traceability, and predictability across the system.
| Action | Direction | Purpose | Parameters |
|---|---|---|---|
| captureFullPage | Popup → Background | Capture a full-page screenshot without constraints | tabId (optional) |
| captureFullPageWithChecks | Popup → Background | Capture with size validation safeguards | tabId (optional) |
| setJsState | Popup → Background | Toggle JavaScript execution state | enabled: boolean |
| setJsStateAndReload | Popup → Background | Toggle JavaScript and refresh page context | enabled: boolean, tabId: number |
| clearScreenshot | Popup → Background | Remove stored image for clean re-capture | — |
| updateProgress | Background → Popup | Report capture status in real time | progress: string |
| debugShowPart | Background → Popup | Display partial render segments for debugging | index: number, dataUrl: string |
This clean message contract enables modular development, resilient error handling, and consistent user experience across sessions.
Content Script Integration: Simulating Search Engine Perception
To accurately replicate how crawlers interpret and render a page, the background service strategically injects a suite of content scripts into the active tab. These scripts enable deep page-level manipulations crucial to SLONQ’s render diagnostics.
Key Functional Components
-
Page Dimension Calculation Defines canvas boundaries for accurate screenshot rendering—vital for full visual context.
-
Fixed Element Management Temporarily hides sticky/fixed elements to avoid visual duplication during capture.
-
Smooth Scrolling Engine Enables frame-by-frame scrolling for seamless screenshot stitching—reflecting full-page visibility.
-
Resource Load Monitoring Waits for fonts and images to fully load, ensuring that captures mirror the final user experience.
Together, these scripts eliminate rendering blind spots that often mislead standard SEO audits and impede indexability.
Storage-Based Communication
Chrome’s storage API functions as a persistent state layer, enabling components to indirectly sync information across UI, background, and session reloads.
| Storage Key | Type | Purpose | Used By |
|---|---|---|---|
| jsEnabled | Boolean | Current JavaScript state toggle | popup.js, background.js |
| capturedScreenshot | String (Data URL) | Latest full-page screenshot for analysis | popup.js, background.js |
| autoScreenshotWhenTurnOffJs | Boolean | Auto-capture when JS is toggled off | popup.js |
| lastOperationCompleted | Boolean | Signals if last capture operation was successful | popup.js |
This architecture ensures session resilience and allows operations to resume intelligently—even across page reloads or browser restarts.
JavaScript Toggle Flow
Toggling JavaScript isn’t just a feature—it’s a strategic simulation of crawler behavior. The communication flow for JavaScript toggling ensures that every action (from disabling JS to reloading the page) happens reliably and with clear intent.
By mirroring search engine constraints, this feature equips users to identify render-blocking scripts or content loss, which could drastically affect search rankings.
Screenshot Capture Flow
Capturing full-page screenshots, especially on dynamic sites, is a complex, multi-step process. Our flow handles this with precision and stability:
- Pre-capture setup through content scripts
- Progressive scroll-based rendering
- Live status updates via message passing
- Screenshot stitching and storage
- Validation for size limits and tab status
This enables you to document and debug render paths exactly as crawlers would encounter them.
Real-Time Progress Reporting
Users are never left guessing. The extension communicates real-time capture progress to the popup UI, ensuring transparency and trust during lengthy operations. Each message includes contextual updates, ensuring users can monitor render fidelity in real time.
Resilient Error Handling
Strategically built for real-world reliability, our communication system incorporates robust error detection and mitigation mechanisms:
- Tab Validation — Verifies tab availability before actions are triggered
- Navigation Detection — Cancels capture if the user navigates away
- Size Limit Checks — Prevents oversized captures from overwhelming memory
- Promise-Based Handling — Ensures that all asynchronous flows can catch and report failures
This proactive design eliminates silent failures and empowers users to take corrective action instantly.