feat: 优化消息处理逻辑，添加录制开始和停止的消息处理，删除未使用的 chromeUtils 文件

entrypoints/background.ts

@@ -31,7 +31,6 @@ export default defineBackground(() => {
   chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
     if (msg.type === messages.popup.checkStatus) {
       console.log('[bg] checkStatus received');
-      // void chrome.runtime.sendMessage({ type: messages.content.checkStatus });
       sendToActiveTab({ type: messages.content.checkStatus })
         .then(() => {
           sendResponse({ ok: true });
@@ -42,10 +41,28 @@ export default defineBackground(() => {
       return true;
     }
 
-    if (msg.type === messages.offscreen.to.startRecording) {
+    if (msg.type === messages.popup.from.start) {
       console.log('[bg] startRecording received');
-      sendResponse({ ok: true });
+      sendToActiveTab({ type: messages.content.to.startRecording })
-      // void browser.runtime.sendMessage({ type: messages.popup.to.started });
+        .then(async () => {
+          await chrome.runtime.sendMessage({ type: messages.popup.to.started });
+          sendResponse({ ok: true });
+        })
+        .catch(() => {
+          sendResponse({ ok: false });
+        });
+    }
+
+    if (msg.type === messages.popup.from.stop) {
+      console.log('[bg] stopRecording received');
+      sendToActiveTab({ type: messages.content.to.stopRecording })
+        .then(async () => {
+          await chrome.runtime.sendMessage({ type: messages.popup.to.stoped });
+          sendResponse({ ok: true });
+        })
+        .catch(() => {
+          sendResponse({ ok: false });
+        });
     }
 
     return true;

entrypoints/content.ts

@@ -8,10 +8,21 @@ export default defineContentScript({
     // 监听来自 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 });
-      } else {
+      }
-        console.log('[content] unknown message type:', msg.type);
+
+      if (msg.type === messages.content.to.startRecording) {
+        // 开始录制的处理逻辑
+        console.log('[content] startRecording received');
+        sendResponse({ ok: true });
+      }
+      
+      if (msg.type === messages.content.to.stopRecording) {
+        // 停止录制的处理逻辑
+        console.log('[content] stopRecording received');
+        sendResponse({ ok: true });
       }
 
       return true;

entrypoints/popup/pages/RecordeReplayPage.tsx

@@ -1,23 +1,23 @@
 import { useEffect, useState } from 'react';
 import { AppState } from '../types';
-import { messages } from '../../../utils/messages';
+import { messages } from '@/utils/messages';
 
 const RecordeReplayPage = () => {
   const [status, setStatus] = useState<AppState>(AppState.READ);
-  const [isRecording, setIsRecording] = useState(false);
+  const isRecording = useMemo(() => status === AppState.RECORDING, [status]);
-
-  const getActiveTab = async () => {
-    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
-    return tab;
-  };
 
   useEffect(() => {
     const handleMessage = (msg: { type: string }) => {
       if (msg.type === messages.popup.ready) {
         setStatus(AppState.READ);
-      } else if (msg.type === messages.popup.to.started) {
+      }
+      
+      if (msg.type === messages.popup.to.started) {
+        console.log('[popup] Received started message');
         setStatus(AppState.RECORDING);
-      } else if (msg.type === messages.popup.to.stoped) {
+      }
+
+      if (msg.type === messages.popup.to.stoped) {
         setStatus(AppState.READ);
       }
     };
@@ -29,40 +29,23 @@ const RecordeReplayPage = () => {
     return () => browser.runtime.onMessage.removeListener(handleMessage);
   }, []);
 
-  useEffect(() => {
-    const checkStatus = async () => {
-      const tab = await getActiveTab();
-      if (tab?.id) {
-        try {
-          chrome.tabs.sendMessage(tab.id, { command: 'CHECK_STATUS' }, (response) => {
-            // 如果 content script 没加载，这里会报错，需要 catch
-            if (chrome.runtime.lastError) {
-              console.log('Content script not ready');
-              return;
-            }
-            if (response?.isRecording) {
-              setIsRecording(true);
-              setStatus(AppState.RECORDING);
-              console.log(status);
-            }
-          });
-        } catch (e) {
-          console.error(e);
-        }
-      }
-    };
-    checkStatus();
-  }, [status]);
-
   const toggleRecording = async () => {
-    const tab = await getActiveTab();
+    try {
-    if (!tab?.id) return;
+      const actionType = isRecording ? messages.popup.from.stop : messages.popup.from.start;
+      await browser.runtime.sendMessage({ type: actionType });
+    } catch (error) {
+      console.error('Error toggling recording:', error);
+      setStatus(AppState.READ);
+    }
   };
 
   return (
     <div style={{ padding: '20px' }}>
       <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
-        <button className={`action-btn ${isRecording ? 'stop-btn' : ''}`} onClick={toggleRecording}>
+        <button
+          className={`action-btn ${isRecording ? 'stop-btn' : 'start-btn'}`}
+          onClick={toggleRecording}
+        >
           {isRecording ? '停止录制' : '开始录制'}
         </button>
       </div>

utils/chromeUtils.tsx

@@ -1,41 +0,0 @@
-/**
- * 使用Chrome扩展API复制文本到剪贴板
- * @param text 复制文本
- * @returns
- *  - false: 复制失败
- *  - true: 复制成功
- */
-export const copyToClipboard = async (text: string) => {
-  console.log('尝试复制文本:', text);
-  if (chrome && chrome.runtime && chrome.runtime.sendMessage) {
-    console.log('使用Chrome扩展API复制');
-    return new Promise((resolve, reject) => {
-      chrome.runtime.sendMessage(
-        {
-          action: 'copy',
-          text: text,
-        },
-        (response) => {
-          console.log('收到background响应:', response, 'lastError:', chrome.runtime.lastError);
-
-          // 检查是否有运行时错误
-          if (chrome.runtime.lastError) {
-            console.error('Chrome运行时错误:', chrome.runtime.lastError.message);
-            return reject(false);
-          }
-
-          // 检查响应
-          if (response && response.success) {
-            console.log('通过background复制成功');
-            return resolve(true);
-          } else {
-            console.error('通过background复制失败:', response?.error);
-            return reject(false);
-          }
-        }
-      );
-    });
-  }
-
-  return Promise.reject(false);
-};

utils/messages.tsx

@@ -2,6 +2,7 @@ export const messages = {
   popup: {
     from: {
       start: 'popup:start',
+      stop: 'popup:stop',
     },
     to: {
       stoped: 'popup:stoped',