How to make a Chrome Extension using React JS

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 to learn more.

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

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:

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

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
   

   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:
   

   {
     "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

3. Now, run the below command to compile our extension
   

   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.

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
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 to the same

I hope this was helpful. You can reach out to me on my email address "[e-mail]" in case of any queries.

Thank you! 💖