Extension Build Benchmark

Addfox 0.2.9 Performance Update: Compared to Addfox 0.2.5, the latest version delivers significant dev startup and build improvements:

• Dev startup: 1.92s → 1.56s (~1.23x faster, ~0.36s saved)
• Build time: 1.48s → 1.04s (~1.42x faster, ~0.44s saved)
• Output size: unchanged at 837 KB

Addfox ranks first in both dev startup time and build time among the four frameworks in this benchmark.

This repository benchmarks four browser extension frameworks by building the same extension with identical functionality. The goal is to compare dev startup time, build time, and output size.

Reference: rstackjs/build-tools-performance

If you are an AI agent, run the benchmark with the following prompt:

Run the extension build benchmark in this repository. Work from the repository root. First, ensure the environment is quiet: close any unnecessary browsers and background apps, kill stray chrome.exe / msedge.exe processes, and free ports 23333 and 4299. Then run node scripts/benchmark-compare.mjs snapshot to record the current baseline, run node scripts/run-benchmark-suite.mjs build, then node scripts/run-benchmark-suite.mjs dev, and finally node scripts/benchmark-compare.mjs to compare the new results against the baseline. Report the average build time, dev startup time, and output size for each framework, with special attention to Addfox.

• OS: Windows
• Browser: Microsoft Edge
• Node.js: 24.16.0
• Package Manager: pnpm 11.11.0
• Test Method: 8 runs per framework, averaged (warm-up run before each suite to eliminate cold-start bias)
• Last Updated: 2026-09-02

Time from running dev command to dev server ready (including browser launch and extension installation where applicable):

Note: All frameworks automatically open the browser and install the extension during dev. Each framework was tested with 8 runs after a warm-up run to eliminate cold-start bias. Ready markers: Addfox extensions loaded, WXT Opened browser in, Extension.js 🧩 Extension.js banner, Plasmo Extension re-packaged (its CLI prints nothing after the browser launches).

Time to complete production build (total time from running the command to build complete, including CLI startup overhead). Extension.js is measured at its Extension built for production marker (zip packaging step excluded):

Production build output (excluding source maps):

Measurement method: Output directory is cleaned before each build. Size is the exact sum of all file bytes in the production output directory (source maps excluded).

• Framework: React + Tailwind CSS 3
• Dependencies: lodash, react, react-dom, webextension-polyfill
• Entry Points: background, content, options, popup, sidepanel, devtools, space (custom)
• Features:
  • Popup: Capture screenshot of current page
  • Sidepanel: Fake AI chat (fixed responses)
  • DevTools: Display captured element colors
  • Space: Display captured screenshots (temporary storage)
  • Options: Common settings UI (language, limits, permissions)
• Resources: Icons from VideoRoll-Pro, i18n via _locales (en / zh_CN)

pnpm install --no-frozen-lockfile

Requires VideoRoll-Pro repository:

pnpm run copy-icons

Dev startup time:

pnpm run test:addfox
pnpm run test:wxt
pnpm run test:plasmo
pnpm run test:extensionjs

Build time:

pnpm run build:addfox
pnpm run build:wxt
pnpm run build:plasmo
pnpm run build:extensionjs

# Dev benchmark
node scripts/run-benchmark-suite.mjs dev

# Build benchmark
node scripts/run-benchmark-suite.mjs build

benchmark/
├── package.json               # Root scripts: copy-icons, test:*, build:*
├── pnpm-workspace.yaml        # Workspaces: addfox, wxt, plasmo, extensionjs
├── scripts/
│   ├── dev-benchmark.mjs      # Dev startup time benchmark
│   ├── build-benchmark.mjs    # Build time benchmark
│   ├── run-benchmark-suite.mjs # 8-run benchmark suite with averages
│   ├── batch-benchmark.mjs    # Batch test all frameworks
│   └── copy-icons.mjs         # Copy icons from VideoRoll-Pro
├── shared/
│   ├── icons/                 # Shared icons
│   └── locales/               # i18n reference
├── addfox/                    # Addfox implementation
├── wxt/                       # WXT implementation
├── plasmo/                    # Plasmo implementation
└── extensionjs/               # Extension.js implementation

• ✅ Addfox: Fully implemented with all features
• ✅ WXT: Fully implemented with all features
• ✅ Extension.js: Fully implemented with all features
• ✅ Plasmo: Fully implemented with all features