Chrome extension that renders Mermaid diagrams inline wherever ChatGPT (or another whitelisted site) shows a Mermaid code fence. Built with Vite, React, and Manifest V3.
- Auto-detects Mermaid snippets on supported pages and renders them beneath the original code block.
- Handles live chat updates via a MutationObserver and avoids duplicate work with lightweight bookkeeping.
- Resilient error messaging when Mermaid parsing fails.
- Options page to toggle auto-rendering and manage the site whitelist powered by
chrome.storage.sync. - Download rendered diagrams as SVG or PNG straight from the inline toolbar.
pnpm install pnpm dev
The dev server pipes hot reloads into the extension. Load the unpacked folder shown in the terminal (usually dist) via Chrome's Extensions page while Developer Mode is enabled.
| Command | Description |
|---|---|
pnpm test |
Run the unit and component suite with Vitest. |
pnpm test:watch |
Start Vitest in watch mode with the interactive UI. |
pnpm test:coverage |
Generate coverage reports with V8 (HTML + LCOV in coverage/). |
pnpm test:e2e |
Execute the Playwright end-to-end flow against a mocked ChatGPT page. |
The Vitest environment uses happy-dom alongside Testing Library helpers and a mocked chrome namespace so background, content script, and UI logic can share fixtures. End-to-end tests require Chromium with extension support; Playwright automatically builds and packages the extension via pnpm zip before launching the browser.
- Open
options.htmlduring development (served athttp://localhost:5173/options.html) to manage the whitelist or disable auto rendering. - Saved settings sync across Chrome instances via
chrome.storage.sync.
pnpm run build
The production bundle lands in build/. Package it manually or use pnpm run zip for a distributable archive located in package/.
Release Please manages versioning and release notes. Check the autogenerated root CHANGELOG.md or the GitHub Releases tab for the latest history.
Release Please manages versioning and release notes. Check the autogenerated root CHANGELOG.md or the GitHub Releases tab for the latest history.
Bootstrapped with create-chrome-ext