Introduction

Hello, world!

If you're starting with chrome extension development, understanding the detailed documentation and specific details can be overwhelming. But do not worry, this post is for you. Here, we will learn how to set up a simple chrome extension using Vite-react without going into the details.

Creating our react project using Vite

Firstly, ensure that you have Node installed in your system (run the command node -v on your terminal and some version should show up). Let's get going and create our react project.

npm create vite@latest

Select a suitable project name, framework (react) and variant (javascript) in the following prompts on the terminal. Next, run the following three commands:

cd <project_name>
npm install
npm run dev

Creating manifest.json file

Our react project is created. Now let us create the manifest.json file for the chrome extension (manifest.json file contains metadata for our chrome extension and including this file makes our project ready for deployment on Chrome). For simplicity, include the following mandatory data in the file.

{
    "name":"Your chrome extension name",
    "version":"1.0.0",
    "manifest_version":3, 
    "action":{
        "default_popup":"index.html" //this ensures that the extension will load index.html file at the start.
    }
}

Now, run the following command in the terminal.

npm run build

This command will create a production-ready build (folder name "dist") which can now be deployed in Google Chrome. Also, move the manifest.json file to the "dist" folder.

Deploying our project on Google Chrome

1. Open the google chrome extensions page and turn on the developer mode (at the top right corner of the page).

2. Click on the "load unpacked" button.

3. Navigate to your project directory and select the "dist" folder (production build).

BOOM!! You have successfully created and deployed your first Chrome extension.

Updating the Chrome extension

Modify the project and run npm run build command (ensure that the production build directory still contains the manifest.json file). Now go to the extensions page of Google Chrome and click on the update button to update your Chrome extension.

Conclusion

I hope you enjoyed reading this post. I am learning web development and intend to share whatever I know on this platform. Do check out my GitHub profile and follow me on Twitter.

See you at the next one!