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

feat(background): 添加录制状态持久化和Tab切换处理

Browse Source 
- 实现录制状态存储到本地storage，包括isRecording、recordingTabId、events和startTime
- 添加loadRecorderState和saveRecorderState函数用于状态管理
- 监听Tab切换事件，当切换离开录制Tab时发出警告并通知popup
- 监听Tab关闭事件，自动停止录制并清理状态
- 添加录制状态同步检查，确保content script状态一致
- 在开始录制前检查是否已在录制状态，避免重复录制
- 添加错误处理返回详细错误信息
- 优化回放HTML样式和脚本加载方式
- 添加Tab切换消息通信协议支持
This commit is contained in:
雨霖铃
2026-02-21 15:09:07 +08:00
parent 19b7ab141a
commit 80e510225c
5 changed files with 166 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
utils/recordUtils.tsx
+13 -16
View File
@@ -1,7 +1,7 @@
export const downloadHtmlInBackground = (events: unknown[]) => {
if (!events || events.length === 0) return;
// 安全转义 (保持之前的修复)
// 安全转义
const safeEventsString = JSON.stringify(events)
.replace(/\\/g, '\\\\')
.replace(/`/g, '\\`')
@@ -14,18 +14,23 @@ export const downloadHtmlInBackground = (events: unknown[]) => {
<meta charset="UTF-8">
<title>RRWeb 回放</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/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 style="margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f2f5;">
<body>
<div id="player"></div>
<!-- 使用 UMD 版本，rrwebPlayer 会作为全局变量 -->
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
<script type="module">
import { getReplayConsolePlugin } from 'https://esm.sh/@rrweb/rrweb-plugin-console-replay?bundle';
import rrwebPlayer from 'rrweb-player';
import { getReplayConsolePlugin } from 'https://esm.sh/@rrweb/rrweb-plugin-console-replay?bundle';
const events = JSON.parse(\`${safeEventsString}\`);
// rrwebPlayer 作为全局变量可用
new rrwebPlayer({
target: document.getElementById('player'),
props: {
@@ -34,15 +39,7 @@ export const downloadHtmlInBackground = (events: unknown[]) => {
height: 576,
autoPlay: true,
showController: true,
// --- 👇 关键修复：添加下面这行 ---
// 这会告诉 rrweb 关闭严格的 iframe 沙盒限制
// 从而消除 "Blocked script execution" 错误
// @ts-ignore
UNSAFE_replayCanvas: true,
// ------------------------------
// @ts-ignore
UNSAFE_replayCanvas: true,
plugins: [
getReplayConsolePlugin({
level: ['info', 'log', 'warn', 'error'],
@@ -54,7 +51,7 @@ export const downloadHtmlInBackground = (events: unknown[]) => {
</body>
</html>`;
// 下载逻辑 (保持不变)
// 下载逻辑
const blob = new Blob([htmlContent], { type: 'text/html' });
const reader = new FileReader();
reader.onload = () => {