{"id":13170,"library":"extension-develop","title":"Extension.js Development CLI","description":"extension-develop is a command-line interface (CLI) tool for developing, building, previewing, and packaging cross-browser extensions built with Extension.js. It supports Manifest V3 (MV3) projects for both Chromium and Firefox environments, providing essential development features like a dev server with live/hot-reloading, watch mode, and a robust build system. The current stable version is 3.13.5, with frequent patch and minor releases, often multiple times a week, indicating active development. A key differentiator is its recent programmatic accessibility, allowing developers to integrate its build and preview capabilities, along with an event-driven API (BuildEmitter), directly into larger JavaScript/TypeScript applications, moving beyond solely CLI usage. It includes features for content scripts, background scripts, and managing the entire extension lifecycle.","status":"active","version":"3.13.5","language":"javascript","source_language":"en","source_url":"https://github.com/extension-js/extension.js","tags":["javascript","webextension","browser-extension","manifest-v3","mv3","cross-browser","development-server","dev-server","live-reload","typescript"],"install":[{"cmd":"npm install extension-develop","lang":"bash","label":"npm"},{"cmd":"yarn add extension-develop","lang":"bash","label":"yarn"},{"cmd":"pnpm add extension-develop","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary programmatic entry point to start the development server. ESM-only for programmatic use cases.","wrong":"const develop = require('extension-develop');","symbol":"develop","correct":"import { develop } from 'extension-develop';"},{"note":"Access the event emitter for build lifecycle events when using `develop` programmatically.","symbol":"BuildEmitter","correct":"import { BuildEmitter } from 'extension-develop';"},{"note":"TypeScript type for configuring the `develop` function. Use `import type` for type-only imports.","wrong":"import { DevelopOptions } from 'extension-develop';","symbol":"DevelopOptions","correct":"import type { DevelopOptions } from 'extension-develop';"}],"quickstart":{"code":"import { develop, BuildEmitter } from 'extension-develop';\nimport path from 'node:path';\n\nconst projectRoot = path.resolve('./my-extension-project');\n\nasync function startDevServer() {\n  const emitter = new BuildEmitter();\n\n  emitter.on('build_start', () => console.log('Build started...'));\n  emitter.on('build_end', (result) => {\n    if (result.success) {\n      console.log(`Build successful in ${result.durationMs}ms`);\n    } else {\n      console.error('Build failed:', result.errors);\n    }\n  });\n  emitter.on('extension_reload', () => console.log('Extension reloaded in browser.'));\n\n  try {\n    const devProcess = await develop({\n      root: projectRoot,\n      port: 8000,\n      browser: 'chromium',\n      open: true,\n      install: true,\n      logger: console,\n      emitter,\n      // Example env vars for a content script or background script\n      env: { API_KEY: process.env.MY_API_KEY ?? 'default_api_key' }\n    });\n\n    console.log(`Development server running on port ${devProcess.port}`);\n    console.log(`Open your browser to ${devProcess.url}`);\n\n    // To stop the server programmatically after some time (e.g., for testing)\n    // setTimeout(() => {\n    //   devProcess.close();\n    //   console.log('Development server closed.');\n    // }, 60000);\n\n  } catch (error) {\n    console.error('Failed to start development server:', error);\n    process.exit(1);\n  }\n}\n\nstartDevServer();","lang":"typescript","description":"This quickstart demonstrates how to programmatically start the extension development server, subscribe to build events using the BuildEmitter, and configure development options for a project. It uses a fictional API key environment variable for demonstration."},"warnings":[{"fix":"Migrate programmatic usage from `extensionStart` to the `develop` function, consolidating build and preview configurations directly into `develop`'s options object.","message":"The `extensionStart` function was removed from the programmatic API. The CLI now orchestrates the build and preview steps. When using `develop` programmatically, ensure you're passing all necessary options, as `extensionStart` is no longer a separate, low-level entry point.","severity":"breaking","affected_versions":">=3.13.0"},{"fix":"Upgrade to `extension-develop@3.14.0` or higher once released, or the corresponding next version if running pre-releases (e.g., `3.14.0-next.0`).","message":"A vulnerability in the `follow-redirects` dependency (GHSA-r4q5-vmmm-2653) could lead to authentication header leakage during redirects. This affects network requests made internally by the CLI.","severity":"security","affected_versions":">=3.14.0-next.0 (fix shipped in next, stable update pending)"},{"fix":"Upgrade to `extension-develop@3.12.0` or higher to receive the patch for CVE-2026-22028. Regularly check for security advisories.","message":"A critical Preact VNode injection vulnerability (CVE-2026-22028) was identified and fixed. This could potentially allow arbitrary code execution in certain contexts if user-controlled input was rendered via Preact components within the extension.","severity":"security","affected_versions":">=3.12.0"},{"fix":"If using an older version, avoid setting `--port 0` and instead specify a fixed, available port number. Upgrade to `extension-develop@3.13.5` or later to safely use `--port 0`.","message":"Prior to version 3.13.5, setting the `--port` flag to `0` (which typically requests an OS-assigned ephemeral port) would cause the development server to crash. This has been resolved.","severity":"gotcha","affected_versions":"<3.13.5"},{"fix":"Upgrade to `extension-develop@3.13.4` or later, which includes fixes for improved user project dependency resolution across various package managers.","message":"Issues were reported with user project dependency resolution when using package managers like `pnpm dlx` or `npx` for building. This could lead to build failures due to missing dependencies in the user's project context.","severity":"gotcha","affected_versions":"<3.13.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade to `extension-develop@3.13.5` or later, or specify a specific, available port number (e.g., `extension-develop --port 8000`).","cause":"Using `--port 0` to request an OS-assigned port on versions prior to 3.13.5.","error":"Error: A valid port was not provided or could not be assigned. The dev server crashed."},{"fix":"Upgrade to `extension-develop@3.14.0` (or `3.14.0-next.0` for pre-release) or higher to get the patched version of `follow-redirects`.","cause":"The `follow-redirects` dependency, used internally by the CLI, had a vulnerability (GHSA-r4q5-vmmm-2653).","error":"Error: Authentication header potentially leaked during redirect to an external domain."},{"fix":"Upgrade to `extension-develop@3.13.4` or later. Ensure your project's `node_modules` are correctly installed by running `npm install`, `yarn install`, or `pnpm install` in your project root.","cause":"Issues with user project dependency resolution, particularly when using `pnpm dlx` or `npx` for CLI execution, prior to version 3.13.4.","error":"Error: Failed to resolve project dependencies. Are they installed correctly?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"extension-develop"}