# Addfox - Browser Extension Development Framework > Addfox is a browser extension development framework built on Rsbuild, it provides a comprehensive set of tools and features for developing browser extensions. ## Guide - [Introduction](/guide/introduction.md): Addfox is a browser extension development framework built on Rsbuild, helping you develop and build Chrome and Firefox extensions in a single project. ## Others - [addfox-docs](/CHANGELOG.md) - [Addfox Blog](/blog/index.md): The latest news, updates, and deep dives from the Addfox team. - [Addfox 0.2.0: Architecture Refactoring & Dependency Slimming](/blog/v0-2-0.md): A deep dive into the latest architecture refactoring, including the new @addfox/launcher, dependency reductions, supply chain risk mitigation, and performance improvements. - [appDir](/config/app-dir.md): appDir is the app directory, defaulting to app/. It is used as baseDir for entry and as the root for manifest auto-load. - [cache](/config/cache.md): cache controls whether Chromium-based browsers reuse a dev user data directory between addfox dev runs. It affects only dev mode and only Chromium-family browsers. - [debug](/config/debug.md): debug enables the extension error monitor in dev mode by adding the @addfox/rsbuild-plugin-extension-monitor plugin. It surfaces runtime errors from the extension into a dedicated panel and terminal-friendly output, designed to work well with AI assistants. - [entry](/config/entry.md): entry defines the entry map: keys are entry names, values are JS/TS script paths or structured objects relative to baseDir. When omitted, the framework discovers background, content, popup, options, sidepanel, devtools under appDir (default app/) by directory name. - [Environment Variables](/config/env-prefix.md): Addfox uses Rsbuild's loadEnv to load .env files from the project root, and by default only exposes variables starting with ADDFOX_PUBLIC_ to client code. - [hotReload](/config/hot-reload.md): hotReload configures dev‑mode HMR behaviour for the extension: the WebSocket port used by the reload manager and whether content pages are auto‑refreshed when content scripts change. - [Config](/config/index.md): This page summarizes Addfox configuration options. Common entries: manifestentryappDirenvPrefixhotReload - [browserPath](/config/launch.md): browserPath specifies the executable paths for browsers used during addfox dev to open and load the extension. - [manifest](/config/manifest.md): manifest declares the extension manifest (the content of the final manifest.json in the build output). It supports three styles: inline object, object split by browser (chromium/firefox), or file paths; it can also be omitted so the framework auto-loads manifest files from the source directory. - [outDir](/config/out-dir.md): outDir is the build output directory name, under outputRoot. The full output path is outputRoot/outDir, default .addfox/extension. - [plugins](/config/plugins.md): plugins is the Rsbuild plugins array (like Vite), using function calls such as plugins: [vue()] or plugins: [pluginReact()]. Use it to add Vue (via @addfox/rsbuild-plugin-vue), React (via @rsbuild/plugin-react), or other Rsbuild plugins. - [Build report (Rsdoctor)](/config/report.md): When enabled, addfox generates an Rsdoctor report for build analysis. The report is written under outputRoot/report (default .addfox/report), separate from the dist output. - [rsbuild](/config/rsbuild.md): rsbuild overrides or extends Rsbuild config (similar to Vite's build.rollupOptions, esbuild, etc.). It supports object (deep-merged with base) or function (full control, with helpers.merge for deep merge). - [zip](/config/zip.md): zip controls whether addfox build packs the output directory into a zip file (e.g. for store upload or distribution). Only affects build; dev does not produce a zip. - [Examples](/examples/index.md): This page lists extension examples in the addfox repo. Each example is a separate directory with its own package.json and addfox.config.ts. Run install in the repo root (pnpm / npm / yarn / bun), then run dev or build in the example directory. - [Gallery](/gallery/index.md): Showcase of browser extensions built with Addfox. - [error](/guide/ai/error.md): error.md records the original error stacks and context information during extension runtime, serving as the single source of truth for AI to handle runtime issues. - [llms](/guide/ai/llms.md): llms.txt is a high-level project guide for Large Language Models. It defines the core architecture, entry points, and AI conventions for the development process. - [meta](/guide/ai/meta.md): meta.md provides structured metadata for the project, including permissions, entry mappings, and build artifacts, serving as a key reference for AI refactoring and design. - [App Directory](/guide/app-dir.md): Addfox follows a convention-over-configuration design philosophy. Understanding the standard directory structure helps you get started quickly and follow best practices. - [Cache](/guide/cache.md): Addfox creates a .addfox/cache directory in your project to improve development workflow performance. - [CLI](/guide/cli.md): This page lists the supported addfox CLI commands and options. - [Content-UI](/guide/content-ui.md): Addfox provides built-in Content-UI helpers in @addfox/utils. Use these APIs in content scripts instead of hand-writing DOM mount logic. - [Entry](/guide/entry.md): This is the overview page for the Addfox entry system. Entries are recommended to be understood in two categories: File-based: Auto-discover entries by directory conventionConfig-based: Explicit configuration via entry + manifest in addfox.config.ts If you are new to entry configuration, we recommend reading in this order: Entry ConceptsFile-based EntryConfig-based Entry - [Entry Concepts](/guide/entry/concept.md): Entries correspond to the functional modules of browser extensions, such as background scripts, content scripts, popup pages, etc. Addfox provides three configuration methods that can be used individually or in combination. - [Config-based Entry](/guide/entry/config-based.md): When configuring with entry and manifest in addfox.config.ts, you can: Customize entry pathsOverride auto-discovery resultsAdd custom entries (e.g., capture, my-page) Entries not listed in entry will still be auto-discovered via file-based rules. - [File-based Entry](/guide/entry/file-based.md): Do not configure entry, let the framework discover entries automatically by directory and file name under appDir (default is app/). - [Environment Variables](/guide/env-prefix.md): Addfox supports environment variables via .env files that can be safely used in client-side code. - [Framework support](/guide/framework.md): Addfox supports mainstream frontend frameworks and provides dedicated examples and guidance. Choose your stack below: ReactVueSvelteSolidPreact - [Preact](/guide/framework/preact.md): Add @rsbuild/plugin-preact to plugins in addfox.config.ts to enable Preact and JSX/TSX. - [React](/guide/framework/react.md): Add @rsbuild/plugin-react to plugins in addfox.config.ts to enable React and JSX/TSX. - [Solid](/guide/framework/solid.md): Add @rsbuild/plugin-babel and @rsbuild/plugin-solid to plugins in addfox.config.ts to enable Solid and JSX/TSX. Solid's JSX requires Babel, so both plugins are needed. - [Svelte](/guide/framework/svelte.md): Add @rsbuild/plugin-svelte to plugins in addfox.config.ts to enable Svelte (.svelte files). - [Vue](/guide/framework/vue.md): Add @addfox/rsbuild-plugin-vue to plugins in addfox.config.ts to enable Vue 3 (SFC, Vue runtime). - [Hot Reload (HMR)](/guide/hmr.md): The addfox dev command provides a hot reload experience during development: after saving code, the project is automatically rebuilt and the browser extension is reloaded via WebSocket. - [Internationalization (i18n)](/guide/i18n.md): In an Addfox project, extension i18n assets (e.g. localized messages) live under the public directory. At build time, everything under public is copied into the output directory (e.g. dist), so structures like _locales are preserved in the built extension and loaded by Chrome according to default_locale and the chrome.i18n API. A common setup is public/_locales//messages.json (e.g. public/_locales/en/messages.json), with default_locale set in the manifest. For message format, placeholders, and how to reference strings in manifest, CSS, and JS, see Chrome’s official docs: Internationalize your extension (full guide)chrome.i18n API (API reference) - [Extension icons](/guide/icons.md): In an Addfox project, extension icon assets (e.g. toolbar icon, store assets) live under the public directory. At build time, public is copied into the output directory (e.g. dist), so paths in the manifest should be relative to the extension root and point to files under public (e.g. public/icons/icon16.png → icons/icon16.png in the manifest). A common setup is an icons folder under public with PNGs at 16, 32, 48, and 128 px, referenced in the manifest via icons or action.default_icon. For required sizes, formats, and manifest fields, see Chrome’s official docs: Manifest - icons - [Guide](/guide/index.md): This is the Addfox guide entry page. Recommended reading order: IntroductionInstallationEntry SystemFramework SupportDevelopment & HMR - [Installation](/guide/install.md) - [Browser Launch](/guide/launch.md): Addfox can automatically launch the browser and load the extension during development for improved efficiency. - [Manifest](/guide/manifest.md): manifest declares the extension manifest (the content of the final manifest.json in the build output). It supports inline object, object split by browser (chromium/firefox), or file paths; it can also be omitted for auto-load from the source directory. - [Error Monitor](/guide/monitor.md): Addfox can inject runtime error monitoring in development. It aggregates multi-entry extension errors into terminal output and monitor UI for faster debugging. - [Build Output](/guide/output.md): Build artifacts are output to browser-specific subdirectories under .addfox/extension/ (e.g., extension-chromium or extension-firefox). - [Reload Manager](/guide/reload-manager.md): The Reload Manager is a built-in component during Addfox development, responsible for automatically reloading the extension after code changes. - [Analysis Report](/guide/report.md): Addfox uses Rsdoctor to provide build analysis reports for bundle size, dependency structure, and build bottlenecks. - [Rsbuild config (rsbuild)](/guide/rsbuild.md): rsbuild overrides or extends the Rsbuild configuration. It supports object (deep-merged with base) or function form for full control. - [Skills](/guide/skills.md): Installable skill library for Addfox extension development. - [Less](/guide/style-integration/less.md) - [Sass](/guide/style-integration/sass.md) - [Tailwind CSS](/guide/style-integration/tailwindcss.md) - [UnoCSS](/guide/style-integration/unocss.md) - [Testing](/guide/testing.md): Addfox has built-in support for Rstest and recommends running tests through addfox test. - [TypeScript](/guide/typescript.md): Addfox is built on top of Rsbuild and provides TypeScript support out of the box. You can use .ts / .tsx directly without adding an extra compile pipeline. - [Zip Packaging](/guide/zip.md): After build, Addfox automatically packages the output directory into a zip file for distribution. - [@addfox/cli](/resources/cli.md): The addfox CLI entry point: it parses arguments, runs the config → entry → Rsbuild pipeline, wraps terminal output, and drives Rsbuild for dev / build. You can use it programmatically to build custom extension tooling on top of Addfox. - [create-addfox-app](/resources/create-addfox-app.md): Interactive scaffolder that generates a new Addfox-based browser extension project from a few prompts. - [Resources](/resources/index.md): Addfox is published as a collection of packages. While most users only need the main addfox CLI, several packages can also be used independently in your own tooling or workflows. This section documents the standalone packages: Choose a package above to learn how to install and use it. - [@addfox/launcher](/resources/launcher.md): Browser launcher for extension development. Supports the Chromium family (Chrome, Edge, Brave, etc.) and the Gecko family (Firefox, Zen, LibreWolf, etc.).