How to make a Chrome Extension using React JS
Tags: javascript, chrome, chromeextension, react
Published: 2022-07-17 13:37:30

---
title: How to make a Chrome Extension using React JS
published: true
description: I'll be telling you simple steps on how you can create and publish your own chrome extensions using React JS.
tags: javascript, chrome, chromeextension, react
---

A lot of us know how to use React JS to create web apps. Given that, we can use this same knowledge to create Chrome extensions as well. In this post, I'll be telling you simple steps on how you can create and publish chrome extensions using React JS.

Prerequisites:
- React JS (create-react-app)

## Getting Started

To set up your application, we can use create-react-app. If you're hearing about it for the first time, you can head over to their official [documentation](https://reactjs.org/docs/create-a-new-react-app.html) to learn more.

```bash
npx create-react-app my-chrome-extension-name
```

Once you run the above command, create-react-app will setup a new react app for you. Head over to `my-chrome-extension-name` folder and open your preferred code editor.

Now, to run your newly created react app, run the below command which will spin up a local server for you

```bash
npm run start
```

## Let's add some HTML and CSS

Now, head over to `App.js` file inside the src folder. Here's you'll see a lot of predefined code. Remove all the code inside `<div className="App">` and replace with your own HTML. In our case, we are just adding a heading tag with 'Hello World' text. The contents of your file should look something like this:

```javascript
import './App.css';
function App() {
    return (
        <div className="App">
            <h1>Hello World</h1>
        </div>
    );
}

export default App;
```

Next, let's remove content inside App.css file and replace with some basic styling as mentioned below

```css
body {
    box-sizing: border-box;
}

.App {
    min-height: 250px;
    min-width: 400px;
    background: linear-gradient(to right bottom, #2999f5, #1859d1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.App h1 {
    font-size: 18px;
    color: #fff;
    text-align: center;
}
```

## Making this App work with Chrome

We are done with the changes that were required inside the react app. Let's add a few more things to make it work with chrome.

1. Inside the root folder `my-chrome-extension-name`, create a new file named '.env.production' (without quotes, but make sure to add full stop at the start) and add the below line inside of it

    ``` bash
    INLINE_RUNTIME_CHUNK=false
    ```
    without this line, you will receive a 'Content Security Policy' error when importing the extension inside chrome. Basically, this error arises as Chrome (or almost any modern browser) will not allow inline scripts to get executed.

2. Go to public folder and replace the contents of 'manifest.json' with the below code:

    ```json
    {
      "name": "First Chrome Extension",
      "description": "This is a First Chrome Extension",
      "version": "1.0.0",
      "manifest_version": 3,
      "author": "Author Name",
      "icons": {
        "16" : "favicon.ico",
        "48" : "favicon.ico",
        "128" : "favicon.ico"
      },
      "action": {
        "default_popup": "index.html"
      }
    }
    ```

    You can read about different values and what they do inside the above JSON [here](https://developer.chrome.com/docs/extensions/mv3/intro/)

3. Now, run the below command to compile our extension
    ```bash
    npm run build
    ```

    This will create a build folder inside our extensions folder. We will have to import this build folder inside chrome which we will do in the next steps.

## Importing our extension inside Chrome

We have now completed all the steps to create our own chrome extension. All we have to do is now to import the same inside Chrome. Please follow the below steps:

1. Open Chrome
2. Go to chrome://extensions/.
3. At the top right, turn on Developer mode.
4. Click Load unpacked.
5. Find and select the 'build' folder inside your chrome extension's folder.

<Sparkle text="Hurray!! "/> You must now be able to see your chrome extension inside chrome.

## Things to Note

1. Whenever you make changes to your extension, you will have to run 'npm run build' command each time and reload the extension inside chrome to see the changes
2. To publish your extension to Chrome's web store, you can follow the steps mentioned [here](https://developer.chrome.com/docs/webstore/publish/)
3. I have created a repository with the same steps mentioned above. You can use this repo to create your own extension. Here's the [Github Link](https://github.com/shahidshaikhs/react-chrome-extension-starter) to the same

I hope this was helpful. You can reach out to me on my email address "shahid.sk27595@gmail.com" in case of any queries.

Thank you! 💖