How to build a Chrome Extension with React

In this guide, I'll share how I built a color-changing extension using React and Plasmo, a framework that streamlines the development process.

Why React for Chrome Extensions?

React offers several advantages for extension development:

1. Familiar Territory: Leverage your existing React knowledge.

2. Component-Based Architecture: Perfect for building modular extension UIs.

3. Rich Ecosystem: Access to numerous React libraries and tools.

4. Performance: React's virtual DOM optimizes extension performance.

Introducing Plasmo: Simplifying Extension Development

Plasmo is a game-changer for React-based extension development:

• React-First Approach: Seamless integration with React.

• Developer Experience: Features like hot reloading boost productivity.

• TypeScript Support: Built-in support for type-safe code.

• Manifest V3 Compatibility: Handles Chrome's latest manifest version complexities.

Building the Extension: A Step-by-Step Guide

Let's create a simple extension that changes the background color of web pages.

Step 1: Setting Up the Project

Ensure you have Node.js installed, then run:

npm create plasmo@latest

Follow the prompts, selecting React as your framework.

Step 2: Understanding the Project Structure

After initialization, your project structure will look like this:

color-shifter/
├── popup.tsx
├── style.css
└── package.json

popup.tsx is the entry point for your extension's popup UI.

Step 3: Crafting the Popup Component and Styles

First, create a new file called style.css in your project's root directory. Then, add some basic styling to it:

.popup-container {
  width: 300px;
  padding: 20px;
  font-family: Arial, sans-serif;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

Next, create your popup component in popup.tsx:

import React, { useState } from "react"
import "./style.css"

const Popup = () => {
  const [count, setCount] = useState(0)

  return (
    <div className="popup-container">
      <h1>Color Shifter</h1>
      <p>Change the web's colors with a click!</p>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  )
}

export default Popup

Make sure to import the style.css file at the top of your popup.tsx as shown above. This will apply the styles to your popup component.

Step 4: Adding Color-Changing Functionality

Enhance the popup component with color-changing functionality:

import React, { useState, useEffect } from "react"
import "./style.css"

const Popup = () => {
  const [color, setColor] = useState("#ffffff")

  const changeColor = () => {
    const newColor = `#${Math.floor(Math.random()*16777215).toString(16)}`
    setColor(newColor)
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, {type: "COLOR_CHANGE", color: newColor})
    })
  }

  useEffect(() => {
    // Initialize color when popup opens
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, {type: "GET_COLOR"}, (response) => {
        if (response && response.color) {
          setColor(response.color)
        }
      })
    })
  }, [])

  return (
    <div className="popup-container">
      <h1>Color Shifter</h1>
      <div className="color-preview" style={{backgroundColor: color}}></div>
      <button onClick={changeColor}>Shift Colors!</button>
      <p>Current color: {color}</p>
    </div>
  )
}

export default Popup

Step 5: Creating a Content Script

Create a new file content.ts in the root directory to apply the color change to webpages:

let currentColor = "#ffffff"

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "COLOR_CHANGE") {
    currentColor = request.color
    document.body.style.backgroundColor = currentColor
  } else if (request.type === "GET_COLOR") {
    sendResponse({color: currentColor})
  }
})

Step 6: Development and Testing

To develop your extension with hot reloading, run:

npm run dev

This will start Plasmo's development server, allowing you to see changes in real-time.

To test your extension:

1. Open Chrome and go to chrome://extensions

2. Enable "Developer mode"

3. Click "Load unpacked"

4. Navigate to your project's build folder, then select the chrome-mv3-dev folder inside it

Your color-shifting extension should now appear in Chrome's toolbar.

Lessons Learned and Tips

1. Start Simple: Begin with basic functionality and build up gradually.

2. Use React Hooks: Leverage hooks like useState and useEffect for state management and side effects.

3. Leverage Chrome APIs: Familiarize yourself with Chrome's extension APIs.

4. Debug Effectively: Use Chrome's developer tools, especially the "Inspect views" option for your extension.

5. Consider Performance: Keep your extension lightweight and efficient.

Conclusion

Building a Chrome extension with React and Plasmo opens up new possibilities for developers. Whether you're creating a simple utility or a complex tool, this approach provides a solid foundation.

As you build, always keep your end-users in mind. The best extensions solve real problems and provide value. Happy coding, and may your extensions enhance the browsing experience for users worldwide!

---

If you found this guide helpful, consider sharing it with fellow developers. For more advanced topics, check out the official Plasmo and Chrome Extension documentation.