This is a boilerplate project for creating a Chrome extension using the latest technologies such as manifest version 3, React, Tailwind CSS, and Webpack. It includes all the necessary code and scripts for building and packaging the extension, as well as hot reloading during development.
To get started, follow these steps:
- Clone the repository in your local machine
git clone https://github.com/akashvaghela09/react-chrome-extension-template.git
- Navigate to the project directory:
cd react-chrome-extension-template
- Install the dependencies:
npm install
-
Before starting the server
-
Make sure that you are using node version 16.
-
Check node version using the following command:
node -v
-
If you are using a different node version, then install node version 16 using the following command:
nvm install 16
-
Check this link on how to install and use
nvm
, manage multiple node versions, and switch between them.
-
-
Start the development server:
npm start
Happy Hacking :)
To load the extension in Chrome, follow these steps:
- Open Chrome and go to the extensions page
chrome://extensions
. - Enable developer mode by clicking the toggle in the top right corner.
- Click the "Load unpacked" button and select the
dev
folder.
The extension should now be loaded in Chrome. You can verify this by looking for the extension's icon in the browser toolbar.
The following scripts are available:
This script starts the development server and enables hot reloading using webpack. To use it, run:
npm start
This script builds the extension for production. It creates a build folder with the compiled code and assets. To use it, run:
npm run build
This script creates a ZIP archive of the extension. It includes the manifest.json file, the backgroundScript and contentScript folders, and the files in the build folder. To use it, run:
npm run zip
This script combines the build and zip scripts into one command. It first builds the extension, then creates a ZIP archive of the result. To use it, run:
npm run pack
If you have any questions or issues with the extension, please don't hesitate to reach out. You can send me a message through the repository's issues page or via email at [email protected].
Akash Vaghela | Website