browser-plugin-creator/templates/basic-popup-react/popup.jsx

A modern scaffolding tool for creating browser extensions with ease

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

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

  return (
    <div className="popup-container">
      <header>
        <h1>{{projectName}}</h1>
        <p>{{description}}</p>
      </header>
      
      <main>
        <div className="counter-section">
          <h2>React Counter</h2>
          <div className="counter-display">
            <span className="count">{count}</span>
          </div>
          <div className="counter-controls">
            <button 
              className="btn btn-primary" 
              onClick={() => setCount(count + 1)}
            >
              +1
            </button>
            <button 
              className="btn btn-secondary" 
              onClick={() => setCount(count - 1)}
            >
              -1
            </button>
            <button 
              className="btn btn-reset" 
              onClick={() => setCount(0)}
            >
              Reset
            </button>
          </div>
        </div>

        <div className="info-section">
          <h3>Extension Info</h3>
          <div className="info-item">
            <strong>Version:</strong>
            <span>{{version}}</span>
          </div>
          <div className="info-item">
            <strong>Framework:</strong>
            <span>React</span>
          </div>
        </div>
      </main>
    </div>
  );
}

// Mount the React app
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Popup />);