Docs
Blog
Docs
Blog

Preview 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 preview command allows you to run your extension in a production-like environment without making a final build. It simulates how the extension will behave in a production browser environment. This is helpful for testing before officially deploying or building the extension.

How Does It Work?

The build command compiles your extension and creates a production-ready package that the preview command can run. The preview command runs the production-ready package in a browser environment, allowing you to test the extension's functionality.

Usage

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

Path Option

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

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

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

Arguments And Flags

Flag Argument What it does Defaults to
[path or url] The extension path or the remote extension URL If a path is defined, previews the local extension. If a URL is provided, pulls the extension from remote source and previews it as a local extension process.cwd()
--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

Examples

Previewing a Local Extension

Demo Video

npm
pnpm
yarn
extension preview ./my-extension

Previewing a Remote Extension

Demo Video

npm
pnpm
yarn
extension preview https://url-to-your-extension

Previewing in Edge and Chrome

Demo Video

npm
pnpm
yarn
extension preview ./my-extension --browser=edge,chrome

Best Practices

  • Test Before Building: Always use preview to test how your extension will behave in production before using the build command for the final package.
  • Cross-Browser Testing: Use the --browser flag to test your extension in different browsers.

Next Steps