Building my First Chrome extension with React js

Suddenly a thought come in my mind to see how people are building chrome extensions for themselves . I searched on google then read some blogs and after that I got my hand dirty on making a chrome extension for my brain dopamine rush .

It is really simple to build just a few process we need to follow here to make any website or web-app into a extension.
The important thing we need to do here is to change our manifest.json file with the codes I am writing here

It is a basic version so You will not have any problem to understand it lets explore what I have written here

There we have manifest version it should be an integer and a name and short-name for the extension ,also we have a description here for the extension .
then here comes the action field and inside here we have key named "defauld_popup" and the here we need to give the name the html file we want to show as a chrome pop-up here . And a logo for the pop-up as you see .

and wait our 80% work is finished here you can add more fields in the manifest.json according to the need of your app.

Other important things that we can do with manifest file but not neceassary for this project
1.Extension name
2.Description
3.Version number
4.Permissions required by the extension
5.Background scripts to be executed
6.Content scripts to be injected
7.Icons for the extension
8.Popup pages for the extension
9.Options pages for the extension
10.Browser action or page action
we can take any permision that we need for our web-app.

Now move forward to the next level in the manifest file I have linked the [index.html] file as I am using React and all my Main data is linked with that html file .

Before publishing it to the chrome first create the build folder here to deploy it .

with the command ## npm run build

then go to *### chrome://extensions/ *

switch to developer mode and there you will see an option name *Load Unpacked * go there and deploy the build or dest folder that you have created for your project .

note :

If you are not using React then you donot need build folder just simply create a manifest file and add all the commands there and deploy it .

then you will see your extension there like this

go to the extensions tab and pin your extension then open it . As I have created a simply quote generator with react it will show me the website as a extension .

Note : Every time you make changes there you have to make the build folder every time and had to reload the extension to see the changes . I will bring more detailed blog about chrome extensions . Till then try the simple and basic one