Docs
Blog
Docs
Blog

Dev Command

Warning: This feature is a work in progress and may be incomplete or subject to change. If you see an error or something that could be improved, please make a pull-request. The link that documents this feature can be found at the bottom of the page.

The dev command watches for changes in your extension's files, recompiles them, and reloads the extension in real-time. If you provide a URL, Extension.js will download and run the extension as if it were local.

How Does It Work?

For development frameworks, it's an industry-standard practice to have a development server that watches for changes in your files and recompiles them in real time. Given the complex nature of browser extensions, the dev command in Extension.js handles the watch and recompile process for all the different contexts (HTML or not) of your extension.

The dev command also provides a way to run remote extensions by providing a URL. This is useful when you want to test an extension from source without having to clone the repository.

Usage

You can run the dev command with the following syntax:

npm
pnpm
yarn
extension dev [extension-path | extension-url] [options]

Path Option

The dev command can also accept a specific directory where you want to dev the extension. If no path is provided, it defaults to the current working directory.

npm
pnpm
yarn
extension dev path/to/my-extension --template=react

In this example, the extension is developed in the path/to/my-extension directory.

Arguments and Flags

Below is a breakdown of the available flags for the dev command:

Flag Argument What it does Defaults to
[path or url] Extension path or remote URL If a path is defined, it loads the local extension. If a URL is provided, it pulls the extension from a remote source and loads it as a local extension process.cwd()
--polyfill Boolean Enables compatibility for the browser.* API in Chromium-based browsers false
--profile Profile path Specifies a path to a browser profile for testing default
-b, --browser Browser to run the extension Specifies the browser to run (chrome, edge, firefox, all) "chrome"
--chromium-binary Path to the Chromium binary Provides the path to a custom Chromium-based browser binary Read more undefined
--gecko-binary Path to the Gecko binary Provides the path to a custom Gecko-based browser binary Read more undefined
--starting-url URL Starting URL for testing with the extension chrome://newtab
--open Boolean Whether or not to automatically open the browser upon starting dev true

Examples

Running a Local Extension

Demo Video

npm
pnpm
yarn
extension dev ./my-extension

Running a Remote Extension

Demo Video

npm
pnpm
yarn
extension dev https://example.com/my-extension

Running in Firefox

Demo Video

npm
pnpm
yarn
extension dev ./my-extension --browser firefox

Running in All Browsers at Once

Demo Video

npm
pnpm
yarn
extension dev ./my-extension --browser all

Running in Brave as a Custom Binary

Demo Video

npm
pnpm
yarn
extension dev ./my-extension --gecko-binary /path/to/brave

Best Practices

  • Browser Compatibility: Test your extension in different browsers to ensure compatibility with the target audience.
  • Polyfilling: If Firefox or a Gecko-based browser is also a target, use the --polyfill flag to enable compatibility for the browser.* API in Chromium-based browsers.

Next Steps