rsgltzyd/testing-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(recorder): 实现IndexedDB分块存储录制事件

Browse Source 
- 将录制状态中的events数组替换为sessionId，避免内存溢出问题
- 集成IndexedDB工具模块实现事件分块存储功能
- 修改开始录制逻辑以生成会话ID并初始化数据库会话
- 更新停止录制逻辑从数据库流式读取事件并删除会话数据
- 修复content:save-track-events消息类型的拼写错误
- 在RoutePersistence组件中添加路由恢复和保存的成功提示
- 重构popup应用CSS样式文件，移除冗余导航样式代码
This commit is contained in:
雨霖铃
2026-02-21 15:27:30 +08:00
parent 80e510225c
commit c848003214
6 changed files with 350 additions and 973 deletions
Download Patch File Download Diff File Expand all files Collapse all files
entrypoints/background.ts
+52 -23
View File
@@ -3,11 +3,18 @@ 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,
} from '@/utils/recordEventsDb';
interface RecorderState {
isRecording: boolean;
recordingTabId: number | undefined;
events: unknown[];
sessionId: string | undefined;
startTime: number | undefined;
}
@@ -20,12 +27,12 @@ async function loadRecorderState(): Promise<RecorderState> {
return (result[STORAGE_KEY] as RecorderState) || {
isRecording: false,
recordingTabId: undefined,
events: [],
sessionId: undefined,
startTime: undefined,
};
} catch (err) {
console.error('[background] Failed to load recorder state:', err);
return { isRecording: false, recordingTabId: undefined, events: [], startTime: undefined };
return { isRecording: false, recordingTabId: undefined, sessionId: undefined, startTime: undefined };
}
}
@@ -85,7 +92,7 @@ export default defineBackground(() => {
);
// 扩展安装/更新时重置录制状态
await saveRecorderState({ isRecording: false, recordingTabId: undefined, events: [], startTime: undefined });
await saveRecorderState({ isRecording: false, recordingTabId: undefined, sessionId: undefined, startTime: undefined });
});
// 监听 Tab 切换 - 如果正在录制且切换到其他 Tab，发出警告
@@ -109,14 +116,14 @@ export default defineBackground(() => {
console.warn('[background] 录制中的 Tab 已关闭，自动停止录制');
// 这里可以调用停止逻辑或通知 popup
await sendMessage('popup:stopped', undefined);
await saveRecorderState({ isRecording: false, recordingTabId: undefined, startTime: 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 {
@@ -124,17 +131,17 @@ export default defineBackground(() => {
console.log('[background] content check-status result:', result);
// 如果 content script 返回 false，说明状态不同步，需要重置
if (!result) {
await saveRecorderState({ isRecording: false, recordingTabId: undefined, startTime: undefined });
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, startTime: undefined });
await saveRecorderState({ isRecording: false, recordingTabId: undefined, sessionId: undefined, startTime: undefined });
return { active: false, startTime: -1 };
}
}
return { active: state.isRecording, startTime: state.startTime ?? -1 };
});
@@ -149,15 +156,24 @@ export default defineBackground(() => {
}
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,
events: [], // 清空旧事件
sessionId,
startTime: Date.now(),
});
console.log('[bg] 录制状态已保存');
await sendMessage('popup:started', undefined);
return { ok: true };
}
@@ -172,14 +188,14 @@ export default defineBackground(() => {
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(
@@ -191,19 +207,27 @@ export default defineBackground(() => {
const targetTabId = state.recordingTabId ?? currentTabId;
const response = await sendMessage('content:stop-recording', undefined, targetTabId);
if (response.ok) {
// 下载回放文件
downloadHtmlInBackground(state.events);
// 从 IndexedDB 流式读取所有事件并下载回放文件
if (state.sessionId) {const allEvents: unknown[] = [];
await streamAllEvents(state.sessionId, (events) => {
allEvents.push(...events);
});
downloadHtmlInBackground(allEvents);
// 删除会话数据
await deleteRecordingSession(state.sessionId);
}
// 清空状态
await saveRecorderState({
isRecording: false,
recordingTabId: undefined,
events: [],
sessionId: undefined,
startTime: undefined,
});
await sendMessage('popup:stopped', undefined);
return { ok: true };
}
@@ -214,16 +238,21 @@ export default defineBackground(() => {
}
});
onMessage('content:save-tracke-events', async (event) => {
onMessage('content:save-track-events', async (event) => {
const state = await loadRecorderState();
console.log('[bg] 收到事件，当前状态:', state);
if (!state.isRecording) {
console.warn('[bg] 收到事件但当前不在录制状态，丢弃事件');
return false;
}
// 将新事件追加到现有事件列表
const updatedEvents = [...state.events, event];
await saveRecorderState({ events: updatedEvents });
if (!state.sessionId) {
console.error('[bg] 没有 sessionId，无法存储事件');
return false;
}
// 使用 IndexedDB 分块存储事件
await appendEvents(state.sessionId, [event]);
return true;
});
});