Chrome Extension

Seamless, one-click email audits directly from Klaviyo, HubSpot, Mailchimp, or any webpage with the Emailens Chrome Extension.

The Emailens Chrome Extension brings powerful email rendering and CSS compatibility checks directly into your design and editing workflows. Detect, extract, and audit email HTML inside your browser without leaving your ESP (Email Service Provider).

Features

One-Click ESP Audit: Mounts a premium floating button directly inside Klaviyo, HubSpot, and Mailchimp editors for instant previews.
Deep DOM Scanner: Automatically extracts emails nested within recursive iframe documents and shadowRoot elements.
Copy-Paste Fallback: Supports manual code entry with automatic framework compilation for MJML, React Email (JSX), and Maizzle.
Usage & Quota Tracker: View active limits, subscription status, and available daily or minute credits directly in the extension popup.
CORS Handling: Safely handles protected, cross-origin email preview frames by proxying source URL fetches securely in the background script.

Installation & Setup

Download the extension folder from your dashboard or install it from the Chrome Web Store.
Click the extension icon in your toolbar.
If you aren't signed in, click "Sign in to save previews". You'll be securely authenticated via your existing emailens.dev session.

One-Click Auditing Flow

When working in a supported editor (e.g., Klaviyo Template Builder), Emailens injects a floating button in the bottom corner of your browser:

Click Audit Email.
The extension automatically crawls the DOM, handles any nested iframes, and fetches the compiled HTML source.
The background worker securely relays the payload to the Next.js API, saving it to a temporary, high-entropy single-use Redis cache.
A new tab opens directly to the Emailens Dashboard, pulling the email payload from Redis and redirecting you to your finished compatibility scores, dark mode previews, and screenshots.

Technical Architecture

The Chrome Extension is optimized to be extremely lightweight, delegating heavy logic to the core engine:

sequenceDiagram
    participant User
    participant Popup as Extension Popup / Content Script
    participant BG as Background Worker
    participant API as Next.js API (/api/extension/prepare)
    participant Redis as Redis Cache
    participant Web as Web Dashboard (/dashboard/new)

    User->>Popup: Click "Audit Email"
    Popup->>Popup: deepSearch() DOM & Iframes
    Popup->>BG: Relay HTML Source
    BG->>API: POST /api/extension/prepare (payload + secret)
    API->>Redis: SET import:[id] (5-min TTL)
    API-->>BG: Return Import ID
    BG->>Web: Open tab /dashboard/new?import=[id]#s=[secret]
    Web->>Redis: GET import:[id] & Verify Secret
    Redis-->>Web: Return Payload
    Web->>Redis: EXPIRE import:[id] to 30s (Single-use)
    Web->>Web: Run Full Audit Pipeline

Pasting Framework Source Code

If you prefer testing local source templates without an ESP, open the extension popup and paste your code. The extension analyzes the content to automatically detect the format:

MJML: Starts with <mjml> or tags matching <mj-*
React Email (JSX): Imports referencing @react-email/ or tags like <Html>, <Container>
Maizzle: Structures matching <extends>, <block>, or Maizzle YAML front matter
HTML: Safe default if no framework markers are found

Framework sources are securely transmitted to the server and compiled inside our serverless pipeline using the corresponding compiler dependency.

Support & Contributing

The Chrome Extension is a bundle packaged as part of the emailens.dev monorepo at apps/extension. If you experience layout issues or failure to detect frames inside custom ESP layouts, please open an issue in our repository or reach out via support.