refactor: 移除所有录制功能代码

- 删除录制相关页面组件（RecordReplayPage、ReplayListPage、ReplayPlayerPage）
- 删除录制工具文件（recordEventsDb、recordUtils、useRecorder、tabUtils）
- 清理 background.ts 和 content.ts 中的录制代码
- 更新 App.tsx 移除录制路由
- 清理 messages.tsx 中的消息定义
- 删除 types.tsx 中的录制状态
- 移除 package.json 中的 rrweb 相关依赖
- 更新 wxt.config.ts 移除 offscreen、downloads 权限
- 删除 offscreen 目录

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -1,4 +1,3 @@
-```
 # CLAUDE.md
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
@@ -10,6 +9,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ## 核心命令
 
 ### 开发相关
+
 - `npm run dev` - 启动 Chrome 浏览器的开发模式
 - `npm run dev:firefox` - 启动 Firefox 浏览器的开发模式
 - `npm run build` - 构建 Chrome 浏览器的生产版本
@@ -19,7 +19,27 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 - `npm run compile` - TypeScript 类型检查（不生成文件）
 - `npm run lint` - 运行 ESLint 检查
 
+### 测试相关
+
+- `npm run test` - 运行所有测试（单次执行）
+- `npm run test:watch` - 运行测试并监听文件变化
+- `npm run test:coverage` - 运行测试并生成覆盖率报告
+
+**运行单个测试文件：**
+
+```bash
+npx vitest run components/__tests__/CopyButton.test.tsx
+```
+
+**测试技术栈：**
+
+- Vitest - 测试框架
+- @testing-library/react - React 组件测试
+- @testing-library/user-event v13 - 用户交互模拟（注意：v13 不支持 setup()，使用 fireEvent）
+- jsdom - 浏览器环境模拟
+
 ### 依赖与准备
+
 - `npm install` - 安装依赖
 - `postinstall` 会自动运行 `wxt prepare` 准备开发环境
 - `prepare` 钩子会初始化 Husky Git 钩子
@@ -27,6 +47,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ## 项目架构
 
 ### 技术栈
+
 - **框架**: WXT (Web Extension Toolkit) - 浏览器扩展开发框架
 - **前端**: React 19 + TypeScript
 - **UI 库**: Material UI (MUI)
@@ -36,6 +57,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 - **路由**: React Router DOM
 
 ### 目录结构
+
 ```
 
 ├── components/ # 可复用 UI 组件
@@ -74,39 +96,91 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 ├── wxt.config.ts # WXT 配置
 └── web-ext.config.ts # WebExtensions 配置
 
