Chrome Extension with React 18 and Webpack 5 for TFG

Info

• aa
• A
• b

Tech Stack

This is a basic Chrome Extensions boilerplate to help you write modular and modern Javascript code, load CSS easily and automatic reload the browser on code changes.

This project is updated with:

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

Installing and Running

Procedures:

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 on src/manifest.json.
5. Add environment variable files at /utils/.
6. Run npm install to install the dependencies.
7. Run npm start
8. Load your extension on Chrome following:
   1. Access chrome://extensions/
   2. Check Developer mode
   3. Click on Load unpacked extension
   4. Select the build folder.
9. Happy hacking.

Structure

All your extension's code must be placed in the src folder.

Packing

After the development of your extension run the command

$ npm run build

Thanks!