feat: 添加离屏文档创建和下载功能，优化录制逻辑

hooks/useRecorder.tsx

@@ -1,42 +1,47 @@
-import {useRef, useState} from "react";
-import {record} from "rrweb";
+import { useRef, useState } from 'react';
+import { record } from 'rrweb';
 
 export const useRecorder = () => {
-  // 存储录制事件
-  const eventRef = useRef([]);
   // 存储停止录制函数
   const stopFnRef = useRef();
   const [isRecording, setIsRecording] = useState(false);
-  
+
   const startRecord = async () => {
     if (isRecording) return;
-    
+
+    await chrome.runtime.sendMessage({ type: 'CREATE_OFFSCREEN' });
     setIsRecording(true);
-    
+
     // 启动录制
     stopFnRef.current = record({
       emit(event) {
         // 存储数据
-        eventRef.current.push(event);
-      }
+        // eventRef.current.push(event);
+        chrome.runtime.sendMessage({ type: 'SAVE_EVENT', event });
+      },
     });
+
+    console.log('[content] rrweb started');
   };
-  
+
   const stopRecord = () => {
     if (!isRecording) return;
-    
+
     setIsRecording(false);
-    
+
     // 停止录制
     if (stopFnRef.current) {
-      stopFnRef.current();
+      chrome.runtime.sendMessage({ type: 'SAVE_EVENTS' });
+      stopFnRef.current?.();
+
+      console.log('[content] rrweb stopped');
     }
   };
-  
+
   return {
     startRecord,
     stopRecord,
     isRecording,
-    getEvents: () => eventRef.current
-  }
-};
+    getEvents: () => eventRef.current,
+  };
+};