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.

How Does It Work?

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.

Usage

To use the build command, run:

npm
pnpm
yarn
extension 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:

dist/
├── chrome/
│   ├── manifest.json
│   ├── background/service_worker.js
│   ├── content_scripts/content-0.js
├── edge/
│   ├── manifest.json
│   ├── background/service_worker.js
│   ├── content_scripts/content-0.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"
--zip-filename String Sets a custom filename for the output zip file extension.zip
--zip Boolean Enables zipping of the build output false
--zip-source Boolean Zips the source code alongside the build artifacts false
--polyfill Boolean Enables polyfill for older browsers false
--silent Boolean Suppresses build logs for cleaner output false

Examples

Building with Zip Output and Custom Filename

Demo Video

npm
pnpm
yarn
extension build ./my-extension --browser=edge,chrome --zip --zipFilename=my-extension.zip

In this example, the build will target Edge and Chrome, with the output zipped and saved as my-extension.zip.

Building with Silent Output

Demo Video

npm
pnpm
yarn
extension build ./my-extension --browser=chrome --silent

Here, the build is for Chrome, and the --silent flag is used to suppress logs for a clean output.

Building with Polyfill Support

Demo Video

npm
pnpm
yarn
extension build ./my-extension --browser=all --polyfill

In this example, the build targets all supported browsers and includes polyfills for legacy compatibility.

Best Practices

  • 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 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 --zip-filename option, which is useful for organizing builds.

Next Steps