Build chrome extension and use React. yes React! for better functionality.

This article is for those people who really want to build a chrome plugin and also if they want a better GUI(Graphical User Interface) for their application they can use react. And I will be explaining step by step instructions so, stay with me.

If you really don’t know what chrome extensions are and really want to build your own plugin let me explain it for you and if you already know you can skip this part and move on to Lets begin.

Extensions are small software programs that customize the browsing experience. They enable users to tailor Chrome functionality and behavior to individual needs or preferences. They are built on web technologies such as HTML, JavaScript, and CSS.

This definition is written on chrome developer website. Yes it means that you can add extra functionality to your browser by just writing some html, css and JavaScript. And if you are using JavaScript then you can use the power of react framework.

Here you can see the red arrow (sorry about my bad drawing) is pointing to a chrome extension which i am developing for twimbit a Singapore based research company.

Lets Begin

To begin with chrome development lets see what we need.

1. A good code editor. I prefer php storm(This is not a free code editor but i got GitHub Pro 😊) You can use VScode its free.
2. And you must have chrome installed hahah… and that is it for now. For react will discuss later.

Create a folder somewhere in your computer named as ‘Chrome-extension’ you can give any name and open folder in your favorite code editors, create a file in folder manifest.json as shown in picture below.

and put this is json object in it.🙂

{
  "name": "Demo extension",
  "description": "my first plugin for chrome",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Demo"
  }
}

this is pretty much all to install your first plugin in chrome. For installing it in chrome go to your chrome ‘more tools’ and then extensions.

and enable your developer mode.

after enabling you developer mode on now you will be able to see three options. Load unpacked, pack extension and update. We will be choosing load unpacked. Click on it now you need select you ‘chrome-extension’ folder and press ‘select folder’. Congratulations you have successfully installed your first chrome extension.

The React Part

For this is part you are going to need npm(node package manager) installed on your machine to install it you need to download it and install on your local machine.

Create a folder named as ‘chrome-extension-react’ and open cmd(command prompt in it) by typing cmd in your folder path and hit enter, easiest way to open cmd.

after that type npm install -g create-react-app

Now create a react app by typing create-react-app ‘chrome-react’ it will install a simple react app in your folder names as chrome-react this is app name you can give anything you want. Open folder in your code editor.

You will find many files and folders in it but we are interested in public folder there you find a manifest.json file which is used for PWA(Progressive Web Apps) but we don’t need its content so we will paste our previously created content in it.

Now we just have to type in terminal or cmd with ‘chrome-react’ folder path npm run build

it will create a folder as build in your root directory. Load build directory in your chrome extension.

at this is point you will be facing an error when you click on you extension on top right bar. Refused to execute inline script.

What you have to do is to copy the sha hash in you manifest file as.

{
  "name": "Demo extension",
  "description": "my first plugin for chrome",
  "version": "1.0",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Demo"
  },
  "content_security_policy": "script-src 'self' 'sha256-8OkXeac4b479mi80AP4NxwtqIZZ02+Utp+6fl7Xph8='; object-src 'self'"
}

And now type again in terminal npm run build and reload your plugin that’s all it is.

Your first react chrome extension is ready to add more functions in it. Happy coding. 😇 😉 😊.