extension-js / extension.js
Create, develop, build, and preview browser extensions for Chrome, Firefox, Edge, and Safari.
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing extension-js/extension.js in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context on-demand, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Overview (README excerpt)
Crawler view[npm-version-image]: https://img.shields.io/npm/v/extension.svg?color=0971fe [npm-version-url]: https://www.npmjs.com/package/extension [npm-downloads-image]: https://img.shields.io/npm/dm/extension.svg?color=0971fe [npm-downloads-url]: https://www.npmjs.com/package/extension [action-image]: https://github.com/extension-js/extension.js/actions/workflows/ci.yml/badge.svg?branch=main&color=0971fe [action-url]: https://github.com/extension-js/extension.js/actions [discord-image]: https://img.shields.io/discord/1253608412890271755?label=Discord&logo=discord&style=flat&color=0971fe [discord-url]: https://discord.gg/v9h2RgeTSN [snyk-image]: https://snyk.io/test/github/extension-js/extension/badge.svg?color=0971fe [snyk-url]: https://snyk.io/test/github/extension-js/extension [![Version][npm-version-image]][npm-version-url] [![Downloads][npm-downloads-image]][npm-downloads-url] [![CI][action-image]][action-url] [![Discord][discord-image]][discord-url] Extension.js > The cross-browser extension framework • Create a new extension — How to create a new extension. • Watch demo — See how creating a new extension works. • Start from an example — Start from a working baseline. • I have an extension — Use only specific parts of Extension.js. Create cross-browser extensions without manual build configuration. Use Extension.js to develop, build, and preview across browsers with a unified workflow. Create a new extension Use the command to generate a new extension. Also works with pnpm, yarn, and bun. Watch demo Watch demo Web standards and framework support | | | | | | | | | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | | ESNext Try out | TypeScript Try out | WASM (soon) | React Try out | Vue Try out | Svelte Try out | Preact Try out | Get started from a sample Get started Start developing an extension using a sample from Chrome Extension Samples See the example below where we request the sample page-redder from Google Chrome Extension Samples. Watch demo Watch demo Try Yourself I have an extension If you have an existing extension which is using a package manager, you can install the Extension.js package and manually create the scripts used to run your extension. See how it works See how it works **Step 1 - Install extension as a ** **Step 2 - Link your npm scripts with the executable Extension.js commands** Done. You are all set! • To develop the extension, run . • To build the extension in production mode, run . • To visualize the extension in production mode, run and . Using a specific browser for development | | | | | | | | :---------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | :----------------------------------------------------------------------------: | :---------------------------------------------------------------------------: | :-----------------------------------------------------------------------------: | :----------------------------------------------------------------------------: | | Chrome browser ✅ | Edge browser ✅ | Firefox browser ✅ | Safari browser (soon) | Chromium-based ✅ | Gecko-based ✅ | Browser flags and custom binaries Use these flags with , , or : • Select a browser: • Custom Chromium binary: • Custom Gecko (Firefox) binary: Examples: Sponsors Browser testing via License MIT (c) Cezar Augusto and the Extension.js Authors.