Chrome extension with React
Tags: chrome, extension, react, javascript
Published: 2022-09-21 07:56:20


![main image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x5noc4c3hr9i4bmn117c.png)

## What is a Google Chrome Extension?

Chrome extensions modify the browser's capabilities. This involves introducing new Chrome features or changing the program's behavior to be more user-friendly.

### 1.Create React App

First we need to crate a react application using typescript,

```
npx create-react-app chrome-test-extension --template typescript
```

### 2.React app convert to google extension

In this step we need to config **manifest.json**, This file located in to public folder. Basically we can update the our extension **name**, **description**, **version**, **manifest_version**, **action** and **icons**.

In this code we use manifest version 3 for our project.
```js
{
   "name": "Chrome React Test Extension",
   "description": "Test Chrome extensions",
   "version": "0.1",
   "manifest_version": 3,
   "action": {
       "default_popup": "index.html",
       "default_title": "Open the popup"
   },
   "icons": {
       "16": "logo192.png",
       "48": "logo192.png",
       "128": "logo192.png"
   }
}
```


### 3.Pop-up architecture

In this project action on **index.html**.Default body size we can increase pop-up size in **index.css**. But we can use that use maximum width: 800px and maximum height: 600px.

```css
body {
 width: 600px;
 height: 400px;
 ...
}
```

### 4.Build our application

Before build that project we need to change some of part that project.The normal build file structure looks nice, however with Chrome, we'd get CSP (Content Security Policy) problems. To avoid adding extra JavaScript files, CRA inserts inline JavaScript code right on the HTML page while building the application. This works on a website, but not an extension.

Therfore  we will update package.json scripts section build part to 

```
"build": "INLINE_RUNTIME_CHUNK=false react-scripts build",
```

If we build index.html for our project, it will not include any references to inline JavaScript code.

without INLINE_RUNTIME_CHUNK=false 

![without INLINE_RUNTIME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axp27288oq0ftsf99hte.png)

with INLINE_RUNTIME_CHUNK=false 


![with INLINE_RUNTIME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5rkaga8an9ax93jroyl.png)


Now we can build our project.

```
yarn build
```

### 5.Add the extension to the browser

Easily go to the mange extension in chrome use that link _chrome://extensions_

Before add the build file we want to active developer mode in chrome extensions.

![developer mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rb16hinija6tbp8ex589.png)

Select your build folder under Load unpacked. Your extension has been loaded and is now listed. Like so:

![chrome://extensions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33v0s6g70lx2jjtz9gqh.png)

![Image code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62vki90pi6fjq48115ok.png)

![Image code 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9w1dhy5y9phzbwvs2h1.png)

That way to Chrome extension with react.Let's meet again for the new tutorial ([how to get the URL of the current tab from Chrome extension](https://dev.to/jsandaruwan/how-to-get-the-url-of-the-current-tab-from-chrome-extension-3a9l).

Thank you,
J-Sandaruwan.
[linkedin](https://www.linkedin.com/in/j-sandaruwan/)