雨霖铃
3ece5e2e96
1. 工程配置： - 更新 tsconfig.json include 规则，解决 eslint.config.ts 未被包含的问题。 2. 组件重构 (Material UI 适配)： - Navbar: 替换已弃用的 PaperProps 为 slotProps.paper。 - TimestampToDatetime / DatetimeToTimestamp: 替换已弃用的 InputProps 为 slotProps.input。 3. 类型与逻辑修复： - utils/recordUtils.tsx: 引入缺失依赖，忽略 UNSAFE_replayCanvas 等类型报错，修复构建问题。 - utils/messages.tsx: 完善事件参数类型定义。 4. 其他优化： - 统一 App.css 代码格式。 - 补充部分组件 (CopyButton, TimestampExecution) 的 React 导入和类型定义。
69 lines
2.0 KiB
TypeScript
69 lines
2.0 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" />
|
|
</head>
|
|
<body style="margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f2f5;">
|
|
<div id="player"></div>
|
|
|
|
<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';
|
|
|
|
const events = JSON.parse(\`${safeEventsString}\`);
|
|
|
|
new rrwebPlayer({
|
|
target: document.getElementById('player'),
|
|
props: {
|
|
events: events,
|
|
width: 1024,
|
|
height: 576,
|
|
autoPlay: true,
|
|
showController: true,
|
|
|
|
// --- 👇 关键修复：添加下面这行 ---
|
|
// 这会告诉 rrweb 关闭严格的 iframe 沙盒限制
|
|
// 从而消除 "Blocked script execution" 错误
|
|
// @ts-ignore
|
|
UNSAFE_replayCanvas: true,
|
|
// ------------------------------
|
|
|
|
// @ts-ignore
|
|
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);
|
|
};
|