How to build a Chrome Extension with React JS

By Scott Domes

Last updated:

Have you ever tried looking for articles about creating a Chrome Extension with React? I have and to say the least, there are not a lot of straight-forward ones. This article will offer an easy and concise guide of the whole process using React.

Setup:

Before we get started, you will need to know how to create a React project. The easiest way to do this is with create-react-app in your command-line.

Steps to Create:

  1. Install create-react-app with: npm install –g create-react-app

2. Change to the directory where you want to create your extension

3. Create a new project with the command: create-react-app reactextension

Getting Started:

Now let’s open up your project in an IDE, I’ll use Atom for this guide. Let’s look for the public folder and then locate your manifest.json inside of it. Your manifest.json should look like this:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src: "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": "./index.html",
  "display": "standalone",
  "theme_color: "#000000",
  "background_color": "#ffffff",
}

We are going to make the following changes to your manifest.json:

{
  "short_name": "React App",
  "name": "React Extension",
  "manifest_version": 2,
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "React Ext"
  },
  "version": "1.0"
}

Note: The default_popup field is the body of your extension, it will grab all your code from the index.html and display it when the extension is clicked (your index.html will automatically be created in the next step).

Ok! Now that the configuration is all done, let’s create a build folder for your application.

Run the command yarn build and create a build for your extension.

If you want to look at more configurations for your manifest.json you can go to Google’s Chrome Extension Developer Guide.

Getting your extension onto Google Chrome:

Now let’s go to Chrome’s extension manager, you can access this by either typing chrome://extensions in the URL line or by clicking the settings button in Chrome’s toolbar on the top right, finding More Tools and then clicking Extensions.

Make sure to check the Developer mode checkbox in the top right corner of the page. Once this is done, all you have to do is drag your build folder onto the page and your extension will appear. Click the icon in the nav bar and your extension will open!

Developer mode

To edit your extension, edit it like any other react project, create another build and drag a new copy into Chrome’s Extension Page.

The goal of a Chrome Extension should be to improve the user’s browsing experience and hopefully my tutorial helped you get started on this. Let me know if you have anything to add to this article and if it helped you out, a Like would be great!

Thanks for reading!


Share on:

Leave a Comment