Chrome Extension Boilerplate React

Overview:

The Chrome Extension Boilerplate with React 18 and Webpack 5 is a basic boilerplate that provides a foundation for developing modular and modern Javascript code for Chrome extensions. It is updated with the latest versions of Chrome Extension Manifest V3, React 18, Webpack 5, and Webpack Dev Server 4. It also includes support for features like React Refresh, eslint-config-react-app, Prettier, and TypeScript. This boilerplate is based on the boilerplate by samuelsimoes, but has been modified to include support for newer versions and additional features.

Features:

• Chrome Extension Manifest V3
• React 18
• Webpack 5
• Webpack Dev Server 4
• React Refresh
• react-refresh-webpack-plugin
• eslint-config-react-app
• Prettier
• TypeScript

Installation:

To install and run the Chrome Extension Boilerplate, you can follow these steps:

1. Check if your Node.js version is >= 18.
2. Clone this repository.
3. Change the package’s name, description, and repository fields in package.json.
4. Change the name of your extension in src/manifest.json.
5. Run npm install to install the dependencies.
6. Run npm start to start the development server.
7. Load your extension on Chrome by accessing chrome://extensions/.
8. Enable Developer mode.
9. Click on Load unpacked extension.
10. Select the build folder from the cloned repository.
11. Happy hacking!

Summary:

The Chrome Extension Boilerplate with React 18 and Webpack 5 is a helpful starting point for developing Chrome extensions with modern Javascript code. It includes support for recent versions of React, Webpack, and other tools like TypeScript and eslint-config-react-app. By following the installation guide, developers can quickly set up their development environment and start building their Chrome extensions.