How to make a Chrome Extension using React JS

Shahid Shaikh — Sun, 17 Jul 2022 13:37:30 +0000

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.

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.

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

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:

Open Chrome
Go to chrome://extensions/.
At the top right, turn on Developer mode.
Click Load unpacked.
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

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
To publish your extension to Chrome's web store, you can follow the steps mentioned here
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 "shahid.sk27595@gmail.com" in case of any queries.

Thank you! 💖

Hello World!

Shahid Shaikh — Tue, 07 May 2019 02:49:02 +0000

My name is Shahid Shaikh and I have been coding for the past 4 years now. I live in one of the busiest yet interesting city in India known as Mumbai.

I started my journey by creating Icon Packs for Android Devices in 2015, where I used Open Source Icon Packs dashboard and compiled it along with icons that I made using Photoshop. We had a small community of icon pack designers on Google Plus (RIP) contributing and supporting each other's work.

Later in 2016, I decided to learn more about Android Development and took a few basic to an advanced course on Udacity. In a year's time, I was able to design and develop multiple applications on the Play Store. One of my favorite and successful app is called as "Scrittor". It's a simple/minimal note-taking application.

In 2017, I started working as a Web Solution Specialist in an MNC called "Endurance Internation Group". I was fortunate enough to work on some really great web development projects where my contribution was in the Front End. I learned a lot about HTML, CSS (including SASS) and JS.

During this time my interest changed from Mobile to Web Development team and I am very excited to learn more about the same. One thing which overwhelms me about web development is the number of technologies that are being introduced each week.

Currently, I am learning Node JS along with Express and MongoDB from Udemy and it has been such an interesting journey.

Also, English is not my first language nor I am good at writing (need to fix this) and I am sure you have learned that by now.🤭

I am hoping to learn a lot more via the "Dev.to" community and contribute to the same.

Thank you for reading 😊