{"id":12793,"library":"addfox","title":"Addfox Browser Extension Build Tool","description":"Addfox is a modern build tool and framework specifically designed for developing browser extensions across multiple platforms. It is built on top of Rsbuild, leveraging its performance for fast development cycles, including hot module replacement (HMR) and automatic browser launching for an efficient developer experience. The current stable version is 0.1.1-beta.15, indicating an active development phase with frequent beta releases. Key differentiators include its framework-agnostic support for popular UI libraries like React, Vue, Svelte, and Solid, and its ability to target various Chromium-based browsers (Chrome, Edge, Brave, etc.) as well as Firefox. Addfox simplifies project setup with file-based entry discovery and offers advanced features such as AI-friendly error output, Rstest integration for unit and end-to-end testing, and Rsdoctor for bundle analysis. It also streamlines deployment by automatically generating store-ready zip files. The tool requires Node.js version 20 or higher, ensuring access to modern JavaScript features and performance improvements.","status":"active","version":"0.1.1-beta.15","language":"javascript","source_language":"en","source_url":"https://github.com/addfox/addfox","tags":["javascript","typescript"],"install":[{"cmd":"npm install addfox","lang":"bash","label":"npm"},{"cmd":"yarn add addfox","lang":"bash","label":"yarn"},{"cmd":"pnpm add addfox","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Used in `addfox.config.ts` for type-safe configuration; Addfox is primarily an ESM package.","wrong":"const defineConfig = require('addfox').defineConfig;","symbol":"defineConfig","correct":"import { defineConfig } from 'addfox';"},{"note":"Imports the TypeScript type definition for Addfox configuration objects. Use `type` for type-only imports to avoid bundle bloat.","wrong":"import { AddfoxConfig } from 'addfox';","symbol":"AddfoxConfig","correct":"import type { AddfoxConfig } from 'addfox';"},{"note":"Imports the TypeScript type definition for Addfox plugins, typically used when authoring custom build plugins. Use `type` for type-only imports.","wrong":"import { AddfoxPlugin } from 'addfox';","symbol":"AddfoxPlugin","correct":"import type { AddfoxPlugin } from 'addfox';"}],"quickstart":{"code":"pnpm create addfox-app\n# Follow prompts (e.g., select React, TypeScript, npm) to configure your extension.\n# This command scaffolds a new project, installs dependencies, and sets up addfox.\n\ncd my-extension-project\n\npnpm dev\n# This starts the development server, watches for changes, and hot-reloads the extension in the browser.","lang":"typescript","description":"Initializes a new Addfox project using `create-addfox-app`, guiding through framework/language selection, installing dependencies, and starting the development server with HMR."},"warnings":[{"fix":"Review changelogs carefully before updating. Pin exact beta versions in production-like environments or use tools like `pnpm up --latest` with caution.","message":"Addfox is currently in beta (v0.1.1-beta.15). Its API and internal architecture are subject to change without strict adherence to semantic versioning, potentially introducing breaking changes between minor beta releases.","severity":"breaking","affected_versions":">=0.1.0-beta.0"},{"fix":"Update your Node.js environment to version 20 or newer using a version manager like `nvm` or `volta` (`nvm install 20 && nvm use 20`).","message":"Addfox requires Node.js version 20.0.0 or higher. Older Node.js versions will result in runtime errors or installation failures.","severity":"gotcha","affected_versions":"<20.0.0 (Node.js)"},{"fix":"Always include `-b <browser>` (e.g., `-b chrome`, `-b firefox`, `-b edge`) in your `addfox dev` and `addfox build` commands when you need to target a specific browser or variant.","message":"When building for specific browsers (e.g., Firefox, Edge), you must explicitly specify the target using the `-b` flag (e.g., `addfox build -b firefox`). Without it, Addfox typically targets Chromium-based browsers by default.","severity":"gotcha","affected_versions":">=0.1.0-beta.0"},{"fix":"Create an `addfox.config.ts` file in your project root. For a basic configuration, use `import { defineConfig } from 'addfox'; export default defineConfig({});` and customize it based on your `app/` directory structure.","message":"Manual setup of Addfox in an existing project requires a `addfox.config.ts` (or `.js`, `.mjs`) file in the project root. Missing or misconfigured files can lead to build errors.","severity":"gotcha","affected_versions":">=0.1.0-beta.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install Addfox as a dev dependency (`pnpm add -D addfox`) or run commands via `pnpm addfox dev` or `npx addfox dev`.","cause":"The Addfox CLI package is not installed globally or locally, or it's not in your system's PATH.","error":"Error: The 'addfox' command was not found."},{"fix":"Update Node.js to version 20 or higher (e.g., `nvm install 20 && nvm use 20`).","cause":"Your current Node.js version is older than the minimum required by Addfox.","error":"Error: Node.js version '18.x.x' is not supported. Addfox requires Node.js >=20.0.0."},{"fix":"Ensure `addfox.config.ts` (or `.js`, `.mjs`) exists directly in your project's root directory.","cause":"The `addfox.config.ts` file is missing, misspelled, or located in an incorrect directory.","error":"Error: Cannot find module 'addfox.config.ts' in project root."},{"fix":"Carefully review the specified `manifest.json` file against the official Manifest V3 documentation for syntax and structural errors. The error message often provides clues about the specific violation.","cause":"There is an error in your `manifest.json` file, violating Chrome's Manifest V3 specifications (e.g., incorrect permissions, missing required fields, invalid host permissions).","error":"Build failed: Manifest V3 validation failed for <path/to/manifest.json>."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null}