Merlin Glass

MERLIN_GLASS // The Professional JSON/CSS Refractor & Context Extractor

Merlin Glass is a high-performance Chrome Extension designed to serve as a specialized developer HUD for fast inspection and extraction of JSON and CSS signals. It bridges the gap between raw data and actionable design tokens by providing a non-destructive, real-time side-panel for viewing, pruning, and exporting structured content directly from the browser.

Built for those who work at the intersection of logic and aesthetics, Merlin Glass transforms the browser into a tactical command surface, allowing seamless data “refraction” without disrupting the source page.

Core Systems: The Scryer Engine & Spar Filter

At the heart of Merlin Glass lies the Scryer Engine, a specialized injection layer that creates a persistent, high-utility side-panel. Within this interface, users can toggle between two primary modes:

Mirror Mode Provides a clean, high-fidelity view of raw JSON or CSS source content, optimized for readability with monospaced typography and a focused HUD layout.

Spar Mode Powered by the Spar Filter, this mode intelligently prunes noise from data streams. For JSON, it removes redundant metadata such as request_id or trace_id, leaving the essential structure. For CSS, it isolates and extracts design tokens (CSS variables) into a clean :root block for rapid review and reuse.

Lightweight Visual Diagnostics (Scryer Overlay)

Merlin Glass now includes an optional developer Scryer overlay that provides instant visual feedback about the element under the cursor, including positioning, z-index, pointer-events, and stacking context hints.

This diagnostic layer is:

transient and toggleable

non-destructive

injected only on demand

designed for quick visual sanity checks during inspection

It complements Merlin’s core refraction workflow by helping developers understand how interface layers relate to extracted styles and tokens.

High-Value Utility For Individual Developers

Stop digging through thousands of lines of JSON to find a single object. Merlin Glass acts as a tactical overlay that instantly isolates keys, values, and design tokens. With the built-in SAVE function, refracted data can be exported as clean files without manual formatting.

For Teams & Collaborative Environments

Merlin Glass standardizes how teams inspect API responses and design systems. Using Spar refraction, front-end teams can communicate essential data shapes or extract live design tokens for consistency across modules without leaving the tab.

For Creative Engineers & Rapid Prototypers

If you iterate rapidly and pull inspiration from across the web, Merlin Glass stays out of your way until activated. Once live, it allows you to scry into site structure, convert cluttered CSS into usable tokens, and optionally visualize layout relationships through the Scryer overlay.

Technical Specifications

Manifest V3 compliant Built on modern Chrome Extension standards for security and performance.

Non-destructive HUD Injects a side-panel via cockpit.css that overlays the page without altering underlying DOM or page logic.

On-Demand Injection Scripts activate only on explicit user action and only on valid http/https pages.

Privacy-conscious All processing occurs locally within the browser. No data leaves the user’s environment.