# crxjs/chrome-extension-tools **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/crxjs-chrome-extension-tools).** _How this analysis was created: the description and tags below were written by an AI model that read this project's README and public documentation pages; stars, license and language come straight from the GitHub API. The model does not read the source code._ 4,112 stars · 243 forks · TypeScript ## Links - GitHub: https://github.com/crxjs/chrome-extension-tools - Homepage: https://crxjs.dev - awesome-repositories: https://awesome-repositories.com/repository/crxjs-chrome-extension-tools.md ## Topics `chrome-extension` `javascript` `manifest-v2` `manifest-v3` `npm-package` `rollup` `rollup-js` `rollup-plugin` `typescript` `vite-plugin` `vitejs` ## Description This project is a set of build tools and a Vite plugin for browser extension development. It functions as a build tool and hot module replacement framework that automates asset bundling by using the extension manifest as the primary source of truth. The tooling provides a zero-config workflow for cross-browser extensions, integrating real-time code updates into the development process. This allows specific components and scripts to be updated in the browser without requiring a full manual reload of the extension. The suite also includes an end-to-end testing framework and utility for browser automation. These tools enable browser context control, manifest inspection, and the ability to access extension pages such as popups and side panels for verification in a real browser environment. ## Tags ### Web Development - [Chrome Extensions](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-extension-development/browser-extensions/chrome-extensions.md) — Provides a modern build and bundling system specifically designed for developing Chrome and other browser extensions. - [HMR Frameworks](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-extension-development/browser-extensions/chrome-extensions/hmr-frameworks.md) — Uses a persistent connection to push real-time code updates to the browser without requiring a full extension reload. - [Cross-Browser Extension Frameworks](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-extension-development/browser-extensions/cross-browser-extension-frameworks.md) — Offers a unified, zero-config build architecture for packaging web code into extensions compatible with multiple browser engines. - [Vite Plugins](https://awesome-repositories.com/f/web-development/next-js-development/vite-plugins.md) — Provides a Vite plugin that integrates hot module replacement and automated builds into the development workflow. - [Runtime Script and CSS Injection](https://awesome-repositories.com/f/web-development/custom-page-frameworks/page-content-injections/script-injections/runtime-script-and-css-injection.md) — Dynamically injects updated JavaScript and CSS into browser tabs at runtime to enable live updates for content scripts. ### Development Tools & Productivity - [Asset Bundling](https://awesome-repositories.com/f/development-tools-productivity/build-tooling/build-performance-optimization/build-optimization-tools/bundle-optimizers/asset-bundling.md) — Automatically processes and bundles various asset types into optimized production packages using the extension manifest. ([source](https://crxjs.dev/guide/introduction)) - [Browser Extension Developer Tools](https://awesome-repositories.com/f/development-tools-productivity/extension-development-utilities/browser-extension-developer-tools.md) — Provides specialized utilities for building browser extensions, automating asset bundling based on the manifest file. - [Hot Module Replacement](https://awesome-repositories.com/f/development-tools-productivity/hot-module-replacement.md) — Enables real-time updates of extension components and styles without requiring a full manual browser reload. ([source](https://cdn.jsdelivr.net/gh/crxjs/chrome-extension-tools@main/README.md)) - [Vite Build Pipelines](https://awesome-repositories.com/f/development-tools-productivity/vite-build-pipelines.md) — Integrates with the Vite build process to transform modern assets into browser-compatible extension formats. - [Extension Hot Reloaders](https://awesome-repositories.com/f/development-tools-productivity/hot-code-reloading/desktop-hot-reloaders/extension-hot-reloaders.md) — Implements hot reloading mechanisms that watch source files to trigger live UI updates within the browser extension. ### Game Development - [Manifest-Based Asset Mapping](https://awesome-repositories.com/f/game-development/asset-loading/manifest-based-asset-mapping.md) — Uses the extension manifest to automatically map and associate source files with their output locations in the final bundle. ### Software Engineering & Architecture - [Dependency Graph Analysis](https://awesome-repositories.com/f/software-engineering-architecture/dependency-manifests/dependency-graph-analysis.md) — Analyzes the extension manifest to automatically discover and bundle all necessary scripts and assets. ### Testing & Quality Assurance - [Extension Page Access](https://awesome-repositories.com/f/testing-quality-assurance/extension-page-access.md) — A testing utility that retrieves handles for popup and side panel pages to verify content and behavior during automated test sequences. ([source](https://crxjs.dev/guide/test/api)) - [Browser Extension Testing Tools](https://awesome-repositories.com/f/testing-quality-assurance/general-testing-utilities/test-utilities-assertions/browser-ui-interaction/browser-extension-testing-tools.md) — Provides capabilities for loading and automating browser extensions within a real environment for end-to-end verification. - [End-to-End Testing Frameworks](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/testing-frameworks/end-to-end-testing-suites/end-to-end-testing-frameworks.md) — Provides a specialized environment to execute browser extension tests and verify full-stack functionality in a real browser. ([source](https://crxjs.dev/guide/test/installation)) - [Headless Browser Controllers](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/testing-frameworks/test-frameworks/browser-and-ui-testing/browser-automation-frameworks/headless-browser-controllers.md) — Provides controllers for managing headless browser instances to execute end-to-end tests on extension states.