# lxieyang/chrome-extension-boilerplate-react

**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/lxieyang-chrome-extension-boilerplate-react).**

3,941 stars · 1,161 forks · JavaScript · MIT · archived

## Links

- GitHub: https://github.com/lxieyang/chrome-extension-boilerplate-react
- awesome-repositories: https://awesome-repositories.com/repository/lxieyang-chrome-extension-boilerplate-react.md

## Topics

`boilerplate` `chrome-extension` `javascript` `npm` `react` `typescript` `webpack`

## Description

This project is a pre-configured development environment and boilerplate for building Chrome extensions using React and Webpack. It provides a structured project layout and a build system designed to bundle content scripts and background pages into a browser-ready manifest format.

The toolkit emphasizes development speed and code quality through a hot reloading system that automatically refreshes the browser upon saving source files. It integrates TypeScript to provide static type definitions for browser extension APIs, ensuring type safety and intelligent code completion during development.

The project also covers workflow automation and configuration management, including environment-based secret injection to keep sensitive keys out of version control and a module bundling process that separates content scripts from background logic.

## Tags

### Web Development

- [Browser Extension Development](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-extension-development.md) — Provides a pre-configured framework and project layout for building and packaging browser extensions. ([source](https://github.com/lxieyang/chrome-extension-boilerplate-react#readme))
- [Development Boilerplates](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-extension-development/browser-extensions/chrome-extensions/development-boilerplates.md) — Ships a pre-configured React and Webpack project structure specifically designed for building Chrome extensions.
- [Browser Extensions](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-extension-development/browser-extensions.md) — Provides a Webpack-based build system to bundle content scripts and background pages into a browser-ready manifest.
- [Chrome Extensions](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-extension-development/browser-extensions/chrome-extensions.md) — Provides a pre-configured project structure specifically tailored for Chrome extension development. ([source](https://github.com/lxieyang/chrome-extension-boilerplate-react/blob/master/.eslintrc))
- [Browser Scripting Tools](https://awesome-repositories.com/f/web-development/browser-scripting-tools.md) — Packages JavaScript logic for execution within the context of web pages and manages manifest registration.
- [Content Script Injection Architectures](https://awesome-repositories.com/f/web-development/custom-page-frameworks/page-content-injections/script-injections/content-script-injection-architectures.md) — Implements an architecture for packaging and injecting content scripts into web pages. ([source](https://github.com/lxieyang/chrome-extension-boilerplate-react#readme))
- [Extension Content Script Bundles](https://awesome-repositories.com/f/web-development/static-asset-embedding/compiled-script-bundles/extension-content-script-bundles.md) — Writes specific entry points to disk for use as browser scripts while supporting hot reloading elsewhere. ([source](https://github.com/lxieyang/chrome-extension-boilerplate-react/blob/master/README.md))
- [Chrome Extension Workflow Automation](https://awesome-repositories.com/f/web-development/browser-integration-utilities/browser-extension-development/browser-extensions/chrome-extensions/chrome-extension-workflow-automation.md) — Speeds up the development cycle through automatic browser refreshing and environment secret management.

### Development Tools & Productivity

- [Extension Hot Reloaders](https://awesome-repositories.com/f/development-tools-productivity/hot-code-reloading/desktop-hot-reloaders/extension-hot-reloaders.md) — Implements a hot reloading system that automatically refreshes the browser when extension source files are saved.
- [Module Bundling](https://awesome-repositories.com/f/development-tools-productivity/source-bundling/module-bundling.md) — Uses Webpack for module bundling to compile React components and assets into extension scripts.
- [Browser Reload Triggers](https://awesome-repositories.com/f/development-tools-productivity/browser-reload-triggers.md) — Triggers automatic browser page refreshes whenever source files are saved during development. ([source](https://github.com/lxieyang/chrome-extension-boilerplate-react/tree/manifest-v2))
- [Entry Point Isolation](https://awesome-repositories.com/f/development-tools-productivity/build-isolation-tools/entry-point-isolation.md) — Implements the separation of content scripts and background logic via distinct entry point isolation.
- [Browser Manifest Script Registrations](https://awesome-repositories.com/f/development-tools-productivity/project-configuration/component-manifest-registration/browser-manifest-script-registrations.md) — Maps bundled JavaScript files to browser contexts using a static JSON manifest configuration.
- [Live-Reload Development Servers](https://awesome-repositories.com/f/development-tools-productivity/workflow-automation-tools/development-automation/development-rebuild-triggers/source-file-watching/live-reload-development-servers.md) — Provides a development server that automatically reloads the browser upon source file changes.

### Programming Languages & Runtimes

- [Type Safety](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/type-system-tools/type-safety.md) — Ensures API type safety using browser-specific type definitions to prevent runtime errors. ([source](https://github.com/lxieyang/chrome-extension-boilerplate-react/blob/master/README.md))

### Software Engineering & Architecture

- [Content Script Bundling](https://awesome-repositories.com/f/software-engineering-architecture/background-processing/extension-background-scripts/script-to-background-messaging/content-script-bundling.md) — Saves specific entry points to disk as scripts while maintaining stability by disabling hot reloading. ([source](https://github.com/lxieyang/chrome-extension-boilerplate-react/tree/manifest-v2))
- [Type-Safe Development](https://awesome-repositories.com/f/software-engineering-architecture/type-safe-development.md) — Enables type-safe development to catch errors and provide intelligent code completion. ([source](https://github.com/lxieyang/chrome-extension-boilerplate-react/tree/manifest-v2))
- [Environment Variable Injection](https://awesome-repositories.com/f/software-engineering-architecture/application-lifecycle-management/configuration-management/environment-variable-management/environment-variable-injection.md) — Injects environment variables into the application code at build time to manage configurations.

### Testing & Quality Assurance

- [TypeScript Static Analysis](https://awesome-repositories.com/f/testing-quality-assurance/code-quality-review/code-quality-tools/formatting-and-linting-pipelines/javascript-and-typescript-toolchains/typescript-linting-plugins/typescript-static-analysis.md) — Utilizes TypeScript static analysis to validate application logic and browser API usage before transpilation.

### Part of an Awesome List

- [Extension Starters](https://awesome-repositories.com/f/awesome-lists/devtools/react-templates/typescript-starters/extension-starters.md) — Provides a TypeScript-integrated starter kit with static type definitions for browser extension APIs.

### Security & Cryptography

- [Secret File Loading](https://awesome-repositories.com/f/security-cryptography/secret-security/environment-variable-secret-loading/secret-file-loading.md) — Loads sensitive configuration from dedicated local files to prevent secrets from entering version control. ([source](https://github.com/lxieyang/chrome-extension-boilerplate-react#readme))