React (Preact) Browser Extension Boilerplate

This project aims to provide a simple boilerplate for writing browser extensions for the most popular browsers, such as Chrome, Firefox, Opera, new Edge and other Chromium-based browsers.

🎉 Features

Preact X or React (by default Preact - lightweight React alternative)
Shadow DOM for injected content
CSS Modules
PostCSS (preset-env and custom-properties)
Auto reloading
Ready-to-go setup with internationalization

📝 Description

It's built with preact and preact-compat which allows you to switch between react and preact.

Content and styles which are injected directly to the page, are isolated inside Shadow DOM. CSS modules are used to avoid class names collision.

🏁 Install

git clone git@github.com:ElForastero/react-browser-extension-boilerplate.git <YOUR_PROJECT_NAME>

🚀 Usage

yarn watch

Runs webpack in watch mode. Automatically reloads the page after changes in files.

yarn build

Builds the extension in production mode.

⚠️ Note on Content Security Policy (CSP)

"unsafe-eval" in directive 'script-src' is needed for auto reloading, and should be removed from production manifest.json.

💻 Useful links

👨‍💻 Author

👤 Eugene Dzhumak

Twitter: @el4astero
Github: @ElForastero

🤝 Show your support

Give a ⭐️ if this project helped you!

📝 License

This README was generated with ❤️ by readme-md-generator

shushpan/react-browser-extension-boilerplate