Make it Easy to Develop Cross-Browser Extensions#

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.

With Extension.js, you work directly with native browser extension APIs — there’s no abstraction layer, so you have full control over the functionality of your extensions. 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 deploy 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#

The extension package has a default 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.

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 Extension.js as a devDependency#

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.

Next Steps#

• Learn how to Create Your First Extension.
• Have an idea? Explore the built-in Templates.