React Chrome extension tutorial

React Chrome Extension Tutorial

Learn how to build a simple Chrome extension using React

12/16/2022

First, make sure you have Node.js and npm (Node Package Manager) installed on your computer. If you don't have these already, you can download and install them from the official website (https://nodejs.org/).
Next, create a new directory for your extension and navigate to it in your terminal.
In the terminal, run the following command to create a new React app:

npx create-react-app my-extension

This will create a new React app in a directory called "my-extension". Navigate to this directory:

cd my-extension

Now, you need to create a file called "manifest.json" in the root of your extension directory. This file will contain metadata about your extension, including its name, description, and permissions. Here is an example manifest file that you can use as a starting point:

{
  "manifest_version": 3,
  "name": "My Extension",
  "description": "A simple Chrome extension",
  "version": "1.0",
  "permissions": [
    "activeTab"
  ],
  "action": {
    "default_title": "My Extension",
    "default_popup": "index.html"
  }
}

Next, you need to modify your React app to work as a Chrome extension. In the "public" directory, create a new file called "index.html". This file will be the main HTML file for your extension's popup window. Here is an example of what this file might look like:

<!DOCTYPE html>
<html>
  <head>
    <title>My Extension</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Now, open "src/index.js" and modify it to render your React app into the "root" div in your extension's popup window. Here is an example of what this file might look like:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Next, you need to build your React app for production. In the terminal, run the following command:

npm run build

This will create a "build" directory with the compiled version of your app.

Finally, you need to load your extension into Chrome. In Chrome, open the "Extensions" page (chrome://extensions/). Enable "Developer mode" by clicking the toggle in the top right corner. Then, click the "Load unpacked" button and select the "build" directory of your extension.

Your extension should now be installed and working in Chrome! You can test it by clicking the extension's icon in the browser toolbar.

Building Browser Extensions by Matt Frisbie

GET IT NOW

The complete reference for building modern browser extensions in Chrome, Firefox, Edge, and Safari.