extension.js: The Cross-Browser Extension Framework

Introduction

extension.js is a robust, cross-browser extension framework designed to streamline the development of browser extensions. With 4438 stars and 118 forks, this TypeScript-based project simplifies the creation of extensions for various browsers, offering fast builds, a unified interface, and a zero-configuration setup. It supports modern web standards and popular frameworks, making it an ideal choice for developers looking to build efficient and compatible browser add-ons.

You can explore the project further on its GitHub repository.

Installation

Getting started with extension.js is straightforward. You can create a new extension project using the create command, which also supports pnpm, yarn, and bun:

npx extension@latest create my-extension
cd my-extension
npm run dev

For existing projects, you can integrate extension.js by installing it as a devDependency and linking its commands in your package.json scripts:

npm install extension@latest --save-dev

Then, update your package.json:

{
  "scripts": {
    "build": "extension build",
    "dev": "extension dev",
    "preview": "extension preview"
  },
  "devDependencies": {
    "extension": "latest"
  }
}

Run npm run dev to develop, npm run build for production builds, and npm run preview to visualize the production build.

Examples

extension.js makes it easy to start developing by integrating with existing samples. For instance, you can immediately begin working on a Chrome Extension Sample:

npx extension@latest dev https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.page-redder --browser=edge

This command will set up and run the page-redder sample from Google Chrome Extension Samples, specifically targeting the Edge browser. You can also explore various examples directly from the project's examples directory.

Why Use extension.js?

Developers choose extension.js for several compelling reasons:

• Cross-Browser Compatibility: Develop once, deploy across Chrome, Edge, Firefox, and more, thanks to its unified interface.
• Fast Builds & Zero Configuration: Enjoy rapid development cycles without the hassle of complex setup.
• Modern Framework Support: Seamlessly integrate with popular frameworks like React, Vue, Svelte, and Preact, alongside TypeScript and ESNext.
• Manifest V3 Ready: Built with the latest browser extension standards in mind.
• Flexible Development: Whether starting a new project or integrating into an existing one, extension.js provides clear pathways.
• Browser-Specific Development: Easily target specific browsers with command-line flags, including options for custom browser binaries.

Links

• GitHub Repository
• npm Package
• Discord Community
• License (MIT)