A browser extension that audits any website for performance, accessibility, SEO, and best practices — directly in a side panel. Each finding is rendered as a fix card with a clear problem, explanation, and copyable code fix. An optional AI layer (BYOK) deepens explanations using any OpenAI-compatible endpoint, including local models.
- One-click audit from the side panel on the active tab
- Four audit categories: Performance (Core Web Vitals, resources), Accessibility (axe-core), SEO (meta, headings, structured data), Best Practices (HTTPS, CSP, deprecated APIs)
- Fix cards — each finding shows what's wrong, why it matters, and a code/HTML fix with a copy button
- AI explanations using your own API key with any OpenAI-compatible endpoint (OpenAI, Ollama, LM Studio, vLLM, llama.cpp)
- Scan history — last 10 scans per URL, stored locally in
chrome.storage.local - Trend dashboard — score line charts and scan comparison view
- Batch mode — queue multiple URLs to audit in sequence with progress tracking
- Scheduled batch runs — daily or weekly recurring audits via
chrome.alarms - Element inspector — click any element in the page to inspect it directly from the panel
- Export — download reports as JSON, HTML, or PDF
- Share — publish a report link via an optional Cloudflare Worker + R2 backend
- Multi-browser builds — Chrome, Firefox, and Edge manifests included
optimom/
├── apps/
│ ├── extension/ # Chrome / Firefox / Edge extension
│ │ ├── src/
│ │ │ ├── background/ # Service worker — scan orchestration, history, scheduling
│ │ │ ├── content/ # Content script — DOM collection, axe-core, Web Vitals
│ │ │ ├── components/ # Side panel UI components (shadcn/ui)
│ │ │ ├── store/ # Zustand panel store
│ │ │ └── lib/ # Rules, audit helpers, exporters, schemas
│ │ ├── public/ # Browser manifests (Chrome / Firefox / Edge) + icons
│ │ ├── scripts/ # Build utilities (zip packager)
│ │ ├── vite.config.ts
│ │ └── vite.config.content.ts
│ ├── web/ # Companion report viewer (shareable report links)
│ └── worker/ # Cloudflare Worker — R2 upload backend for the Share feature
├── eslint.config.js # Workspace-wide lint config
└── package.json # Root workspace scripts
Data flow: Side panel → message → background service worker → injects content script → collects DOM + axe + performance → results returned to panel → stored in chrome.storage.local.
| Layer | Library |
|---|---|
| UI framework | React 19 + TypeScript (strict) |
| Build tool | Vite 8 with React Compiler |
| Components | shadcn/ui + Tailwind CSS v4 |
| State | Zustand |
| Validation | Zod |
| Accessibility audit | axe-core |
| AI SDK | Vercel AI SDK (client-side, no backend) |
| Extension API | Chrome Manifest V3 |
| Package manager | pnpm workspaces |
| Share backend | Cloudflare Workers + R2 |
git clone https://github.com/<your-username>/optimom.git
cd optimom
pnpm installcp apps/extension/.env.example apps/extension/.env.local| Variable | Required | Description |
|---|---|---|
VITE_UPLOAD_ENDPOINT |
For Share feature | URL of your deployed Cloudflare Worker |
VITE_REPORT_BASE_URL |
Optional | Base URL for shared report links (defaults to https://results.optimom.app) |
# Chrome (default)
pnpm build:chrome
# Firefox
pnpm build:firefox
# Edge
pnpm build:edge
# All three targets
pnpm build:allBuilt files land in apps/extension/dist/<target>/.
Chrome / Edge:
- Open
chrome://extensions(oredge://extensions) - Enable Developer mode
- Click Load unpacked and select
apps/extension/dist/chrome(ordist/edge)
Firefox:
- Open
about:debugging#/runtime/this-firefox - Click Load Temporary Add-on
- Select any file inside
apps/extension/dist/firefox
Creates zip files ready for browser store submission:
pnpm packageThe AI layer is optional and requires no backend. Configure it in the extension's Settings panel:
| Setting | Example |
|---|---|
| Base URL | https://api.openai.com/v1 |
| Model | gpt-4o-mini |
| API Key | Your key |
Compatible with any OpenAI-compatible server:
- OpenAI —
https://api.openai.com/v1 - Ollama —
http://localhost:11434/v1 - LM Studio —
http://localhost:1234/v1 - vLLM / llama.cpp — your server URL
Without a key configured, audits run in full and findings show static rule-based tips.
The Share button uploads a report snapshot to Cloudflare R2 and returns a shareable link that opens in apps/web.
Deploy the worker:
cd apps/worker
pnpm install
pnpm deploySet the returned worker URL as VITE_UPLOAD_ENDPOINT in apps/extension/.env.local and rebuild the extension.
Run from the repo root — scripts delegate to the correct workspace package via --filter.
# Side panel UI dev server
pnpm dev
# Watch mode — rebuilds extension on file changes
pnpm build:watch
# Companion web app dev server
pnpm dev:web
# Cloudflare Worker dev server
pnpm dev:worker
# Type check (from inside apps/extension)
cd apps/extension && pnpm exec tsc --noEmit
# Lint entire workspace
pnpm lint