Creating a Chrome Extension with React: A Step-by-Step Guide

Design courtesy: ME!

Creating a Chrome extension with a React app built using TypeScript and bundled with Webpack is a great way to build modern browser extensions. In this blog, I will guide you through the process of creating a Chrome extension using the npx create-react-app template with TypeScript and bundling the app using Webpack. We will also use the latest version of Chrome extension manifest, Manifest V3.

GitHub Repository

Feeling impatient? Head straight towards the GitHub repository. Don’t forget to leave a star if it helped you.

• https://github.com/Harshita-mindfire/react-chrome-extension

Pre-requisite

Before we dive into the development process, you need to have a basic understanding of React and its core concepts. You should also have a basic understanding of JavaScript and HTML.

Additionally, you will need the following tools:

• Google Chrome
• Visual Studio Code or any other code editor
• Node.js and npm (Node Package Manager)

Step 1: Create React App

To get started, we need to create a new TypeScript React project. Open your terminal or command prompt and run the following command. This will create a new React project with all the necessary dependencies. Navigate to the newly created project folder:

npx create-react-app react-chrome-ext --template typescript
cd react-chrome-ext

Let’s delete the files which we don’t require at the moment. Make sure your folder structure looks something like this after deletion:

folder structure after initial cleanup

Let’s update the App.tsx to be a basic Hello World component in React

function App() {
  return (
    <div className="App">
      Hello World
    </div>
  );
}

export default App;

Now we update index.tsx to create a root element in DOM and append our app in it.

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

const root = document.createElement("div")
root.className = "container"
document.body.appendChild(root)
const rootDiv = ReactDOM.createRoot(root);
rootDiv.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Let us add a very minimal css in App.css:

.App {
    color: white;
    text-align: center;
}

.container {
    width: 15rem;
    height: 15rem;
    background-color: green;

}

Step 2: Add Webpack

Next, we will need to install the necessary dependencies to bundle our React App. Run the following commands in your terminal:

npm install --save-dev webpack webpack-cli copy-webpack-plugin css-loader ts-loader html-webpack-plugin ts-node

Update the Webpack configuration

By default, the create-react-app template does not provide a Webpack configuration file, so we need to create one. Create a new file called webpack.config.js in the root directory of your project, and add the following code:

const path = require("path");
const HTMLPlugin = require("html-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin")

module.exports = {
    entry: {
        index: "./src/index.tsx"
    },
    mode: "production",
    module: {
        rules: [
            {
              test: /\.tsx?$/,
               use: [
                 {
                  loader: "ts-loader",
                   options: {
                     compilerOptions: { noEmit: false },
                    }
                  }],
               exclude: /node_modules/,
            },
            {
              exclude: /node_modules/,
              test: /\.css$/i,
               use: [
                  "style-loader",
                  "css-loader"
               ]
            },
        ],
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: "manifest.json", to: "../manifest.json" },
            ],
        }),
        ...getHtmlPlugins(["index"]),
    ],
    resolve: {
        extensions: [".tsx", ".ts", ".js"],
    },
    output: {
        path: path.join(__dirname, "dist/js"),
        filename: "[name].js",
    },
};

function getHtmlPlugins(chunks) {
    return chunks.map(
        (chunk) =>
            new HTMLPlugin({
                title: "React extension",
                filename: `${chunk}.html`,
                chunks: [chunk],
            })
    );
}

This configuration file defines the entry point for our app (the index.tsx file), the output file name, the TypeScript loader, style loader and the output directory.
Now that we have configured webpack, Update your package.json file to include the following scripts:

  "scripts": {
    "build": "webpack --config webpack.config.js",
    "watch": "webpack -w --config webpack.config.js"
  }

These scripts will allow you to build your extension using the npm run build command, or to run Webpack in watch mode using the npm run watch command.

Step 3: Add the Manifest file

A manifest file is used to define the metadata and permissions for a Chrome extension. Create a new file called manifest.json in the root directory of your project and add the following code:

{
    "version": "1.0.0",
    "manifest_version": 3,
    "name": "React Chrome Extension",
    "description": "This is a Chrome extension built with React and TypeScript",
    "action": {
        "default_popup": "js/index.html",
        "default_title": "React Chrome Extension"
    }
}

This manifest file specifies the name, version, description for the extension. It also defines the popup window.

Step 4: Build the App

Finally, run the npm run build command in your terminal to build your extension: When script will finish → new /dist folder will be created at the root of our app:

dist folder in react app

Step 5: Load the extension

• To load your extension into Chrome, open Chrome and navigate to the Extensions page by typing chrome://extensions into the address bar. Then, click the "Load unpacked" button and select the dist directory in your project.
• Test your extension by reloading the Extensions page and click on the extension icon.

extension popup

Conclusion

That’s it! You’ve created a simple “Hello World” Chrome extension using TypeScript and Webpack. From here, you can start exploring the Chrome extension API and building more complex extensions. I hope this blog has been helpful in getting started with creating Chrome extensions with React.