PostgresExplainerTab

A browser extension (for both Chrome & Firefox) for visualizing PostgreSQL EXPLAIN plans. Click the extension icon to open a new tab where you can paste your EXPLAIN output and get an interactive visualization powered by pev2.

Prerequisites

• Node.js v24.13.0
• pnpm v10.28.2 — after installing Node.js, enable pnpm via Corepack: corepack enable

If you have asdf available, you can run asdf install to activate the necessary tools.

Setup

pnpm install

Development

pnpm dev              # Start dev server (Chrome)
pnpm dev:firefox      # Start dev server (Firefox)

Building

pnpm build            # Production build (Chrome)
pnpm build:firefox    # Production build (Firefox)
pnpm zip              # Package for Chrome
pnpm zip:firefox      # Package for Firefox

Testing

pnpm test             # Run unit tests
pnpm test:watch       # Run unit tests in watch mode
pnpm test:coverage    # Run unit tests with coverage
pnpm test:e2e         # Run Playwright e2e tests (requires build first)

Tech Stack

• Vue 3
• WXT
• pev2
• Bootstrap 5
• Vitest + Playwright

License

MIT