testing-tool/pages/RecordeReplayPage.tsx

import { useRecorder } from '../hooks/useRecorder';
import { downloadHtml } from '../utils/recordUtils';

const RecordeReplayPage = () => {
  // const [isRecording, setIsRecording] = useState(false);

  const { startRecord, stopRecord, getEvents, isRecording } = useRecorder();

  const handleStart = async () => {
    try {
      // await sendRecordCommand("START_RECORD");
      if (!isRecording) {
        await startRecord();
      } else {
        stopRecord();
      }
      // await storage.set({isRecording: true, recordingStartTime: Date.now()});
      // console.log('events', events);
    } catch (e) {
      console.error('Error starting recording:', e);
    }
  };

  const handleStop = async () => {
    try {
      // await sendRecordCommand("STOP_RECORD");
      // const events =useRecorder().getEvents();
      // console.log('events', events);
      // setIsRecording(false);
      // await storage.remove('isRecording');
      stopRecord();
      // downloadHtml(getEvents());
      // console.log('events', getEvents());
    } catch (e) {
      console.error('Error stopping recording:', e);
    }
  };

  return (
    <div style={{ width: '300px', padding: '16px' }}>
      <h3>RRWeb Recorder</h3>

      {/* 3. 选择标签页逻辑：默认为当前页，如果需要跨页，需先列出 chrome.tabs.query */}

      <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
        {!isRecording ? (
          <button onClick={handleStart} className={'action-btn'}>
            开始录制
          </button>
        ) : (
          <button className={'action-btn stop-btn'} onClick={handleStop}>
            停止录制
          </button>
        )}
      </div>
    </div>
  );
};

export default RecordeReplayPage;