-````
+```
 
 ### 核心功能实现
 
 #### 1. 时间戳转换工具
+
 - 位置: `components/` 目录下的时间戳相关组件
 - 依赖: dayjs 库进行日期处理
 - 功能: 支持日期与时间戳的双向转换，支持多种格式
 
 #### 2. 录制与回放功能
+
 - 位置: `utils/useRecorder.tsx` (核心录制逻辑)、`utils/recordUtils.tsx` (工具函数)
 - 依赖: rrweb 库
 - 存储: IndexedDB (Dexie.js) - `utils/recordEventsDb.ts`
 - 特点: 支持分块存储录制事件，优化性能
 
+**录制架构流程：**
+
+1. **开始录制** (`popup:start` → `background.ts` → `content.ts`)
+   - Popup 发送开始录制消息
+   - Background 生成 sessionId，初始化 IndexedDB 会话
+   - Content Script 启动 rrweb 录制器
+
+2. **事件存储** (`content:save-track-events`)
+   - rrweb 捕获事件后通过消息发送给 Background
+   - Background 使用 IndexedDB 分块存储（每块 100 个事件）
+
+3. **停止录制** (`popup:stop`)
+   - Background 从 IndexedDB 流式读取所有事件
+   - 生成回放 HTML 文件并下载
+   - 保留录制历史（不删除 IndexedDB 数据）
+
+4. **状态管理**
+   - 录制状态存储在 `chrome.storage.local` (recorder_state)
+   - 支持 Tab 切换检测和 Tab 关闭自动停止
+
 #### 3. 通信系统
+
 - 位置: `utils/messages.tsx`
 - 机制: 使用 `@webext-core/messaging` 库实现
 - 通信通道: 后台脚本 ↔ 内容脚本 ↔ 弹窗 ↔ 离屏文档
 
+**核心消息类型：**
+
+- `popup:start` / `popup:stop` - Popup 控制录制
+- `popup:started` / `popup:stopped` - 状态变化通知
+- `popup:check-status` - 查询录制状态
+- `content:start-recording` / `content:stop-recording` - 控制 Content Script
+- `content:save-track-events` - 保存录制事件
+- `popup:get-sessions` / `popup:delete-session` - 录制会话管理
+
 #### 4. 数据存储
+
 - Chrome Storage API: `utils/chromeStorage.ts` (用于配置等小数据)
 - IndexedDB: `utils/recordEventsDb.ts` (用于存储大量录制事件)
 
+**IndexedDB 数据结构：**
+
+- **sessions** 表: 录制会话元数据
+  - `id`: sessionId (string)
+  - `startTime`: 录制开始时间 (number)
+  - `tabId`: 录制的标签页 ID (number)
+  - `chunkCount`: 数据块数量 (number)
+  - `totalEvents`: 总事件数 (number)
+
+- **events** 表: 事件数据块
+  - `id`: 自增 ID (number)
+  - `sessionId`: 关联的会话 ID
+  - `chunkIndex`: 块索引 (number)
+  - `events`: rrweb 事件数组 (unknown[])
+  - `timestamp`: 时间戳 (number)
+  - CHUNK_SIZE: 100 个事件/块
+
 ### 关键配置文件
 
 #### wxt.config.ts
+
 - 配置 WXT 框架参数
 - 启用 React 模块
 - 配置浏览器扩展权限
 - Vite 构建配置（使用 Terser 压缩，强制 ASCII 编码）
 
 #### manifest 权限
+
 ```typescript
 permissions: [
   'storage',           // 存储权限
@@ -120,7 +194,7 @@ permissions: [
   'debugger',          // 调试器
 ],
 host_permissions: ['<all_urls>']  // 访问所有网站
-````
+```
 
 ## 开发注意事项
 
@@ -141,7 +215,3 @@ host_permissions: ['<all_urls>']  // 访问所有网站
 - 使用 ESLint 进行代码检查
 - Husky 用于 Git 钩子管理
 - Lint-staged 确保暂存文件符合规范
-
-```
-
-```

entrypoints/background.ts

@@ -1,54 +1,5 @@
 import '../.wxt/types/imports.d.ts';
 import { browser } from 'wxt/browser';
-import { downloadHtmlInBackground } from '@/utils/recordUtils.tsx';
-import { sendMessage, onMessage } from '@/utils/messages';
-import { getActiveTabId } from '@/utils/tabUtils';
-import {
-  initRecordingSession,
-  appendEvents,
-  streamAllEvents,
-  deleteRecordingSession,
-  generateSessionId,
-  getAllSessions,
-  getAllEvents,
-} from '@/utils/recordEventsDb';
-
-interface RecorderState {
-  isRecording: boolean;
-  recordingTabId: number | undefined;
-  sessionId: string | undefined;
-  startTime: number | undefined;
-}
-
-const STORAGE_KEY = 'recorder_state';
-
-// 从 storage 恢复录制状态
-async function loadRecorderState(): Promise<RecorderState> {
-  try {
-    const result = await browser.storage.local.get(STORAGE_KEY);
-    return (result[STORAGE_KEY] as RecorderState) || {
-      isRecording: false,
-      recordingTabId: undefined,
-      sessionId: undefined,
-      startTime: undefined,
-    };
-  } catch (err) {
-    console.error('[background] Failed to load recorder state:', err);
-    return { isRecording: false, recordingTabId: undefined, sessionId: undefined, startTime: undefined };
-  }
-}
-
-// 保存录制状态到 storage
-async function saveRecorderState(state: Partial<RecorderState>) {
-  try {
-    const currentState = await loadRecorderState();
-    await browser.storage.local.set({
-      [STORAGE_KEY]: { ...currentState, ...state },
-    });
-  } catch (err) {
-    console.error('[background] Failed to save recorder state:', err);
-  }
-}
 
 export default defineBackground(() => {
   // 监听扩展安装或更新事件
@@ -92,217 +43,9 @@ export default defineBackground(() => {
     console.log(
       `Successfully injected content script into ${successCount}/${targetTabs.length} tabs.`,
     );
-
-    // 扩展安装/更新时重置录制状态
-    await saveRecorderState({ isRecording: false, recordingTabId: undefined, sessionId: undefined, startTime: undefined });
-  });
-
-  // 监听 Tab 切换 - 如果正在录制且切换到其他 Tab，发出警告
-  chrome.tabs.onActivated.addListener(async (activeInfo) => {
-    const state = await loadRecorderState();
-    if (state.isRecording && state.recordingTabId !== activeInfo.tabId) {
-      console.warn('[background] 录制中切换到其他 Tab，当前 Tab:', activeInfo.tabId, '录制 Tab:', state.recordingTabId);
-      // 可选：发送通知给 popup 更新 UI 提示用户
-      await sendMessage('popup:tab-changed', { currentTabId: activeInfo.tabId, recordingTabId: state.recordingTabId });
-    }
   });
 
   chrome.tabs.onUpdated.addListener((tabId) => {
     console.log('加载完成的 Tab ID:', tabId);
   });
-
-  // 监听 Tab 关闭 - 如果关闭的是录制中的 Tab，自动停止录制
-  chrome.tabs.onRemoved.addListener(async (tabId) => {
-    const state = await loadRecorderState();
-    if (state.isRecording && state.recordingTabId === tabId) {
-      console.warn('[background] 录制中的 Tab 已关闭，自动停止录制');
-      // 这里可以调用停止逻辑或通知 popup
-      await sendMessage('popup:stopped', undefined);
-      await saveRecorderState({ isRecording: false, recordingTabId: undefined, sessionId: undefined, startTime: undefined });
-    }
-  });
-
-  onMessage('popup:check-status', async () => {
-    console.log('[background] popup:check-status');
-    const state = await loadRecorderState();
-
-    // 如果正在录制，额外检查 content script 的实际状态
-    if (state.isRecording && state.recordingTabId) {
-      try {
-        const result = await sendMessage('content:check-status', undefined, state.recordingTabId);
-        console.log('[background] content check-status result:', result);
-        // 如果 content script 返回 false，说明状态不同步，需要重置
-        if (!result) {
-          await saveRecorderState({ isRecording: false, recordingTabId: undefined, sessionId: undefined, startTime: undefined });
-          return { active: false, startTime: -1 };
-        }
-      } catch (err) {
-        console.error('[background-err] check-status failed:', err);
-        // Content script 可能已被移除（如页面刷新），重置状态
-        await saveRecorderState({ isRecording: false, recordingTabId: undefined, sessionId: undefined, startTime: undefined });
-        return { active: false, startTime: -1 };
-      }
-    }
-
-    return { active: state.isRecording, startTime: state.startTime ?? -1 };
-  });
-
-  onMessage('popup:start', async () => {
-    console.log('[bg] startRecording received');
-    try {
-      // 检查是否已经在录制
-      const currentState = await loadRecorderState();
-      if (currentState.isRecording) {
-        console.warn('[bg] 已经在录制中，无法开始新的录制');
-        return { ok: false, error: 'Already recording' };
-      }
-
-      const tabId = await getActiveTabId();
-      if (!tabId) {
-        return { ok: false, error: 'No active tab' };
-      }
-      const response = await sendMessage('content:start-recording', undefined, tabId);
-      if (response.ok) {
-        // 生成新的会话 ID 并初始化 IndexedDB 会话
-        const sessionId = generateSessionId();
-        console.log('[bg] 开始录制，sessionId:', sessionId, 'tabId:', tabId);
-        await initRecordingSession(sessionId, tabId);
-
-        // 保存录制状态到 storage
-        await saveRecorderState({
-          isRecording: true,
-          recordingTabId: tabId,
-          sessionId,
-          startTime: Date.now(),
-        });
-        console.log('[bg] 录制状态已保存');
-        await sendMessage('popup:started', undefined);
-        return { ok: true };
-      }
-      return { ok: false, error: response.error };
-    } catch (error) {
-      console.error('Failed to start recording in content script', error);
-      return { ok: false, error: String(error) };
-    }
-  });
-
-  onMessage('popup:stop', async () => {
-    console.log('[bg] stopRecording received');
-    try {
-      const state = await loadRecorderState();
-
-      if (!state.isRecording) {
-        console.warn('[bg] 当前不在录制状态');
-        return { ok: false, error: 'Not recording' };
-      }
-
-      const currentTabId = await getActiveTabId();
-
-      // Tab 一致性检查 - 允许一定程度的灵活性
-      if (state.recordingTabId !== currentTabId) {
-        console.warn(
-          `[bg] Tab 不一致：录制 Tab=${state.recordingTabId}, 当前 Tab=${currentTabId}`,
-        );
-        // 仍然尝试在录制 Tab 上停止（如果该 Tab 还存在）
-        // 如果需要在当前 Tab 停止，可以移除这个条件判断
-      }
-
-      const targetTabId = state.recordingTabId ?? currentTabId;
-      const response = await sendMessage('content:stop-recording', undefined, targetTabId);
-
-      if (response.ok) {
-        // 从 IndexedDB 流式读取所有事件并下载回放文件
-        if (state.sessionId) {
-          const allEvents: unknown[] = [];
-          await streamAllEvents(state.sessionId, (events) => {
-            allEvents.push(...events);
-          });
-          downloadHtmlInBackground(allEvents);
-
-          // 不再删除会话数据，保留录制历史
-        }
-
-        // 清空状态
-        await saveRecorderState({
-          isRecording: false,
-          recordingTabId: undefined,
-          sessionId: undefined,
-          startTime: undefined,
-        });
-
-        await sendMessage('popup:stopped', undefined);
-        return { ok: true };
-      }
-      return { ok: false, error: 'Failed to stop recording in content script' };
-    } catch (error: unknown) {
-      console.error('Failed to stop recording in content script', error);
-      return { ok: false, error: String(error) };
-    }
-  });
-
-  // 获取所有录制会话
-  onMessage('popup:get-sessions', async () => {
-    try {
-      const sessions = await getAllSessions();
-      return sessions;
-    } catch (error) {
-      console.error('[bg] 获取录制会话失败:', error);
-      return [];
-    }
-  });
-
-  // 获取会话事件
-  onMessage('popup:get-session-events', async (message) => {
-    try {
-      const sessionId = message.data;
-      const events = await getAllEvents(sessionId);
-      return events;
-    } catch (error) {
-      console.error('[bg] 获取会话事件失败:', error);
-      return [];
-    }
-  });
-
-  // 删除会话
-  onMessage('popup:delete-session', async (message) => {
-    try {
-      const sessionId = message.data;
-      await deleteRecordingSession(sessionId);
-      return { ok: true };
-    } catch (error) {
-      console.error('[bg] 删除会话失败:', error);
-      return { ok: false };
-    }
-  });
-
-  // 下载会话回放
-  onMessage('popup:download-session', async (message) => {
-    try {
-      const sessionId = message.data;
-      const events = await getAllEvents(sessionId);
-      downloadHtmlInBackground(events);
-      return { ok: true };
-    } catch (error) {
-      console.error('[bg] 下载会话失败:', error);
-      return { ok: false };
-    }
-  });
-
-  onMessage('content:save-track-events', async (event) => {
-    const state = await loadRecorderState();
-    console.log('[bg] 收到事件，当前状态:', state);
-    if (!state.isRecording) {
-      console.warn('[bg] 收到事件但当前不在录制状态，丢弃事件');
-      return false;
-    }
-
-    if (!state.sessionId) {
-      console.error('[bg] 没有 sessionId，无法存储事件');
-      return false;
-    }
-
-    // 使用 IndexedDB 分块存储事件
-    await appendEvents(state.sessionId, [event]);
-    return true;
-  });
 });

entrypoints/content.ts

@@ -1,45 +1,9 @@
 import '../.wxt/types/imports.d.ts';
-import { createRecorder } from '@/utils/useRecorder';
-import { onMessage } from '@/utils/messages';
 
 export default defineContentScript({
-  // matches: ['*://*.google.com/*'],
   matches: ['<all_urls>'],
   runAt: 'document_start',
   main() {
-    const recorder = createRecorder();
+    // Content script placeholder
-    let isRecording = false;
-
-    onMessage('content:check-status', () => {
-      console.log(`[content]${isRecording}`);
-      return isRecording;
-    });
-
-    onMessage('content:start-recording', async () => {
-      try {
-        const started = await recorder.startRecord();
-        if (started) {
-          isRecording = true;
-          return { ok: true };
-        } else {
-          return { ok: false, error: 'Failed to start recorder' };
-        }
-      } catch (error) {
-        console.error('Error handling start recording:', error);
-        return { ok: false };
-      }
-    });
-
-    onMessage('content:stop-recording', () => {
-      try {
-        console.log('[content] stopRecording received');
-        recorder.stopRecord();
-        isRecording = false;
-        return { ok: true };
-      } catch (error) {
-        console.error('Error handling stop recording:', error);
-        return { ok: false };
-      }
-    });
   },
 });

entrypoints/offscreen/index.html

@@ -1,7 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <script src="main.tsx" type="module"></script>
-  </head>
-  <body></body>
-</html>

entrypoints/offscreen/main.tsx

@@ -1,28 +0,0 @@
-// import { useRef } from 'react';
-console.log('[offscreen] loaded');
-
-// const events = [];
-
-// chrome.runtime.onMessage.addListener((msg) => {
-//   if (msg.type === 'SAVE_EVENT') {
-//     console.log('[offscreen] rrweb event', msg.event);
-//     events.push(msg.event);
-//     // 这里你可以存 IndexedDB / memory / file
-//   }
-
-//   if (msg.type === 'SAVE_EVENTS') {
-//     console.log('[offscreen] SAVE_EVENTS received');
-//     console.log('[offscreen] total events:', events.length);
-//     console.log('[offscreen] events:', JSON.stringify(events));
-//     // const blob = new Blob([JSON.stringify(events)], {
-//     //   type: 'application/json',
-//     // });
-//     // reader.onload = () => {
-//     //   chrome.runtime.sendMessage({
-//     //     type: 'DOWNLOAD',
-//     //     dataUrl: reader.result,
-//     //   });
-//     // };
-//     // reader.readAsDataURL(blob);
-//   }
-// });

entrypoints/popup/App.tsx

@@ -1,10 +1,7 @@
 // App.js
 import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 import TimestampPage from './pages/TimestampPage';
-import RecordReplayPage from './pages/RecordReplayPage';
 import TestPage from './pages/TestPage';
-import ReplayListPage from './pages/ReplayListPage';
-import ReplayPlayerPage from './pages/ReplayPlayerPage';
 import Navbar from '../../components/Navbar';
 import RoutePersistence from '../../components/RoutePersistence';
 import './App.css';
@@ -13,8 +10,6 @@ import './App.css';
 const navItems = [
   { path: '/test', label: '测试页面', element: <TestPage /> },
   { path: '/', label: '时间戳', element: <TimestampPage /> },
-  { path: '/record-replay', label: '录制', element: <RecordReplayPage /> },
-  { path: '/replay-list', label: '历史回放', element: <ReplayListPage /> },
 ];
 
 function App() {
@@ -28,7 +23,6 @@ function App() {
           {navItems.map((item) => (
             <Route key={item.path} path={item.path} element={item.element} />
           ))}
-          <Route path="/replay/:id" element={<ReplayPlayerPage />} />
         </Routes>
       </div>
     </Router>

entrypoints/popup/pages/RecordReplayPage.tsx

@@ -1,120 +0,0 @@
-import { useEffect, useState, useMemo } from 'react';
-import { AppState } from '../types';
-import { sendMessage, onMessage } from '@/utils/messages';
-import { Button, Container, Stack, Typography, Alert } from '@mui/material';
-import { CircularProgress } from '@mui/material';
-
-const RecordReplayPage = () => {
-  const [status, setStatus] = useState<AppState>(AppState.READ);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const isRecording = useMemo(() => status === AppState.RECORDING, [status]);
-
-  useEffect(() => {
-    const unlistenStarted = onMessage('popup:started', () => {
-      console.log('[popup] Received started message');
-      setStatus(AppState.RECORDING);
-      setIsLoading(false);
-      setError(null);
-    });
-
-    const unlistenStopped = onMessage('popup:stopped', () => {
-      setStatus(AppState.READ);
-      setIsLoading(false);
-      setError(null);
-    });
-
-    const unlistenReady = onMessage('popup:ready', () => {
-      setStatus(AppState.READ);
-      setIsLoading(false);
-      setError(null);
-    });
-
-    sendMessage('popup:check-status', undefined)
-      .then((res) => {
-        if (res?.active) {
-          setStatus(AppState.RECORDING);
-        } else {
-          setStatus(AppState.READ);
-        }
-      })
-      .catch((err) => {
-        console.error(err);
-        setError('检查录制状态失败');
-      });
-
-    return () => {
-      unlistenStarted();
-      unlistenStopped();
-      unlistenReady();
-    };
-  }, []);
-
-  const toggleRecording = async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      if (isRecording) {
-        const result = await sendMessage('popup:stop', undefined);
-        if (!result?.ok) {
-          setError(result?.error || '停止录制失败');
-          setIsLoading(false);
-          return;
-        }
-      } else {
-        const result = await sendMessage('popup:start', undefined);
-        if (!result?.ok) {
-          setError(result?.error || '开始录制失败');
-          setIsLoading(false);
-          return;
-        }
-      }
-    } catch (error) {
-      console.error('Error toggling recording:', error);
-      setError('操作失败，请重试');
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <Container maxWidth={false} sx={{ py: 2.5 }}>
-      <Stack direction="column" spacing={2} sx={{ mb: 2.5 }}>
-        {error && (
-          <Alert severity="error" sx={{ fontSize: '0.875rem' }}>
-            {error}
-          </Alert>
-        )}
-
-        <Stack direction="row" spacing={1.25} justifyContent="center">
-          <Button
-            variant="contained"
-            size="medium"
-            color={isRecording ? 'error' : 'primary'}
-            onClick={toggleRecording}
-            disabled={isLoading}
-            sx={{ minWidth: 120 }}
-          >
-            {isLoading ? (
-              <CircularProgress size={20} color="inherit" />
-            ) : isRecording ? (
-              '停止录制'
-            ) : (
-              '开始录制'
-            )}
-          </Button>
-        </Stack>
-
-        <Typography
-          variant="body2"
-          color="text.secondary"
-          textAlign="center"
-          sx={{ mt: 1 }}
-        >
-          {isRecording ? '正在录制用户操作...' : '点击开始录制用户操作'}
-        </Typography>
-      </Stack>
-    </Container>
-  );
-};
-
-export default RecordReplayPage;

entrypoints/popup/pages/ReplayListPage.tsx

@@ -1,181 +0,0 @@
-import { useEffect, useState } from 'react';
-import {
-  Container,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemText,
-  ListItemSecondaryAction,
-  IconButton,
-  Typography,
-  Box,
-  CircularProgress,
-  Alert,
-  Button,
-} from '@mui/material';
-import {
-  PlayArrow as PlayIcon,
-  Download as DownloadIcon,
-  Delete as DeleteIcon,
-} from '@mui/icons-material';
-import { useNavigate } from 'react-router-dom';
-import { sendMessage } from '@/utils/messages';
-
-interface Session {
-  id: string;
-  startTime: number;
-  tabId: number;
-  chunkCount: number;
-  totalEvents: number;
-}
-
-const ReplayListPage = () => {
-  const [sessions, setSessions] = useState<Session[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    fetchSessions();
-  }, []);
-
-  const fetchSessions = async () => {
-    try {
-      const data = await sendMessage('popup:get-sessions');
-      setSessions(data || []);
-    } catch (err) {
-      console.error(err);
-      setError('获取录制历史失败');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handlePlay = (sessionId: string) => {
-    navigate(`/replay/${sessionId}`);
-  };
-
-  const handleDownload = async (sessionId: string) => {
-    try {
-      await sendMessage('popup:download-session', sessionId);
-    } catch (err) {
-      console.error(err);
-      setError('下载失败');
-    }
-  };
-
-  const handleDelete = async (sessionId: string) => {
-    if (window.confirm('确定要删除这个录制吗？')) {
-      try {
-        await sendMessage('popup:delete-session', sessionId);
-        fetchSessions();
-      } catch (err) {
-        console.error(err);
-        setError('删除失败');
-      }
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <Container maxWidth={false} sx={{ py: 2.5, display: 'flex', justifyContent: 'center' }}>
-        <CircularProgress />
-      </Container>
-    );
-  }
-
-  if (error) {
-    return (
-      <Container maxWidth={false} sx={{ py: 2.5 }}>
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {error}
-        </Alert>
-        <Button variant="contained" onClick={fetchSessions}>
-          重试
-        </Button>
-      </Container>
-    );
-  }
-
-  return (
-    <Container maxWidth={false} sx={{ py: 2.5 }}>
-      <Typography variant="h6" sx={{ mb: 2 }}>
-        录制历史
-      </Typography>
-
-      {sessions.length === 0 ? (
-        <Box textAlign="center" sx={{ py: 4 }}>
-          <Typography variant="body2" color="text.secondary">
-            暂无录制历史
-          </Typography>
-          <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
-            点击"录制与回放"页面的开始按钮进行录制
-          </Typography>
-        </Box>
-      ) : (
-        <List sx={{ width: '100%', maxWidth: 500, margin: '0 auto' }}>
-          {sessions.map((session) => (
-            <ListItem
-              key={session.id}
-              disablePadding
-              sx={{ mb: 1, borderRadius: 1, overflow: 'hidden' }}
-            >
-              <ListItemButton
-                sx={{ borderRadius: 1 }}
-                onClick={() => handlePlay(session.id)}
-              >
-                <ListItemText
-                  primary={
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                      <PlayIcon fontSize="small" />
-                      <Typography variant="body1">
-                        {new Date(session.startTime).toLocaleString()}
-                      </Typography>
-                    </Box>
-                  }
-                  secondary={
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                      <Typography variant="caption" color="text.secondary">
-                        事件数: {session.chunkCount * 100}
-                      </Typography>
-                      <Typography variant="caption" color="text.secondary">
-                        Tab: {session.tabId}
-                      </Typography>
-                    </Box>
-                  }
-                />
-                <ListItemSecondaryAction>
-                  <IconButton
-                    edge="end"
-                    size="small"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleDownload(session.id);
-                    }}
-                    title="下载"
-                  >
-                    <DownloadIcon fontSize="small" />
-                  </IconButton>
-                  <IconButton
-                    edge="end"
-                    size="small"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleDelete(session.id);
-                    }}
-                    title="删除"
-                    sx={{ color: 'error.main' }}
-                  >
-                    <DeleteIcon fontSize="small" />
-                  </IconButton>
-                </ListItemSecondaryAction>
-              </ListItemButton>
-            </ListItem>
-          ))}
-        </List>
-      )}
-    </Container>
-  );
-};
-
-export default ReplayListPage;

entrypoints/popup/pages/ReplayPlayerPage.tsx

@@ -1,159 +0,0 @@
-import { useEffect, useState, useCallback } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import {
-  Container,
-  Typography,
-  Box,
-  CircularProgress,
-  Alert,
-  IconButton,
-  Button,
-} from '@mui/material';
-import {
-  ArrowBack as ArrowBackIcon,
-  Download as DownloadIcon,
-  Delete as DeleteIcon,
-} from '@mui/icons-material';
-import { sendMessage } from '@/utils/messages';
-
-const ReplayPlayerPage = () => {
-  const { id } = useParams<{ id: string }>();
-  const navigate = useNavigate();
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [eventsData, setEventsData] = useState<unknown[] | null>(null);
-
-  const fetchSessionEvents = useCallback(async (sessionId: string) => {
-    try {
-      const data = await sendMessage('popup:get-session-events', sessionId);
-      setEventsData(data || []);
-    } catch (err) {
-      console.error(err);
-      setError('加载录制内容失败');
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (id) {
-      fetchSessionEvents(id);
-    }
-  }, [id, fetchSessionEvents]);
-
-  const handleDownload = async () => {
-    if (!id) return;
-    try {
-      await sendMessage('popup:download-session', id);
-    } catch (err) {
-      console.error(err);
-      setError('下载失败');
-    }
-  };
-
-  const handleDelete = async () => {
-    if (!id) return;
-    if (window.confirm('确定要删除这个录制吗？')) {
-      try {
-        await sendMessage('popup:delete-session', id);
-        navigate('/record-replay');
-      } catch (err) {
-        console.error(err);
-        setError('删除失败');
-      }
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <Container maxWidth={false} sx={{ py: 2.5, display: 'flex', justifyContent: 'center' }}>
-        <CircularProgress />
-      </Container>
-    );
-  }
-
-  if (error) {
-    return (
-      <Container maxWidth={false} sx={{ py: 2.5 }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
-          <IconButton onClick={() => navigate('/record-replay')} sx={{ mr: 1 }}>
-            <ArrowBackIcon />
-          </IconButton>
-          <Typography variant="h6">回放</Typography>
-        </Box>
-        <Alert severity="error" sx={{ mb: 2 }}>
-          {error}
-        </Alert>
-        <Button variant="contained" onClick={() => fetchSessionEvents(id!)}>
-          重试
-        </Button>
-      </Container>
-    );
-  }
-
-  if (!eventsData || eventsData.length === 0) {
-    return (
-      <Container maxWidth={false} sx={{ py: 2.5 }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
-          <IconButton onClick={() => navigate('/record-replay')} sx={{ mr: 1 }}>
-            <ArrowBackIcon />
-          </IconButton>
-          <Typography variant="h6">回放</Typography>
-        </Box>
-        <Alert severity="warning">
-          此会话没有事件数据，请尝试重新录制。
-        </Alert>
-      </Container>
-    );
-  }
-
-  return (
-    <Container maxWidth={false} sx={{ py: 2.5 }}>
-      <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
-        <IconButton onClick={() => navigate('/record-replay')} sx={{ mr: 1 }}>
-          <ArrowBackIcon />
-        </IconButton>
-        <Typography variant="h6">回放</Typography>
-        <Box sx={{ ml: 'auto', display: 'flex', gap: 1 }}>
-          <IconButton onClick={handleDownload} title="下载">
-            <DownloadIcon />
-          </IconButton>
-          <IconButton onClick={handleDelete} title="删除" sx={{ color: 'error.main' }}>
-            <DeleteIcon />
-          </IconButton>
-        </Box>
-      </Box>
-
-      <Box sx={{ borderRadius: 1, overflow: 'hidden', border: 1, borderColor: 'divider' }}>
-        <Box sx={{ p: 2, textAlign: 'center' }}>
-          <Typography variant="body1" color="text.secondary">
-            由于浏览器安全策略限制，无法在内联 iframe 中直接回放。
-          </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
-            请点击右上角的"下载"按钮，下载完整的回放 HTML 文件到本地查看。
-          </Typography>
-          <Button
-            variant="contained"
-            onClick={handleDownload}
-            sx={{ mt: 2 }}
-            startIcon={<DownloadIcon />}
-          >
-            下载回放文件
-          </Button>
-        </Box>
-      </Box>
-
-      <Box sx={{ mt: 2 }}>
-        <Alert severity="info">
-          <Typography variant="body2">
-            <strong>安全提示：</strong>浏览器扩展有严格的 Content Security Policy (CSP)
-            限制，禁止内联脚本执行，因此无法在扩展 popup 中直接显示回放内容。
-            下载的 HTML 文件包含了完整的回放代码，可以在任何现代浏览器中直接打开。
-          </Typography>
-        </Alert>
-      </Box>
-    </Container>
-  );
-};
-
-export default ReplayPlayerPage;

entrypoints/popup/pages/TestPage.tsx

@@ -1,4 +1,3 @@
-import { sendMessage } from '@/utils/messages';
 import { Button } from '@mui/material';
 import { useState, useEffect } from 'react';
 
@@ -17,11 +16,6 @@ const TestPage = () => {
     })();
   });
 
-  const handleSeedMessage = async () => {
-    const status = await sendMessage('popup:check-status');
-    console.log(`[popup]status: ${status}`);
-  };
-
   const handleAttach = () => {
     try {
       chrome.debugger.attach({ tabId: tabId }, '1.2', () => {
@@ -61,9 +55,6 @@ const TestPage = () => {
   };
   return (
     <div>
-      <Button variant="contained" color="primary" onClick={handleSeedMessage}>
-        发送消息
-      </Button>
       <Button variant="contained" color="primary" onClick={handleAttach}>
         attach
       </Button>

entrypoints/popup/types.tsx

@@ -1,4 +0,0 @@
-export enum AppState {
-  READ = 'ready',
-  RECORDING = 'recording',
-}

package.json

@@ -24,9 +24,6 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.8",
     "@mui/material": "^7.3.8",
-    "@rrweb/all": "^2.0.0-alpha.18",
-    "@rrweb/rrweb-plugin-console-record": "^2.0.0-alpha.18",
-    "@rrweb/rrweb-plugin-console-replay": "^2.0.0-alpha.18",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
@@ -34,15 +31,11 @@
     "@webext-core/messaging": "^2.3.0",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.19",
-    "dexie": "^4.2.1",
-    "dexie-react-hooks": "^4.2.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "react-markdown": "^6.0.3",
     "react-router-dom": "^6.30.2",
     "remark-gfm": "^1.0.0",
-    "rrweb": "^2.0.0-alpha.4",
-    "rrweb-player": "^1.0.0-alpha.4",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

utils/messages.tsx

@@ -1,28 +1,8 @@
 import { defineExtensionMessaging } from '@webext-core/messaging';
 
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 interface ProtocolMap {
-  // --- Popup 相关 ---
+  // Placeholder - 扩展消息协议
-  'popup:start': () => { ok: boolean; error?: string };
-  'popup:stop': () => { ok: boolean; error?: string };
-  'popup:started': () => void;
-  'popup:stopped': () => void;
-  'popup:tab-changed': (data: { currentTabId: number; recordingTabId: number | undefined }) => void;
-  'popup:check-status': () => { active: boolean; startTime?: number };
-  'popup:ready': () => void;
-  'popup:get-sessions': () => { id: string; startTime: number; tabId: number; chunkCount: number; totalEvents: number }[];
-  'popup:get-session-events': (sessionId: string) => unknown[];
-  'popup:delete-session': (sessionId: string) => { ok: boolean };
-  'popup:download-session': (sessionId: string) => { ok: boolean };
-
-  // --- Content 相关 ---
-  'content:save-track-events': (event: unknown) => 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/recordEventsDb.ts

@@ -1,367 +0,0 @@
-/**
- * IndexedDB 工具模块 - 用于分块存储录制事件
- * 避免长时间录制导致内存溢出
- */
-
-const DB_NAME = 'recording-events-db';
-const DB_VERSION = 1;
-const STORE_NAME = 'events';
-const CHUNK_SIZE = 100; // 每个 chunk 存储的事件数量
-
-export interface EventChunk {
-  id: number;
-  sessionId: string;
-  chunkIndex: number;
-  events: unknown[];
-  timestamp: number;
-}
-
-interface RecordingSession {
-  id: string;
-  startTime: number;
-  tabId: number;
-  chunkCount: number;
-  totalEvents: number;
-}
-
-let db: IDBDatabase | null = null;
-
-/**
- * 打开数据库连接
- */
-export async function openDB(): Promise<IDBDatabase> {
-  if (db) return db;
-
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.open(DB_NAME, DB_VERSION);
-
-    request.onerror = () => reject(request.error);
-    request.onsuccess = () => {
-      db = request.result;
-      resolve(db);
-    };
-
-    request.onupgradeneeded = (event) => {
-      const database = (event.target as IDBOpenDBRequest).result;
-
-      // 创建事件 chunk 存储
-      if (!database.objectStoreNames.contains(STORE_NAME)) {
-        const store = database.createObjectStore(STORE_NAME, { keyPath: 'id', autoIncrement: true });
-        store.createIndex('sessionId', 'sessionId', { unique: false });
-        store.createIndex('chunkIndex', 'chunkIndex', { unique: false });
-        store.createIndex('sessionId_chunkIndex', ['sessionId', 'chunkIndex'], { unique: true });
-      }
-
-      // 创建录制会话存储
-      if (!database.objectStoreNames.contains('sessions')) {
-        const sessionStore = database.createObjectStore('sessions', { keyPath: 'id' });
-        sessionStore.createIndex('startTime', 'startTime', { unique: false });
-      }
-    };
-  });
-}
-
-/**
- * 初始化新的录制会话
- */
-export async function initRecordingSession(sessionId: string, tabId: number): Promise<void> {
-  const database = await openDB();
-
-  return new Promise((resolve, reject) => {
-    const tx = database.transaction('sessions', 'readwrite');
-    const store = tx.objectStore('sessions');
-
-    const session: RecordingSession = {
-      id: sessionId,
-      startTime: Date.now(),
-      tabId,
-      chunkCount: 0,
-      totalEvents: 0,
-    };
-
-    const request = store.put(session);
-    request.onsuccess = () => resolve();
-    request.onerror = () => reject(request.error);
-  });
-}
-
-/**
- * 获取当前会话的 chunk 数量
- */
-export async function getSessionChunkCount(sessionId: string): Promise<number> {
-  // 参数验证
-  if (!sessionId || typeof sessionId !== 'string') {
-    console.error('[db] Invalid sessionId for getSessionChunkCount:', sessionId);
-    return 0;
-  }
-
-  const database = await openDB();
-
-  return new Promise((resolve) => {
-    const tx = database.transaction('sessions', 'readonly');
-    const store = tx.objectStore('sessions');
-
-    try {
-      const request = store.get(sessionId);
-
-      request.onsuccess = () => {
-        const session = request.result as RecordingSession | undefined;
-        resolve(session?.chunkCount || 0);
-      };
-      request.onerror = (e) => {
-        console.error('[db] Error getting session chunk count:', e);
-        resolve(0);
-      };
-    } catch (error) {
-      console.error('[db] Exception getting session chunk count:', error);
-      resolve(0);
-    }
-  });
-}
-
-/**
- * 追加事件到存储（自动分块）
- * 当当前 chunk 满时创建新 chunk
- */
-export async function appendEvents(sessionId: string, newEvents: unknown[]): Promise<void> {
-  const database = await openDB();
-  const chunkCount = await getSessionChunkCount(sessionId);
-
-  // 获取或创建当前 chunk
-  let currentChunk: EventChunk | null = null;
-  let currentChunkIndex = chunkCount > 0 ? chunkCount - 1 : 0;
-
-  if (chunkCount > 0) {
-    currentChunk = await getChunk(database, sessionId, currentChunkIndex);
-  }
-
-  // 如果当前 chunk 不存在或已满，创建新 chunk
-  if (!currentChunk || currentChunk.events.length >= CHUNK_SIZE) {
-    currentChunkIndex = chunkCount;
-    currentChunk = {
-      id: 0, // 将由 IndexedDB 自动分配
-      sessionId,
-      chunkIndex: currentChunkIndex,
-      events: [],
-      timestamp: Date.now(),
-    };
-
-    // 更新会话的 chunk 计数
-    await updateSessionChunkCount(database, sessionId, chunkCount + 1);
-  }
-
-  // 将新事件添加到当前 chunk
-  currentChunk.events.push(...newEvents);
-
-  // 保存 chunk
-  await saveChunk(database, currentChunk);
-}
-
-/**
- * 获取指定 chunk
- */
-async function getChunk(
-  database: IDBDatabase,
-  sessionId: string,
-  chunkIndex: number,
-): Promise<EventChunk | null> {
-  // 参数验证
-  if (!sessionId || typeof sessionId !== 'string') {
-    console.error('[db] Invalid sessionId for getChunk:', sessionId);
-    return null;
-  }
-
-  return new Promise((resolve) => {
-    try {
-      const tx = database.transaction(STORE_NAME, 'readonly');
-      const store = tx.objectStore(STORE_NAME);
-      const index = store.index('sessionId_chunkIndex');
-      const request = index.get([sessionId, chunkIndex]);
-
-      request.onsuccess = () => resolve(request.result || null);
-      request.onerror = (e) => {
-        console.error('[db] Error getting chunk:', e);
-        resolve(null);
-      };
-    } catch (error) {
-      console.error('[db] Exception getting chunk:', error);
-      resolve(null);
-    }
-  });
-}
-
-/**
- * 保存 chunk
- */
-async function saveChunk(database: IDBDatabase, chunk: EventChunk): Promise<void> {
-  return new Promise((resolve, reject) => {
-    const tx = database.transaction(STORE_NAME, 'readwrite');
-    const store = tx.objectStore(STORE_NAME);
-    const request = store.put(chunk);
-
-    request.onsuccess = () => resolve();
-    request.onerror = () => reject(request.error);
-  });
-}
-
-/**
- * 更新会话的 chunk 计数
- */
-async function updateSessionChunkCount(
-  database: IDBDatabase,
-  sessionId: string,
-  chunkCount: number,
-): Promise<void> {
-  return new Promise((resolve, reject) => {
-    const tx = database.transaction('sessions', 'readwrite');
-    const store = tx.objectStore('sessions');
-    const getRequest = store.get(sessionId);
-
-    getRequest.onsuccess = () => {
-      const session = getRequest.result as RecordingSession | undefined;
-      if (session) {
-        session.chunkCount = chunkCount;
-        const putRequest = store.put(session);
-        putRequest.onsuccess = () => resolve();
-        putRequest.onerror = () => reject(putRequest.error);
-      } else {
-        resolve();
-      }
-    };
-    getRequest.onerror = () => reject(getRequest.error);
-  });
-}
-
-/**
- * 流式读取所有事件（按 chunk 顺序）
- * 使用回调方式避免一次性加载所有事件到内存
- */
-export async function streamAllEvents(
-  sessionId: string,
-  onChunk: (events: unknown[]) => void | Promise<void>,
-): Promise<void> {
-  // 参数验证
-  if (!sessionId || typeof sessionId !== 'string') {
-    console.error('[db] Invalid sessionId for streamAllEvents:', sessionId);
-    return;
-  }
-
-  try {
-    const database = await openDB();
-    const chunkCount = await getSessionChunkCount(sessionId);
-
-    console.log(`[db] Streaming ${chunkCount} chunks for session ${sessionId}`);
-
-    for (let i = 0; i < chunkCount; i++) {
-      const chunk = await getChunk(database, sessionId, i);
-      if (chunk && chunk.events.length > 0) {
-        await onChunk(chunk.events);
-      }
-    }
-  } catch (error) {
-    console.error('[db] Error streaming events:', error);
-  }
-}
-
-/**
- * 获取所有事件（用于下载，一次性加载）
- * 注意：这会将所有事件加载到内存，仅在需要导出时调用
- */
-export async function getAllEvents(sessionId: string): Promise<unknown[]> {
-  // 参数验证
-  if (!sessionId || typeof sessionId !== 'string') {
-    console.error('[db] Invalid sessionId for getAllEvents:', sessionId);
-    return [];
-  }
-
-  const allEvents: unknown[] = [];
-
-  await streamAllEvents(sessionId, (events) => {
-    allEvents.push(...events);
-  });
-
-  return allEvents;
-}
-
-/**
- * 删除录制会话的所有数据
- */
-export async function deleteRecordingSession(sessionId: string): Promise<void> {
-  const database = await openDB();
-
-  return new Promise((resolve, reject) => {
-    // 删除所有相关的 chunk
-    const chunkTx = database.transaction(STORE_NAME, 'readwrite');
-    const chunkStore = chunkTx.objectStore(STORE_NAME);
-    const index = chunkStore.index('sessionId');
-    const request = index.openCursor(IDBKeyRange.only(sessionId));
-
-    request.onsuccess = (event) => {
-      const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result;
-      if (cursor) {
-        cursor.delete();
-        cursor.continue();
-      }
-    };
-
-    chunkTx.oncomplete = () => {
-      // 删除会话记录
-      const sessionTx = database.transaction('sessions', 'readwrite');
-      const sessionStore = sessionTx.objectStore('sessions');
-      const deleteRequest = sessionStore.delete(sessionId);
-
-      deleteRequest.onsuccess = () => resolve();
-      deleteRequest.onerror = () => reject(deleteRequest.error);
-    };
-
-    chunkTx.onerror = () => reject(chunkTx.error);
-  });
-}
-
-/**
- * 获取所有录制会话列表
- */
-export async function getAllSessions(): Promise<RecordingSession[]> {
-  const database = await openDB();
-
-  return new Promise((resolve, reject) => {
-    const tx = database.transaction('sessions', 'readonly');
-    const store = tx.objectStore('sessions');
-    const index = store.index('startTime');
-    const request = index.openCursor(null, 'prev'); // 按时间倒序排列
-    const sessions: RecordingSession[] = [];
-
-    request.onsuccess = (event) => {
-      const cursor = (event.target as IDBRequest<IDBCursorWithValue>).result;
-      if (cursor) {
-        sessions.push(cursor.value);
-        cursor.continue();
-      } else {
-        resolve(sessions);
-      }
-    };
-
-    request.onerror = () => reject(request.error);
-  });
-}
-
-/**
- * 生成唯一的会话 ID
- */
-export function generateSessionId(): string {
-  return `session_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
-}
-
-/**
- * 清理数据库（用于调试或重置）
- */
-export async function clearDatabase(): Promise<void> {
-  return new Promise((resolve, reject) => {
-    const request = indexedDB.deleteDatabase(DB_NAME);
-    request.onsuccess = () => {
-      db = null;
-      resolve();
-    };
-    request.onerror = () => reject(request.error);
-  });
-}

