# Extension.js

> Build browser extensions for Chrome, Edge, and Firefox with one modern workflow. Extension.js handles manifest compilation, browser-specific output, reload behavior, and packaging so you can focus on product features.

## Docs

- [Announcing Extension.js 2.0.0-alpha](https://extension.js.org/blog/announcing-2-0-0-alpha.md): Extension.js 2.0.0-alpha introduces 30+ starter templates, browser-specific manifest fields, and SWC-powered compilation for faster cross-browser builds.
- [Announcing Extension.js 2.0.0-beta](https://extension.js.org/blog/announcing-2-0-0-beta.md): Extension.js 2.0.0-beta stabilizes alpha features and resolves browser compatibility issues across Firefox, Edge, and Chrome for reliable cross-browser builds.
- [Announcing Extension.js 3.0.0](https://extension.js.org/blog/announcing-3-0-0.md): Extension.js 3.0.0 ships faster Rspack-powered builds, Firefox Manifest V3 support, and first-class TypeScript for cross-browser extension development.
- [Extension.js blog and release announcements](https://extension.js.org/blog/index.md): Stay up to date with Extension.js release notes, feature announcements, and ecosystem updates for cross-browser extension development.
- [AI access via MCP and llms.txt](https://extension.js.org/docs/ai-access.md): Connect Extension.js documentation to your AI tools via the hosted MCP server, or pull structured summaries from the llms.txt endpoint.
- [Browser launch flags for debugging and automation](https://extension.js.org/docs/browsers/browser-flags.md): Control Chrome, Firefox, and Edge launch behavior with browser flags for debugging, automation, and runtime experiments in Extension.js.
- [Firefox and Gecko runtime preferences setup](https://extension.js.org/docs/browsers/browser-preferences.md): Set Firefox and Gecko runtime preferences for development without editing extension source. Configure homepage, devtools, and notification defaults.
- [Browser profile management for isolated dev runs](https://extension.js.org/docs/browsers/browser-profile.md): Manage browser state isolation during extension development with managed, persistent, or custom profile paths for Chrome and Firefox.
- [Supported browsers for Extension.js development](https://extension.js.org/docs/browsers/browsers-available.md): See which browsers Extension.js supports. Run and test extensions across Chrome, Edge, Firefox, and custom binaries from a single CLI workflow.
- [Browser targeting guide](https://extension.js.org/docs/browsers/index.md): Choose and configure browser targets for Extension.js development. Covers Chrome, Firefox, and Edge targeting, profiles, flags, and custom binaries.
- [Running other browsers from binary path](https://extension.js.org/docs/browsers/running-other-browsers.md): Test extensions in Brave, Vivaldi, Waterfox, or other Chromium and Gecko browsers by providing an explicit binary path to Extension.js.
- [Build command for production extension artifacts](https://extension.js.org/docs/commands/build.md): Create production-ready extension artifacts for Chrome, Edge, or Firefox with the Extension.js build command. Supports multi-browser output and zip packaging.
- [Create command to scaffold extension projects](https://extension.js.org/docs/commands/create.md): Scaffold a new browser extension project from an official template with one CLI command. Choose React, Vue, Svelte, TypeScript, or vanilla JS.
- [Dev command for watch mode and live reload](https://extension.js.org/docs/commands/dev.md): Develop browser extensions with watch mode, hot module replacement, automatic browser launch, and context-aware reload via the Extension.js dev command.
- [Extension.js command guide](https://extension.js.org/docs/commands/index.md): Reference for every Extension.js CLI command including dev, build, start, preview, create, install, and uninstall with usage examples.
- [Install command for managed browser runtimes](https://extension.js.org/docs/commands/install.md): Add a managed browser runtime to the Extension.js cache for deterministic builds. Supports Chrome for Testing, Chromium, Firefox, and Edge.
- [Preview command to launch built extensions](https://extension.js.org/docs/commands/preview.md): Launch an already-built extension for production-like manual testing without recompiling. Load unpacked output and run the browser launcher flow.
- [Start command for build-and-launch workflow](https://extension.js.org/docs/commands/start.md): Run a production build and immediately launch the extension in the browser with one command. Combines build and preview into a single step.
- [Uninstall command to remove managed browsers](https://extension.js.org/docs/commands/uninstall.md): Remove managed browser runtimes from the Extension.js cache. Only affects browsers installed by Extension.js, not your system browsers.
- [Browser-specific manifest fields](https://extension.js.org/docs/features/browser-specific-fields.md): Define Chrome, Firefox, and Edge manifest values inline with browser prefixes. Extension.js emits only the fields matching each target at build time.
- [Cross-browser compatibility for Chrome and Firefox](https://extension.js.org/docs/features/cross-browser-compatibility.md): Ship one extension to Chrome, Edge, and Firefox from a single project. Extension.js handles browser-specific build output for Chromium and Gecko targets.
- [Environment variables for cross-browser configs](https://extension.js.org/docs/features/environment-variables.md): Manage API hosts, keys, and browser-specific values across environments. Extension.js loads env files for compiled bundles and for the config layer.
- [Extension config (extension.config.js)](https://extension.js.org/docs/features/extension-configuration.md): Set browser defaults, command behavior, and Rspack bundler options in one config file. Applies to dev, start, preview, and build commands.
- [Extension.js features overview](https://extension.js.org/docs/features/index.md): Explore core Extension.js capabilities including cross-browser builds, config files, HMR reload behavior, path resolution, and telemetry controls.
- [Multi-platform builds for Chrome, Edge, and Firefox](https://extension.js.org/docs/features/multi-platform-builds.md): Build and package the same extension for Chrome, Edge, and Firefox without separate build scripts. Output artifacts to dist and generate zip packages.
- [Predictable path resolution](https://extension.js.org/docs/features/path-resolution.md): Write paths naturally and let Extension.js normalize them to runtime-safe output. Handles manifest fields, public assets, and extension API references.
- [Page reload and hot module replacement (HMR)](https://extension.js.org/docs/features/reload-and-hmr.md): Understand how Extension.js picks the fastest safe update path during development, from HMR for styles to hard reloads and restart-required changes.
- [Rspack configuration in extension.config.js](https://extension.js.org/docs/features/rspack-configuration.md): Customize Rspack bundling with loaders, plugins, and aliases through extension.config.js without forking the default Extension.js build setup.
- [Special folders for pages, scripts, and assets](https://extension.js.org/docs/features/special-folders.md): Use special folders for extra pages, injected scripts, static assets, and companion extensions that do not fit in manifest.json entrypoints.
- [Telemetry and privacy controls in Extension.js](https://extension.js.org/docs/features/telemetry-and-privacy.md): Review the Extension.js telemetry contract: what anonymous data is collected, what is never collected, and how to opt out of telemetry entirely.
- [Create your first browser extension step by step](https://extension.js.org/docs/getting-started/create-your-first-extension.md): Build your first browser extension end-to-end with Extension.js. Create a GitHub search omnibox shortcut and learn the core development loop.
- [Get started immediately with Extension.js samples](https://extension.js.org/docs/getting-started/immediately.md): Build and run working browser extensions in minutes using Extension.js. Follow the fastest path from sample projects to a running dev environment.
- [Getting started with Extension.js](https://extension.js.org/docs/getting-started/index.md): Ship your first browser extension quickly with Extension.js, then level up with official templates and workflow guides as your project grows.
- [Extension project templates for React, Vue, and more](https://extension.js.org/docs/getting-started/templates.md): Generate browser extensions from official Extension.js templates for React, Vue, Svelte, TypeScript, and vanilla JS instead of building from scratch.
- [Extension.js hall of fame and contributors](https://extension.js.org/docs/hall-of-fame.md): Recognize the contributors who shaped Extension.js across the framework core, documentation site, examples, and developer experience tooling.
- [Background scripts and MV3 service workers](https://extension.js.org/docs/implementation-guide/background.md): Run extension-wide logic with MV2 background scripts or MV3 service workers. Extension.js compiles entries from manifest.json and applies reload behavior.
- [Content scripts with HMR and manifest entries](https://extension.js.org/docs/implementation-guide/content-scripts.md): Build page-integrated features with content scripts. Extension.js compiles manifest entries, wraps them for HMR, and emits predictable outputs.
- [CSS, Sass, and Less in browser extensions](https://extension.js.org/docs/implementation-guide/css.md): Style extension pages and content scripts with plain CSS, Sass, or Less. Extension.js routes styles by context and handles reload behavior automatically.
- [HTML entrypoints for extension pages](https://extension.js.org/docs/implementation-guide/html.md): Build extension UIs with plain HTML entrypoints. Extension.js handles asset wiring, script and style bundling, and dev-time update behavior for pages.
- [Extension icons and manifest declarations](https://extension.js.org/docs/implementation-guide/icons.md): Declare extension icons in manifest fields for branding and action UI. Extension.js validates paths, rewrites references, and emits icon assets reliably.
- [Extension implementation guide and runtime model](https://extension.js.org/docs/implementation-guide/index.md): Build browser extension features with the Extension.js runtime model. Covers manifest contracts, entrypoints, special folders, and browser constraints.
- [JavaScript and TypeScript in extensions](https://extension.js.org/docs/implementation-guide/javascript.md): Ship JavaScript and TypeScript across background, content scripts, and UI pages with one Extension.js pipeline powered by Rspack and SWC transforms.
- [JSON resources in extensions](https://extension.js.org/docs/implementation-guide/json.md): Use JSON resources like declarative net request rulesets and managed schemas in extensions. Extension.js validates and emits referenced JSON assets correctly.
- [Locales and internationalization](https://extension.js.org/docs/implementation-guide/locales.md): Ship localized extension metadata and UI strings with _locales handling. Extension.js discovers, validates, and emits locale JSON in dev and production.
- [Manifest.json compilation and output](https://extension.js.org/docs/implementation-guide/manifest-json.md): Treat manifest.json as the source of truth for entrypoints and assets. Extension.js compiles, rewrites paths, and emits a browser-ready manifest per target.
- [Extension messaging across contexts](https://extension.js.org/docs/implementation-guide/messaging.md): Move data across extension contexts with browser messaging APIs. Keep privilege boundaries clear between background, content scripts, and extension pages.
- [Permissions and host permissions](https://extension.js.org/docs/implementation-guide/permissions-and-host-permissions.md): Design least-privilege permission sets for your extension. Covers required, optional, and host permissions to improve user trust and review outcomes.
- [Browser storage APIs for extensions](https://extension.js.org/docs/implementation-guide/storage.md): Persist settings and runtime state with browser storage APIs. Covers local, sync, and session storage choices and their impact on service worker reliability.
- [Web accessible resources and build-time merging](https://extension.js.org/docs/implementation-guide/web-accessible-resources.md): Expose only the extension assets web pages need. Extension.js merges user-declared web_accessible_resources with build-time requirements per browser target.
- [What is Extension.js? Introduction and overview](https://extension.js.org/docs/index.md): Learn what Extension.js does, how to choose the right CLI command, and where to start based on your browser extension development workflow.
- [Babel integration for custom transforms](https://extension.js.org/docs/integrations/babel.md): Add Babel to an Extension.js project only when you need transforms SWC cannot cover. Keep SWC as the default and scope Babel to specific files.
- [ESLint integration for code quality](https://extension.js.org/docs/integrations/eslint.md): Keep extension code quality consistent with ESLint. Runs outside the Extension.js build pipeline through your scripts or CI for predictable linting results.
- [Integrations for Tailwind, ESLint, and more](https://extension.js.org/docs/integrations/index.md): Connect Extension.js with Tailwind CSS, PostCSS, ESLint, Prettier, Stylelint, Babel, and shadcn/ui for a complete extension development workflow.
- [PostCSS integration for CSS transforms](https://extension.js.org/docs/integrations/postcss.md): Transform CSS across extension pages and content scripts with PostCSS plugins like Autoprefixer. Extension.js detects your config and applies postcss-loader.
- [Prettier integration for code formatting](https://extension.js.org/docs/integrations/prettier.md): Keep formatting consistent across your extension codebase with Prettier. Runs from scripts, editor plugins, and CI outside the Extension.js build pipeline.
- [shadcn/ui components in extensions](https://extension.js.org/docs/integrations/shadcnui.md): Build extension UI with accessible, composable shadcn/ui components in a Tailwind-enabled React setup. Reuse design primitives across popup and options pages.
- [Stylelint integration for CSS linting](https://extension.js.org/docs/integrations/stylelint.md): Catch CSS issues early and keep stylesheet quality consistent across extension surfaces. Stylelint runs through scripts or CI alongside Extension.js builds.
- [Tailwind CSS for extension styling](https://extension.js.org/docs/integrations/tailwindcss.md): Style extension popups, options pages, sidebars, and content scripts with Tailwind utility classes. Supports both Tailwind v3 and v4 via PostCSS integration.
- [CSS modules for scoped extension styles](https://extension.js.org/docs/languages-and-frameworks/css-modules.md): Scope styles by default and avoid naming collisions across extension popups, options UIs, and pages. Zero-config CSS Modules via the Rspack CSS pipeline.
- [ECMAScript modules in extensions](https://extension.js.org/docs/languages-and-frameworks/ecmascript-modules.md): Use modern import/export syntax across background scripts, content scripts, and extension pages. Extension.js supports ESM through its Rspack pipeline.
- [Languages and frameworks guide](https://extension.js.org/docs/languages-and-frameworks/index.md): See which languages and frameworks Extension.js supports including TypeScript, React, Vue, Svelte, Preact, Sass, Less, CSS Modules, and WebAssembly.
- [Less and Less modules in extensions](https://extension.js.org/docs/languages-and-frameworks/less.md): Use Less and Less Modules across extension pages and UI components. Extension.js wires the preprocessor in Rspack and supports .less and .module.less.
- [Node APIs in browser extensions](https://extension.js.org/docs/languages-and-frameworks/node.md): Use browser-native APIs first, then selectively polyfill Node core modules when needed. Extension.js targets the browser runtime by default.
- [Preact for browser extensions](https://extension.js.org/docs/languages-and-frameworks/preact.md): Ship smaller extension UI bundles with Preact and keep a React-like developer experience. Extension.js auto-configures JSX transforms and compat aliases.
- [React for browser extensions](https://extension.js.org/docs/languages-and-frameworks/react.md): Build browser extension UIs with React using the default Extension.js pipeline. Auto-configured JSX transforms, aliases, and fast refresh for development.
- [Sass and Sass modules in extensions](https://extension.js.org/docs/languages-and-frameworks/sass.md): Scale extension styling with Sass variables, nesting, and module-scoped styles. Extension.js supports .scss, .sass, and their .module variants via Rspack.
- [Svelte for browser extensions](https://extension.js.org/docs/languages-and-frameworks/svelte.md): Build extension UIs with Svelte components. Extension.js auto-configures .svelte resolution, loader setup, and Svelte client aliases from your dependencies.
- [TypeScript for browser extensions](https://extension.js.org/docs/languages-and-frameworks/typescript.md): Build TypeScript browser extensions with zero bundler config. Extension.js supports TS across background, content scripts, and pages via Rspack and SWC.
- [Vue.js for browser extensions](https://extension.js.org/docs/languages-and-frameworks/vue.md): Build extension UIs with Vue single-file components. Extension.js detects Vue from your dependencies and configures SFC compilation and aliases automatically.
- [WebAssembly in browser extensions](https://extension.js.org/docs/languages-and-frameworks/webassembly.md): Use WebAssembly in browser extensions without custom bundler config. Extension.js ships built-in Wasm defaults in its Rspack pipeline for common workflows.
- [CI templates for extension builds](https://extension.js.org/docs/workflows/ci-templates.md): Automate lint, build, and E2E checks for browser extensions with ready-to-use CI templates for GitHub Actions and other platforms with Extension.js.
- [Dev mode update and reload behavior](https://extension.js.org/docs/workflows/dev-update-behavior.md): Know which file changes hot-update and which require a restart during development. Extension.js picks the lightest safe update mode per change automatically.
- [Global CLI flags for all commands](https://extension.js.org/docs/workflows/global-flags.md): Control Extension.js CLI behavior across all commands with global flags for telemetry opt-out, machine-readable JSON output, and verbose logging.
- [Extension development workflows](https://extension.js.org/docs/workflows/index.md): Practical workflow guides for Extension.js covering CI setup, E2E testing with Playwright, performance tuning, security review, and troubleshooting.
- [Extension performance playbook](https://extension.js.org/docs/workflows/performance-playbook.md): Keep extension startup fast and runtime overhead low across content scripts, service workers, and UI surfaces. Prevent common performance regressions.
- [Playwright E2E testing for extensions](https://extension.js.org/docs/workflows/playwright-e2e.md): Write repeatable end-to-end tests for browser extensions with Playwright. Test extension flows, UI rendering, and integrations in CI and local environments.
- [Extension security checklist](https://extension.js.org/docs/workflows/security-checklist.md): Reduce extension attack surface before release with a repeatable security review. Focus on least privilege, constrained runtime access, and input validation.
- [Troubleshooting Extension.js issues](https://extension.js.org/docs/workflows/troubleshooting.md): Fix common Extension.js issues fast with a practical triage path. Covers restart diagnostics, dependency setup, browser launch, and manifest path resolution.
- [The cross-browser extension framework](https://extension.js.org/index.md): Build cross-browser extensions for Chrome, Edge, and Firefox with one workflow. Extension.js handles manifest compilation, bundling, and HMR.

## OpenAPI Specs

- [openapi](https://extension.js.org/api-reference/openapi.json)

## Optional

- [GitHub](https://github.com/extension-js/extension.js)
- [npm](https://www.npmjs.com/package/extension)
- [Discord](https://discord.gg/v9h2RgeTSN)
- [X](https://twitter.com/extensionjs)