Addfox

Addfox is a robust browser extension framework built on the Rsbuild platform. Designed to accelerate development, Addfox provides an efficient and straightforward solution for creating extensions for both Chrome and Firefox. Its architecture seamlessly wraps Rsbuild with extension-specific plugins, ensuring rapid performance and adaptability.

Key Features

• 🔥 Fast Development with Hot Module Replacement: Utilize addfox dev to watch files for changes, rebuild automatically, and hot-reload extensions seamlessly.
• 📦 Efficient Build Output: Upon executing addfox build, the framework outputs extension files alongside a store-ready zip file located in the .addfox directory.
• 📁 Automatic Entry Discovery: Employs a file-based entry system that auto-discovers entries from the app/ directory (background, content, popup, options, sidepanel, devtools) with support for custom entries.
• 🌐 Cross-Browser Compatibility: With the -b flag, target both Chromium-based browsers and Firefox while accommodating browser-specific manifest overrides.
• ⚛️ Framework Agnostic: Supports various frameworks including Vue, React, Svelte, Solid, and plain JavaScript or TypeScript.
• 🤖 Intuitive Debugging: The --debug option reveals runtime errors specific to each entry directly in the terminal for effective debugging.
• 🧪 Built-In Testing Workflow: The command addfox test integrates with Rstest to facilitate unit and end-to-end tests.
• 📊 Bundle Analysis Reporting: Incorporate --report in development or build commands to generate insightful bundle analysis with Rsdoctor.
• 🧩 Skills Integration: Supports additional features through addfox/skills either by scaffolding or using the skills add command.
• 🔐 Environment Control: Load environment variables via .env files and expose them according to envPrefix rules.

Installation and Usage

New Project Setup

To create a new project:

npx addfox@latest create
# or: pnpm dlx addfox@latest create
# or: pnpm create addfox-app (legacy)

Select your preferred framework (Vanilla, Vue, React, Preact, Svelte, Solid), language, package manager, and optional Skills integration. A comprehensive layout along with the initial configuration file, addfox.config, is automatically generated.

Integration with Existing Projects

For existing projects, simply run:

pnpm add -D addfox

Incorporate an addfox.config.ts (or .js / .mjs) in the project root, and define entries in the app/ directory. Then utilize the following commands:

• addfox dev for development with watch + HMR
• addfox build to construct the output in .addfox/extension (including optional zip file)

To target specific browsers, use the command: -b chrome or -b firefox.

For full documentation, configuration details, and examples, visit the official documentation at addfox.dev. Additionally, explore the Skills for AI workflow modules housed at addfox/skills.

Whether aiming to streamline browser extension development, or enhance productivity with powerful tools, Addfox offers a comprehensive and user-friendly solution.