Addfox is a powerful browser extension framework built on Rsbuild that streamlines and accelerates the development process. Featuring fast development with hot module replacement, cross-browser support, and built-in testing flows, Addfox simplifies the creation of high-quality extensions that work seamlessly across platforms.
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.
addfox dev to watch files for changes, rebuild automatically, and hot-reload extensions seamlessly.addfox build, the framework outputs extension files alongside a store-ready zip file located in the .addfox directory.app/ directory (background, content, popup, options, sidepanel, devtools) with support for custom entries.-b flag, target both Chromium-based browsers and Firefox while accommodating browser-specific manifest overrides.--debug option reveals runtime errors specific to each entry directly in the terminal for effective debugging.addfox test integrates with Rstest to facilitate unit and end-to-end tests.--report in development or build commands to generate insightful bundle analysis with Rsdoctor.skills add command..env files and expose them according to envPrefix rules.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.
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 + HMRaddfox 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.
No comments yet.
Sign in to be the first to comment.