BestWebExtension

A collection of fast, privacy-first, powerful browser extensions.

Tools:

• Best JSON Viewer — Beautiful, fast JSON formatting
• Best Network Monitor (coming soon)
• Best IndexedDB Viewer (coming soon)
• Best Storage Viewer (coming soon)

Starting with developer tools because that's what we use every day — but the vision is broader and bring sanity to many areas.

Philosophy: Ship fast. Stay modern and minimal. Build the extensions you genuinely love.

---

Stack

Layer	Tool
Extension framework	WXT
UI	React 19 + shadcn/ui
Styling	Tailwind CSS v4 (CSS-first)
Language	TypeScript 5.8 (strict)
Package manager	pnpm
Lint + Format	Biome
Build	Vite (via WXT)

---

Requirements

• Node.js >=20.0.0
• pnpm >=9.0.0 — install with corepack enable && corepack prepare pnpm@latest --activate

---

Bootstrap

# 1. Clone
git clone https://github.com/yourusername/bestwebextension.git
cd bestwebextension

# 2. Enable corepack (recommended — pins pnpm version)
corepack enable

# 3. Install all dependencies
pnpm install

# 4. Generate WXT type files for all extensions
pnpm prepare

---

Development

# Develop a specific extension (live reload in browser)
pnpm --filter @bestwebextension/json dev

# Or from the extension directory:
cd extensions/json
pnpm dev

Then load the extension in Chrome:

1. Go to chrome://extensions
2. Enable "Developer mode"
3. Click "Load unpacked"
4. Select extensions/json/build/chrome-mv3

---

Common Commands

# Build all extensions
pnpm build:all

# Build a single extension
pnpm --filter @bestwebextension/json build

# Build + zip for distribution (Chrome + Firefox)
pnpm --filter @bestwebextension/json zip

# Type check everything
pnpm typecheck

# Lint everything
pnpm lint

# Lint + auto-fix
pnpm lint:fix

# Clean all build artifacts
pnpm clean

---

Creating a New Extension

# 1. Copy the template
cp -r extensions/template extensions/your-slug

# 2. Update package.json — name + description
# 3. Update wxt.config.ts — manifest.name, manifest.description, permissions
# 4. Update src/lib/storage.ts — settings interface + extension ID
# 5. Update src/app/background/index.ts — extension ID + name
# 6. Replace src/app/popup/App.tsx with your UI
# 7. Replace public/icon.png with a 512×512 icon
# 8. Add a reference in root tsconfig.json

# 9. Install and develop
pnpm install
pnpm --filter @bestwebextension/your-slug dev

See agents.md for the complete step-by-step guide with code examples.

---

Repository Structure

bestwebextension/
├── extensions/
│   ├── template/            ← Copy this to start a new extension
│   └── json/                ← Best JSON Viewer
├── packages/
│   ├── ui/                  ← Shared shadcn/ui components + Tailwind + dark theme
│   ├── extension-core/      ← Storage, messaging, TanStack Query, license, hooks
│   └── utils/               ← cn(), formatBytes(), formatDuration(), etc.
├── .github/workflows/
│   ├── ci.yml               ← Lint + typecheck + build on push/PR
│   └── release.yml          ← Build + zip on manual trigger
├── agents.md                ← AI agent instructions
└── README.md                ← You are here

---

Licensing

BestWebExtension is open source — the code is MIT-licensed and free to view, modify, and run however you like. Pre-built packages (from GitHub Releases or extension stores) have their own terms to help fund ongoing development. See LICENSE and LICENSE-BINARY.md for the full details.

Buy a license to support the project 💜