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.

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

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.

Features

  • Production-like Environment: The preview command runs the extension in a browser with production-like settings, providing a realistic preview of the extension's final behavior.
  • Support for Remote Extensions: If the path is a URL, Extension.js will download and preview the extension from that remote source, just like local extensions.
  • Browser Selection: You can specify which browser (chrome, edge, etc.) should preview the extension.
  • Minimal Setup: The preview command avoids full production builds, offering a faster way to check production behavior.

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()
-b, --browser The browser that will run the extension Specifies the browser (chrome, edge, all) "chrome"

Example Preview Command

To preview your extension for Edge, run the following command:

npm
pnpm
yarn
npx extension@latest preview my-extension --browser=edge

Preview Process Overview

When running the preview command, Extension.js follows these steps:

  1. Manifest Validation: Ensures that the manifest.json file exists in the project directory.
  2. Production-like Bundle: Bundles the extension files without creating a full production build. The files are optimized but not stored permanently.
  3. Browser Launch: Launches a browser instance and previews the extension, simulating a production environment.
  4. Real-Time Feedback: Displays progress messages and possible warnings/errors during the preview.

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.
  • Use Remote URLs: If you want to test an extension stored in a remote repository, simply provide the repository URL as the argument.
  • Set Custom Ports: If you're running multiple browser instances, use custom ports with the --port flag to avoid conflicts.

Next Steps