# 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:

```bash
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:

```plaintext
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:

```css
.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`:

```jsx
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:

```jsx
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:

```typescript
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:

```bash
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.