Docs
Blog
Docs
Blog

Build 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 build command in Extension.js is responsible for compiling your extension for production. This command creates optimized builds for different browsers, ensuring compatibility and performance. The build/ folder will contain subfolders for each targeted browser, each with the necessary code transforms and optimizations.

Usage

To use the build command, run:

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

Build Output

After running the build command, Extension.js generates optimized files for the specified browser. You will find the output inside the build/ folder, with separate subfolders for each browser (Chrome, Edge, etc.). These folders contain the bundled JavaScript, CSS, HTML, and other necessary assets for the extension to work in the targeted environment.

Example Output Structure:

build/
├── chrome/
│   ├── manifest.json
│   ├── background.js
│   ├── content.js
├── edge/
│   ├── manifest.json
│   ├── background.js
│   ├── content.js

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, builds the local extension. If a URL is provided, pulls the extension from remote source and builds it as a local extension process.cwd()
-b, --browser The browser that will run the extension Specifies the browser to build for (chrome, edge, all) "chrome"

Features

  • Cross-Browser Builds: You can build for multiple browsers in one go by specifying the --browser flag. If you set the flag to "all", Extension.js will generate builds for all supported browsers.
  • Optimized for Production: The build command optimizes the extension for production by applying minification and other performance improvements.
  • Custom Output: You can customize the output filename and format for your zip file by setting the --zipFilename option.

Example Build Command

To build for Chrome and generate a zip file, run the following:

npm
pnpm
yarn
npx extension@latest build my-extension --browser=chrome --zip=true --zipFilename=my-extension.zip

Build Process Overview

During the build process, the following steps take place:

  • Manifest Handling: The manifest file is processed, ensuring that all required fields for the targeted browser are present.
  • Asset Bundling: JavaScript, CSS, and other assets are bundled and minified for optimal performance.
  • Browser-Specific Transforms: Depending on the target browser, Extension.js applies the necessary code transformations.
  • Zip Generation: If the --zip flag is passed, the build output will be packaged into a zip file for easy distribution to the browser’s extension store.

Best Practices

  • Target All Browsers: For cross-browser compatibility, always build for multiple browsers by using the --browser=all option.
  • Check Build Logs: After the build, review the logs to ensure there are no warnings or errors. The build logs will highlight any issues with compatibility or missing assets.
  • Optimize Your Manifest: Ensure that your manifest.json is optimized and fully compatible with all targeted browsers to avoid build issues.
  • Custom Build Artifacts: You can define custom names for your build artifacts using the --zipFilename option, which is useful for organizing builds.

Next Steps