Docs
Blog
Docs
Blog

What is Extension.js?

Extension.js is a command-line tool that simplifies the development of cross-browser extensions. It provides built-in support for TypeScript, WebAssembly, and next-generation JavaScript. You use the native browser extension APIs to extend the functionality of web browsers, and Extension.js to develop them using with a modern development stack.

If you're new to browser extension development, Extension.js is a great place to start. It provides a simple and intuitive way to create, develop, and build browser extensions. If you're already familiar with browser extension development, Extension.js can help you streamline your workflow and make your development process more efficient.

Create a New Extension

Extension.js runs via the extension package. The package has a create command that generates the foundation of your next extension project (as shown in the demo above). You can also use the --template flag to specify a template.

npm
pnpm
yarn
npx extension@latest create <your-extension-name>

For a list of all supported templates, check out the Templates page.

Use with an Existing Extension

If you already have an extension and are using a package manager, you can install the extension package and manually create the scripts needed to run your extension. Refer to the demo above or follow these steps:

Step 1 - Install the extension package as a devDependency

npm
pnpm
yarn
npm install extension@latest --save-dev

Step 2 - Link your npm scripts to the extension commands

{
  "scripts": {
    "build": "extension@latest build",
    "dev": "extension@latest dev",
    "start": "extension start"
  },
  "devDependencies": {
    "extension": "latest"
  }
}

That's it! You're all set.

  • Run npm run dev to develop your extension.
  • Run npm run start to preview your extension in production mode.
  • Run npm run build to bundle your extension for production.

Best Practices

  • Keep it Simple: Start with a simple extension and gradually add more features.

Next Steps