refactor: 统一扩展消息机制并优化组件结构

1、统一消息系统：将 background、content 和 popup 的通信方式从原生的 chrome.runtime 迁移至 @webext-core/messaging，修复了消息回调返回 undefined 的问题。
2、优化组件结构：将通用组件从 entrypoints/popup/components 迁移至根目录 components，并使用 MUI 重构了 Navbar。
3、同步更新：调整了录制工具 (useRecorder) 和各页面组件（RecordeReplayPage, TestPage等），以适配新的消息协议和组件路径。

entrypoints/popup/pages/RecordeReplayPage.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo } from 'react';
 import { AppState } from '../types';
-import { messages } from '@/utils/messages';
+import { sendMessage, onMessage } from '@/utils/messages';
 import { Button } from '@mui/material';
 
 const RecordeReplayPage = () => {
@@ -8,27 +8,22 @@ const RecordeReplayPage = () => {
   const isRecording = useMemo(() => status === AppState.RECORDING, [status]);
 
   useEffect(() => {
-    const handleMessage = (msg: { type: string }) => {
-      if (msg.type === messages.popup.ready) {
-        setStatus(AppState.READ);
-      }
+    const unlistenStarted = onMessage('popup:started', () => {
+      console.log('[popup] Received started message');
+      setStatus(AppState.RECORDING);
+    });
 
-      if (msg.type === messages.popup.to.started) {
-        console.log('[popup] Received started message');
-        setStatus(AppState.RECORDING);
-      }
+    const unlistenStopped = onMessage('popup:stopped', () => {
+      setStatus(AppState.READ);
+    });
 
-      if (msg.type === messages.popup.to.stopped) {
-        setStatus(AppState.READ);
-      }
-    };
+    const unlistenReady = onMessage('popup:ready', () => {
+      setStatus(AppState.READ);
+    });
 
-    browser.runtime.onMessage.addListener(handleMessage);
-
-    browser.runtime
-      .sendMessage({ type: messages.popup.checkStatus })
+    sendMessage('popup:check-status', undefined)
       .then((res) => {
-        if (res?.data?.isRecording) {
+        if (res?.active) {
           setStatus(AppState.RECORDING);
         } else {
           setStatus(AppState.READ);
@@ -38,13 +33,20 @@ const RecordeReplayPage = () => {
         console.error(err);
       });
 
-    return () => browser.runtime.onMessage.removeListener(handleMessage);
+    return () => {
+      unlistenStarted();
+      unlistenStopped();
+      unlistenReady();
+    };
   }, []);
 
   const toggleRecording = async () => {
     try {
-      const actionType = isRecording ? messages.popup.from.stop : messages.popup.from.start;
-      await browser.runtime.sendMessage({ type: actionType });
+      if (isRecording) {
+        await sendMessage('popup:stop', undefined);
+      } else {
+        await sendMessage('popup:start', undefined);
+      }
     } catch (error) {
       console.error('Error toggling recording:', error);
       setStatus(AppState.READ);

entrypoints/popup/pages/TestPage.tsx

@@ -3,12 +3,8 @@ import { Button } from '@mui/material';
 
 const TestPage = () => {
   const handleSeedMessage = async () => {
-    const tabs = await browser.tabs.query({ active: true, currentWindow: true });
-    tabs.forEach(async (tab) => {
-      console.log(tab.id);
-      const length = await sendMessage('getStringLength', 'hello world', tab.id);
-      console.log('字符串长度:', length);
-    });
+    const status = await sendMessage('popup:check-status');
+    console.log(`[popup]status: ${status}`);
   };
   return (
     <div>

entrypoints/popup/pages/TimestampPage.tsx

@@ -1,6 +1,6 @@
-import { TimestampToDatetime } from '../components/TimestampToDatetime';
-import { DatetimeToTimestamp } from '../components/DatetimeToTimestamp';
-import { TimestampExecution } from '../components/TimestampExecution';
+import { TimestampToDatetime } from '@/components/TimestampToDatetime';
+import { DatetimeToTimestamp } from '@/components/DatetimeToTimestamp';
+import { TimestampExecution } from '@/components/TimestampExecution';
 
 const TimestampPage = () => {
   return (