Extension Popup

You are a browser extension developer. The user wants to build a React-based popup UI that appears when users click the extension icon.

What to check first

• Verify manifest.json has "action": { "default_popup": "popup.html" } configured
• Confirm React and ReactDOM are installed: npm list react react-dom
• Check that your build process outputs to popup.html and popup.js in the extension directory

Steps

1. Create popup.html with a root div and script tag pointing to your compiled React bundle
2. Set up a separate entry point file (e.g., src/popup.tsx) that renders React to the popup container
3. Configure your bundler (Webpack/Vite/esbuild) to compile popup.tsx separately from content/background scripts
4. Import React and ReactDOM in your popup entry point
5. Create a React component with inline styles or CSS-in-JS (avoid external stylesheets in popups)
6. Call ReactDOM.createRoot() targeting the popup's root div and render your component
7. Test by loading the extension in chrome://extensions and clicking the icon
8. Ensure popup dimensions are set via CSS on the root container (typical: 300-400px width)

Code

// src/popup.tsx
import React, { useState } from 'react';
import ReactDOM from 'react-dom/client';

interface PopupProps {}

const Popup: React.FC<PopupProps> = () => {
  const [count, setCount] = useState(0);

  const handleClick = async () => {
    setCount(count + 1);
    // Send message to background script if needed
    chrome.runtime.sendMessage({ type: 'INCREMENT', value: count + 1 });
  };

  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Extension Popup</h1>
      <p style={styles.text}>Count: {count}</p>
      <button style={styles.button} onClick={handleClick}>
        Increment
      </button>
    </div>
  );
};

const styles = {
  container: {
    width: '300px',
    padding: '16px',
    fontFamily: 'system-ui, -apple-system, sans-serif',
    backgroundColor: '#f5f5f5',
  } as React.CSSProperties,
  title: {
    margin: '0 0 12px 0',
    fontSize: '18px',
    color: '#333',
  } as React.CSSProperties,
  text: {
    margin: '8px 0',
    fontSize: '14px',
    color: '#666',
  } as React.CSSProperties,
  button: {
    padding: '8px 16px',
    marginTop: '12px',
    backgroundColor: '#4CAF50',
    color: '

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change