utils/recordUtils.tsx

@@ -1,86 +0,0 @@
-export const downloadHtmlInBackground = (events: unknown[]) => {
-  if (!events || events.length === 0) return;
-
-  // 安全转义
-  const safeEventsString = JSON.stringify(events)
-    .replace(/\\/g, '\\\\')
-    .replace(/`/g, '\\`')
-    .replace(/<\/script>/g, '<\\/script>');
-
-  // 使用固定版本的 rrweb-player，确保与项目使用的 rrweb 版本兼容
-  const htmlContent = `
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <title>RRWeb 回放</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@1.0.0-alpha.4/dist/style.css" />
-  <style>
-    body {
-      margin: 0;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      min-height: 100vh;
-      background: #f0f2f5;
-    }
-    #player {
-      width: 100%;
-      max-width: 1024px;
-    }
-  </style>
-</head>
-<body>
-  <div id="player"></div>
-
-  <!-- 使用与项目 rrweb 版本匹配的 rrweb-player -->
-  <script src="https://cdn.jsdelivr.net/npm/rrweb-player@1.0.0-alpha.4/dist/index.js"></script>
-
-  <script>
-    try {
-      // 解析事件数据
-      const events = JSON.parse(\`${safeEventsString}\`);
-      console.log('Loaded events count:', events.length);
-
-      // 创建播放器
-      const player = new rrwebPlayer({
-        target: document.getElementById('player'),
-        props: {
-          events: events,
-          width: 1024,
-          height: 576,
-          autoPlay: true,
-          showController: true,
-          UNSAFE_replayCanvas: true
-        },
-      });
-
-      console.log('Player created successfully');
-    } catch (error) {
-      console.error('Replay error:', error);
-      document.body.innerHTML = \`
-        <div style="padding: 20px; text-align: center; color: #d32f2f;">
-          <h2>回放失败</h2>
-          <p>\${error.message}</p>
-          <p>请检查控制台（F12）获取详细错误信息。</p>
-        </div>
-      \`;
-    }
-  </script>
-</body>
-</html>`;
-
-  // 下载逻辑
-  const blob = new Blob([htmlContent], { type: 'text/html' });
-  const reader = new FileReader();
-  reader.onload = () => {
-    chrome.downloads
-      .download({
-        url: reader.result as string,
-        filename: `replay-${Date.now()}.html`,
-        saveAs: true,
-      })
-      .then((r) => console.log('Download started:', r));
-  };
-  reader.readAsDataURL(blob);
-};

utils/tabUtils.ts

@@ -1,35 +0,0 @@
-import { browser } from 'wxt/browser';
-
-/**
- * 获取当前活动标签页的 ID
- * @returns Promise<number | undefined> 返回活动标签页的 ID，如果未找到则返回 undefined
- */
-export async function getActiveTabId(): Promise<number | undefined> {
-  const activeTabs = await browser.tabs.query({
-    active: true,
-    currentWindow: true,
-  });
-  const activeTab = activeTabs[0];
-
-  if (!activeTab) {
-    throw new Error('No active tab found.');
-  }
-
-  // 检查URL是否受限
-  if (activeTab?.url) {
-    const restrictedProtocols = [
-      'chrome:',
-      'chrome-extension:',
-      'about:',
-      'edge:',
-      'view-source:',
-      'data:',
-      'file:',
-    ];
-    if (restrictedProtocols.some((protocol) => activeTab.url!.startsWith(protocol))) {
-      throw new Error(`Cannot send message to a restricted URL: ${activeTab.url}`);
-    }
-  }
-
-  return activeTab.id;
-}

utils/useRecorder.tsx

@@ -1,38 +0,0 @@
-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 () => {
-    try {
-      const handler = rrweb.record({
-        emit(event) {
-          sendMessage('content:save-track-events', event);
-        },
-        plugins: [getRecordConsolePlugin()],
-      });
-
-      stopFn = handler || null;
-
-      console.log('[content] rrweb started');
-      return true;
-    } catch (error) {
-      console.error('Failed to start recording:', error);
-      return false;
-    }
-  };
-
-  const stopRecord = () => {
-    if (stopFn) {
-      stopFn();
-      stopFn = null;
-      console.log('[content] rrweb stopped');
-    }
-    return false;
-  };
-
-  return { startRecord, stopRecord };
-};

wxt.config.ts

@@ -14,8 +14,6 @@ export default defineConfig({
       'activeTab',
       'scripting',
       'tabs',
-      'offscreen',
-      'downloads',
       'debugger',
     ],
     host_permissions: ['<all_urls>'],