browser-plugin-creator/templates/devtools-react/devtools.jsx

A modern scaffolding tool for creating browser extensions with ease

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom/client';

function DevToolsPanel() {
  const [networkRequests, setNetworkRequests] = useState([]);
  const [isRecording, setIsRecording] = useState(false);

  useEffect(() => {
    // 监听网络请求
    chrome.devtools.network.onRequestFinished.addListener((request) => {
      if (isRecording) {
        setNetworkRequests(prev => [...prev, {
          url: request.request.url,
          method: request.request.method,
          status: request.response.status,
          time: new Date().toLocaleTimeString()
        }]]);
      }
    });

    return () => {
      // 清理监听器
    };
  }, [isRecording]);

  const clearRequests = () => {
    setNetworkRequests([]);
  };

  return (
    <div className="devtools-container">
      <header>
        <h1>{{projectName}} DevTools</h1>
        <p>React DevTools扩展面板</p>
      </header>

      <div className="controls">
        <button 
          className={`btn ${isRecording ? 'btn-danger' : 'btn-primary'}`}
          onClick={() => setIsRecording(!isRecording)}
        >
          {isRecording ? '停止录制' : '开始录制'}
        </button>
        <button className="btn btn-secondary" onClick={clearRequests}>
          清空
        </button>
      </div>

      <div className="requests-list">
        <h3>网络请求 ({networkRequests.length})</h3>
        {networkRequests.length === 0 ? (
          <p>暂无网络请求</p>
        ) : (
          <ul>
            {networkRequests.map((req, index) => (
              <li key={index} className="request-item">
                <span className="method">{req.method}</span>
                <span className="status" data-status={req.status}>
                  {req.status}
                </span>
                <span className="url">{req.url}</span>
                <span className="time">{req.time}</span>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<DevToolsPanel />);