Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Building a Chrome Extension Using React

DZone's Guide to

Building a Chrome Extension Using React

This post is a guide to build a simple Chrome extension using React. With this, you will have a starting point to continue and build your own extension functionality.

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Last week I finished building a chrome extension for a customer. The extension was built with React as a view engine to render a popup. So I thought to myself — wouldn’t it be nice to write about how to build your own extension with React?

In this post, I’m going to guide you through the process of building a simple Chrome extension using React. After this intro, you will have a starting point to continue and build your own extension functionality.

So let’s get started.

Creating the Project

The first thing you will want to do is to create the extension project. We will use this project to generate the project. If you haven't installed create-react-app, just run the following code in your command line:

npm install -g create-react-app

Note: I’m assuming you already have node and npm installed on your machine.

Once you have create-react-app on your machine, generate a new project. In the command line, run the following code:

create-react-app my-extension

create-react-app will create a new project with the name my-extension which includes all the needed React boilerplate to run a new project.

Open the newly generated project in your favorite IDE and let's move on.

Adding the Manifest

Chrome extensions need to have a manifest.json file in their root folder. That manifest tells Chrome how to create the extension and how to run it. In the manifest, you will configure things like the logo, name, and description of your extension. Since you will want to make the manifest part of your build root folder, I suggest to put it in the project's public folder. In create-react-app, the public folder is just copied as-is to the build folder when you compile the project. Other things that I suggest to putting in the public folder include content and background scripts and assets.

Note: In this post, I won't discuss what content and background scripts are, so I encourage you to read about them.

create-react-app already includes a manifest.json file in the public folder. Override the file with the following manifest:

{
  "manifest_version": 2,

  "name": "My Extension",
  "description": "This extension is a starting point to create a real Chrome extension",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  },
  "icons": {
    "16": "logo-small.png",
    "48": "logo-small.png",
    "128": "logo-small.png"
  },
  "permissions": [
  ]
}

What is included in this manifest.json?

We have the manifest version, name, and description which are self-explanatory. The browser_action section tells Chrome that we will have a popup which will run the index.html file. The icons will be used to present the icon in the extension tray and in Chrome extension list. Last but not least, the permissions array will include all the permissions that the extension will need to operate successfully. Currently, it is left empty.

Note: For further reading about the extension manifest format, I suggest to take a look at the manifest file format.

You can add any image which is 128 pixels wide to the public folder with the name logo-small.png (or change that name in the manifest to your logo image name).

Now that we have the manifest and logo, you can compile the project using the following code in your command line:

npm run build

Adding the Extension to Your Chrome

In order to check your new extension, you will have to install it in Chrome. You can do the following to install it.

In Chrome, open the extension list by opening a new tab and running the following URL:

chrome://extensions/


Press the Load unpacked extension... button.

Browse to the build folder and press the OK button.

If everything goes right, you will have your extension installed in Chrome.

Congratulations you have built your first Chrome extension. Later on, if you have a developer account in the Chrome extension store you will be able to load it to the store and distribute it publicly.

Summary

In this post, I showed you how you can start building a Chrome extension with React as it’s view engine. I used create-react-app and some simple manifest manipulations to get started. Of course, developing an extension is more than just building a “hello world” like view but this is something that deserves its own post.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
chrome ,chrome extension ,react ,web dev

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}