{"id":13169,"library":"extension","title":"Extension.js: Cross-Browser Extension Development","description":"extension.js is a zero-configuration command-line interface (CLI) and development toolkit designed for creating, developing, and building cross-browser web extensions. It streamlines the development workflow by providing integrated tools for producing extensions compatible with major browsers including Chrome, Edge, Firefox, and Safari, all without requiring complex or manual build configurations. The package is currently stable at version 3.13.5 (as of April 11, 2026) and demonstrates a rapid release cadence with frequent patches and minor versions, highlighting active maintenance and quick turnaround on bug fixes and features. Its key differentiators include a 'zero-config' philosophy, native TypeScript support, and first-class integration with popular frameworks like React, aiming to significantly reduce setup overhead for developers targeting diverse browser environments. Beyond its CLI, extension.js also offers a programmatic API for `create` and `develop` operations, enabling custom build pipeline integration.","status":"active","version":"3.13.5","language":"javascript","source_language":"en","source_url":"https://github.com/extension-js/extension.js","tags":["javascript","zero-config","build","develop","browser","extension","chrome extension","edge extension","firefox extension","typescript"],"install":[{"cmd":"npm install extension","lang":"bash","label":"npm"},{"cmd":"yarn add extension","lang":"bash","label":"yarn"},{"cmd":"pnpm add extension","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The programmatic API for `create` is available as a named ESM export. CommonJS `require` is not officially supported for this interface, requiring Node.js ESM or a bundler.","wrong":"const { create } = require('extension');","symbol":"create","correct":"import { create } from 'extension';"},{"note":"The programmatic API for `develop` is available as a named ESM export. Ensure your project is configured for ESM imports if using directly in Node.js.","wrong":"const { develop } = require('extension');","symbol":"develop","correct":"import { develop } from 'extension';"},{"note":"While the `extension` package exports programmatic utilities, its primary interface for many users is via the `npx extension` command-line tool. There is no default export for the CLI itself.","wrong":"import extension from 'extension'","symbol":"Extension CLI","correct":"npx extension <command> [args]"}],"quickstart":{"code":"import { create, develop } from 'extension';\nimport path from 'path';\nimport { fileURLToPath } from 'url';\nimport { rmSync, existsSync } from 'fs';\n\nconst __filename = fileURLToPath(import.meta.url);\nconst __dirname = path.dirname(__filename);\nconst projectPath = path.join(__dirname, 'temp-extension-project');\n\nasync function runExtensionDevFlow() {\n  if (existsSync(projectPath)) {\n    console.log(`Removing existing project directory: ${projectPath}`);\n    rmSync(projectPath, { recursive: true, force: true });\n  }\n\n  console.log('Creating new React TypeScript extension project...');\n  await create({\n    name: 'temp-extension-project',\n    template: 'react-typescript',\n    output: __dirname,\n  });\n  console.log(`Project created at ${projectPath}`);\n\n  console.log('Starting development server for the new extension...');\n  const devServer = await develop({\n    source: projectPath,\n    port: 8080,\n    browser: 'chromium', // Automatically opens Chrome with the extension loaded\n    watch: true // Enable hot-reloading\n  });\n\n  console.log(`Development server running on port ${devServer.port} for ${devServer.browser}.`);\n  console.log('The browser should have opened automatically with the extension loaded.');\n  console.log('Press Ctrl+C in this terminal to stop the development server.');\n\n  // In a real application, you might want to keep a reference to devServer\n  // and implement a graceful shutdown mechanism.\n}\n\nrunExtensionDevFlow().catch(console.error);\n","lang":"typescript","description":"This quickstart demonstrates how to programmatically create a new React TypeScript extension project and then launch its development server, automatically opening it in a Chromium browser with live reloading enabled."},"warnings":[{"fix":"Remove any usage of the `extensionStart` option from your `develop` calls. The `develop` function will now handle the entire lifecycle.","message":"The `extensionStart` option was removed from the programmatic `develop` API. The CLI now orchestrates the build and preview stages internally, simplifying the API.","severity":"breaking","affected_versions":">=3.13.0"},{"fix":"Upgrade your Node.js environment to version 18 or newer (e.g., using nvm, fnm, or directly installing).","message":"Node.js version requirements were updated. The `extension` CLI and programmatic API now require Node.js version 18 or higher to run.","severity":"breaking","affected_versions":"<=3.x"},{"fix":"Upgrade to version `3.13.5` or later. Alternatively, specify a static, non-zero port number using `--port <number>`.","message":"Specifying `--port 0` (for an OS-assigned ephemeral port) could cause the development server to crash in earlier versions.","severity":"gotcha","affected_versions":"<3.13.5"},{"fix":"Upgrade to version `3.13.4` or later to benefit from improved dependency resolution logic.","message":"User project dependency resolution for `pnpm dlx` and `npx` builds could fail or behave unexpectedly in certain scenarios.","severity":"gotcha","affected_versions":"<3.13.4"},{"fix":"Upgrade to version `3.13.4` or later to ensure the `--install` flag is correctly honored.","message":"The `--install` flag, intended to skip dependency installation during `build` or `dev` commands, was not respected in previous versions, leading to unnecessary installs.","severity":"gotcha","affected_versions":"<3.13.4"},{"fix":"Upgrade to version `3.12.0` or later to mitigate the Preact VNode injection vulnerability.","message":"A vulnerability (CVE-2026-22028) related to Preact VNode injection was fixed. Projects using affected versions are susceptible to potential XSS if untrusted content is rendered via Preact components.","severity":"breaking","affected_versions":"<3.12.0"},{"fix":"Upgrade to version `3.14.0-next.0` or later to receive the fix for the `follow-redirects` auth header leak vulnerability.","message":"A vulnerability (GHSA-r4q5-vmmm-2653) was discovered in `follow-redirects` affecting `extension.js` versions due to a potential auth header leak during redirects.","severity":"breaking","affected_versions":"<3.14.0-next.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Update your Node.js environment to version 18 or newer. Use `nvm install 18` or similar version manager commands, then `nvm use 18`.","cause":"Attempting to run `extension` commands or programmatic API with an older Node.js version.","error":"Node.js version must be >= 18.0.0"},{"fix":"Remove the `extensionStart` option from your `develop` function calls. The function now orchestrates the full build and preview process.","cause":"Using the deprecated `extensionStart` option in the programmatic `develop` function after version 3.13.0.","error":"Error: The develop function received an unrecognized option: extensionStart"},{"fix":"Upgrade `extension` to version `3.13.5` or newer. Alternatively, specify a different, non-zero port number.","cause":"Using `--port 0` in `extension develop` or `develop()` API call, which caused a crash in affected versions.","error":"Error: Could not start dev server. Port 0 is not a valid option."},{"fix":"Upgrade `extension` to version `3.13.4` or newer to fix project dependency resolution issues.","cause":"Dependency resolution issues encountered during `npx` or `pnpm dlx` builds for user projects in `extension` versions prior to 3.13.4.","error":"Error: Failed to resolve dependencies for user project in build/dev command."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"extension"}