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

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

utils/messages.tsx

@@ -32,7 +32,23 @@ export const messages = {
 };
 
 interface ProtocolMap {
-  getStringLength(data: string): number;
+  // --- Popup 相关 ---
+  'popup:start': () => { ok: boolean };
+  'popup:stop': () => { ok: boolean };
+  'popup:started': () => void;
+  'popup:stopped': () => void;
+  'popup:check-status': () => { active: boolean; startTime?: number };
+  'popup:ready': () => void;
+
+  // --- Content 相关 ---
+  'content:save-tracke-events': (event) => boolean;
+  'content:start-recording': () => { ok: boolean; error?: string };
+  'content:stop-recording': () => { ok: boolean };
+  'content:check-status': () => boolean;
+
+  // --- Offscreen 相关 ---
+  'offscreen:start-recording': (streamId: string) => void;
+  'offscreen:stop-recording': () => void;
 }
 
 export const { sendMessage, onMessage } = defineExtensionMessaging<ProtocolMap>();

utils/useRecorder.tsx

@@ -1,18 +1,16 @@
 import * as rrweb from 'rrweb';
 import { listenerHandler } from '@rrweb/types';
 import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
+import { sendMessage } from '@/utils/messages';
 
 export const createRecorder = () => {
   let stopFn: listenerHandler | null = null;
 
-  const startRecord = async (msg: string) => {
+  const startRecord = async () => {
     try {
       const handler = rrweb.record({
         emit(event) {
-          chrome.runtime.sendMessage({
-            type: msg,
-            payload: event,
-          });
+          sendMessage('content:save-tracke-events', event);
         },
         plugins: [getRecordConsolePlugin()],
       });