雨霖铃
80e510225c
- 实现录制状态存储到本地storage，包括isRecording、recordingTabId、events和startTime - 添加loadRecorderState和saveRecorderState函数用于状态管理 - 监听Tab切换事件，当切换离开录制Tab时发出警告并通知popup - 监听Tab关闭事件，自动停止录制并清理状态 - 添加录制状态同步检查，确保content script状态一致 - 在开始录制前检查是否已在录制状态，避免重复录制 - 添加错误处理返回详细错误信息 - 优化回放HTML样式和脚本加载方式 - 添加Tab切换消息通信协议支持
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
export const downloadHtmlInBackground = (events: unknown[]) => {
|
|
if (!events || events.length === 0) return;
|
|
|
|
// 安全转义
|
|
const safeEventsString = JSON.stringify(events)
|
|
.replace(/\\/g, '\\\\')
|
|
.replace(/`/g, '\\`')
|
|
.replace(/<\/script>/g, '<\\/script>');
|
|
|
|
const htmlContent = `
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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>
|
|
<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';
|
|
|
|
const events = JSON.parse(\`${safeEventsString}\`);
|
|
|
|
// rrwebPlayer 作为全局变量可用
|
|
new rrwebPlayer({
|
|
target: document.getElementById('player'),
|
|
props: {
|
|
events: events,
|
|
width: 1024,
|
|
height: 576,
|
|
autoPlay: true,
|
|
showController: true,
|
|
UNSAFE_replayCanvas: true,
|
|
plugins: [
|
|
getReplayConsolePlugin({
|
|
level: ['info', 'log', 'warn', 'error'],
|
|
}),
|
|
],
|
|
},
|
|
});
|
|
</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(r));
|
|
};
|
|
reader.readAsDataURL(blob);
|
|
};
|