feat: 添加录制功能，优化消息处理，修复拼写错误，更新下载逻辑

entrypoints/background.ts

@@ -1,5 +1,8 @@
 import '../.wxt/types/imports.d.ts';
 import { browser } from 'wxt/browser';
+import { downloadHtmlInBackground } from '@/utils/recordUtils.tsx';
+
+const events: unknown[] = [];
 
 export default defineBackground(() => {
   // 监听扩展安装或更新事件
@@ -36,8 +39,8 @@ export default defineBackground(() => {
     if (msg.type === messages.popup.checkStatus) {
       console.log('[bg] checkStatus received');
       sendToActiveTab({ type: messages.content.checkStatus })
-        .then(() => {
-          sendResponse({ ok: true });
+        .then((res) => {
+          sendResponse(res);
         })
         .catch(() => {
           console.error('Failed to check status in content script');
@@ -63,7 +66,8 @@ export default defineBackground(() => {
       console.log('[bg] stopRecording received');
       sendToActiveTab({ type: messages.content.to.stopRecording })
         .then(async () => {
-          await chrome.runtime.sendMessage({ type: messages.popup.to.stoped });
+          await chrome.runtime.sendMessage({ type: messages.popup.to.stopped });
+          downloadHtmlInBackground(events);
           sendResponse({ ok: true });
         })
         .catch(() => {
@@ -78,6 +82,7 @@ export default defineBackground(() => {
   chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
     if (msg.type === messages.content.from.saveTrackeEvents) {
       console.log('[bg] saveTrackeEvents received:', msg.payload);
+      events.push(msg.payload);
       sendResponse({ ok: true });
     }
   });
@@ -95,7 +100,7 @@ export default defineBackground(() => {
     const activeTab = activeTabs[0];
     const sendTo = message.activeTabId || activeTab.id;
     try {
-      await chrome.tabs.sendMessage(sendTo!, message);
+      return await chrome.tabs.sendMessage(sendTo!, message);
     } catch (error) {
       console.error('Error sending message to active tab:', error);
       throw error;

entrypoints/content.ts

@@ -1,36 +1,66 @@
 import '../.wxt/types/imports.d.ts';
 import { createRecorder } from '@/utils/useRecorder';
 
+interface IResponse {
+  ok: boolean;
+  error?: string;
+  data?: unknown;
+}
+
 export default defineContentScript({
   // matches: ['*://*.google.com/*'],
   matches: ['<all_urls>'],
   runAt: 'document_start',
   main() {
     const recorder = createRecorder();
+    let isRecording = false;
 
     // 监听来自 background script 的消息
-    chrome.runtime.onMessage.addListener((msg: { type: string }, _sender, sendResponse) => {
-      if (msg.type === messages.content.checkStatus) {
-        // 检查状态的处理逻辑
-        console.log('[content] checkStatus received');
-        sendResponse({ ok: true });
-      }
+    chrome.runtime.onMessage.addListener(
+      (msg: { type: string }, _sender, sendResponse: (response: IResponse) => void) => {
+        const handleAsyncMessage = async () => {
+          try {
+            switch (msg.type) {
+              // 在这里处理异步消息类型
+              case messages.content.checkStatus:
+                return { ok: true, data: { isRecording } };
 
-      if (msg.type === messages.content.to.startRecording) {
-        // 开始录制的处理逻辑
-        console.log('[content] startRecording received');
-        recorder.startRecord(messages.content.from.saveTrackeEvents);
-        sendResponse({ ok: true });
-      }
+              case messages.content.to.startRecording: {
+                const started = await recorder.startRecord(messages.content.from.saveTrackeEvents);
 
-      if (msg.type === messages.content.to.stopRecording) {
-        // 停止录制的处理逻辑
-        console.log('[content] stopRecording received');
-        recorder.stopRecord();
-        sendResponse({ ok: true });
-      }
+                if (started) {
+                  isRecording = true;
+                  return { ok: true };
+                } else {
+                  // 如果启动失败，返回错误信息
+                  return { ok: false, error: 'Failed to start recorder' };
+                }
+              }
 
-      return true;
-    });
+              case messages.content.to.stopRecording:
+                // 停止录制的处理逻辑
+                console.log('[content] stopRecording received');
+                recorder.stopRecord();
+                isRecording = false;
+                return { ok: true };
+
+              default:
+                return { ok: false, error: 'Unknown message type' };
+            }
+          } catch (error) {
+            console.error('Error handling message:', error);
+            return { ok: false };
+          }
+        };
+
+        handleAsyncMessage().then((response) => {
+          if (sendResponse) {
+            sendResponse(response);
+          }
+        });
+
+        return true;
+      },
+    );
   },
 });

entrypoints/popup/pages/RecordeReplayPage.tsx

@@ -11,20 +11,31 @@ const RecordeReplayPage = () => {
       if (msg.type === messages.popup.ready) {
         setStatus(AppState.READ);
       }
-      
+
       if (msg.type === messages.popup.to.started) {
         console.log('[popup] Received started message');
         setStatus(AppState.RECORDING);
       }
 
-      if (msg.type === messages.popup.to.stoped) {
+      if (msg.type === messages.popup.to.stopped) {
         setStatus(AppState.READ);
       }
     };
 
     browser.runtime.onMessage.addListener(handleMessage);
 
-    browser.runtime.sendMessage({ type: messages.popup.checkStatus });
+    browser.runtime
+      .sendMessage({ type: messages.popup.checkStatus })
+      .then((res) => {
+        if (res?.data?.isRecording) {
+          setStatus(AppState.RECORDING);
+        } else {
+          setStatus(AppState.READ);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+      });
 
     return () => browser.runtime.onMessage.removeListener(handleMessage);
   }, []);