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

feat: 添加录制功能，优化消息处理，修复拼写错误，更新下载逻辑

Browse Source
This commit is contained in:
雨霖铃
2026-02-04 23:29:42 +08:00
parent e6f41032c8
commit 2c0df95104
7 changed files with 117 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
entrypoints/background.ts
+9 -4
View File
@@ -1,5 +1,8 @@
import '../.wxt/types/imports.d.ts';
import { browser } from 'wxt/browser';
import { downloadHtmlInBackground } from '@/utils/recordUtils.tsx';
const events: unknown[] = [];
export default defineBackground(() => {
// 监听扩展安装或更新事件
@@ -36,8 +39,8 @@ export default defineBackground(() => {
if (msg.type === messages.popup.checkStatus) {
console.log('[bg] checkStatus received');
sendToActiveTab({ type: messages.content.checkStatus })
.then(() => {
sendResponse({ ok: true });
.then((res) => {
sendResponse(res);
})
.catch(() => {
console.error('Failed to check status in content script');
@@ -63,7 +66,8 @@ export default defineBackground(() => {
console.log('[bg] stopRecording received');
sendToActiveTab({ type: messages.content.to.stopRecording })
.then(async () => {
await chrome.runtime.sendMessage({ type: messages.popup.to.stoped });
await chrome.runtime.sendMessage({ type: messages.popup.to.stopped });
downloadHtmlInBackground(events);
sendResponse({ ok: true });
})
.catch(() => {
@@ -78,6 +82,7 @@ export default defineBackground(() => {
chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
if (msg.type === messages.content.from.saveTrackeEvents) {
console.log('[bg] saveTrackeEvents received:', msg.payload);
events.push(msg.payload);
sendResponse({ ok: true });
}
});
@@ -95,7 +100,7 @@ export default defineBackground(() => {
const activeTab = activeTabs[0];
const sendTo = message.activeTabId || activeTab.id;
try {
await chrome.tabs.sendMessage(sendTo!, message);
return await chrome.tabs.sendMessage(sendTo!, message);
} catch (error) {
console.error('Error sending message to active tab:', error);
throw error;
entrypoints/content.ts
+50 -20
View File
@@ -1,36 +1,66 @@
import '../.wxt/types/imports.d.ts';
import { createRecorder } from '@/utils/useRecorder';
interface IResponse {
ok: boolean;
error?: string;
data?: unknown;
}
export default defineContentScript({
// matches: ['*://*.google.com/*'],
matches: ['<all_urls>'],
runAt: 'document_start',
main() {
const recorder = createRecorder();
let isRecording = false;
// 监听来自 background script 的消息
chrome.runtime.onMessage.addListener((msg: { type: string }, _sender, sendResponse) => {
if (msg.type === messages.content.checkStatus) {
// 检查状态的处理逻辑
console.log('[content] checkStatus received');
sendResponse({ ok: true });
}
chrome.runtime.onMessage.addListener(
(msg: { type: string }, _sender, sendResponse: (response: IResponse) => void) => {
const handleAsyncMessage = async () => {
try {
switch (msg.type) {
// 在这里处理异步消息类型
case messages.content.checkStatus:
return { ok: true, data: { isRecording } };
if (msg.type === messages.content.to.startRecording) {
// 开始录制的处理逻辑
console.log('[content] startRecording received');
recorder.startRecord(messages.content.from.saveTrackeEvents);
sendResponse({ ok: true });
}
case messages.content.to.startRecording: {
const started = await recorder.startRecord(messages.content.from.saveTrackeEvents);
if (msg.type === messages.content.to.stopRecording) {
// 停止录制的处理逻辑
console.log('[content] stopRecording received');
recorder.stopRecord();
sendResponse({ ok: true });
}
if (started) {
isRecording = true;
return { ok: true };
} else {
// 如果启动失败，返回错误信息
return { ok: false, error: 'Failed to start recorder' };
}
}
return true;
});
case messages.content.to.stopRecording:
// 停止录制的处理逻辑
console.log('[content] stopRecording received');
recorder.stopRecord();
isRecording = false;
return { ok: true };
default:
return { ok: false, error: 'Unknown message type' };
}
} catch (error) {
console.error('Error handling message:', error);
return { ok: false };
}
};
handleAsyncMessage().then((response) => {
if (sendResponse) {
sendResponse(response);
}
});
return true;
},
);
},
});
entrypoints/popup/pages/RecordeReplayPage.tsx
+14 -3
View File
@@ -11,20 +11,31 @@ const RecordeReplayPage = () => {
if (msg.type === messages.popup.ready) {
setStatus(AppState.READ);
}
if (msg.type === messages.popup.to.started) {
console.log('[popup] Received started message');
setStatus(AppState.RECORDING);
}
if (msg.type === messages.popup.to.stoped) {
if (msg.type === messages.popup.to.stopped) {
setStatus(AppState.READ);
}
};
browser.runtime.onMessage.addListener(handleMessage);
browser.runtime.sendMessage({ type: messages.popup.checkStatus });
browser.runtime
.sendMessage({ type: messages.popup.checkStatus })
.then((res) => {
if (res?.data?.isRecording) {
setStatus(AppState.RECORDING);
} else {
setStatus(AppState.READ);
}
})
.catch((err) => {
console.error(err);
});
return () => browser.runtime.onMessage.removeListener(handleMessage);
}, []);
utils/messages.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ export const messages = {
stop: 'popup:stop',
},
to: {
stoped: 'popup:stoped',
stopped: 'popup:stopped',
started: 'popup:started',
},
checkStatus: 'popup:check-status',
utils/recordUtils.tsx
+37 -25
View File
@@ -1,53 +1,65 @@
import { eventWithTime } from 'rrweb';
export const downloadHtmlInBackground = (events: unknown[]) => {
if (!events || events.length === 0) return;
export const downloadHtml = (events: eventWithTime[]) => {
if (events.length === 0) return;
// 安全转义 (保持之前的修复)
const safeEventsString = JSON.stringify(events)
.replace(/\\/g, '\\\\')
.replace(/`/g, '\\`')
.replace(/<\/script>/g, '<\\/script>');
// 1. 构建 HTML 模板字符串
// 我们将 events 数据直接注入到 <script> 标签中
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RRWeb 录像回放</title>
<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>
/* 注入录制的数据 */
const events = ${JSON.stringify(events)};
<script type="module">
import { getReplayConsolePlugin } from 'https://esm.sh/@rrweb/rrweb-plugin-console-replay?bundle';
const events = JSON.parse(\`${safeEventsString}\`);
/* 初始化播放器 */
new rrwebPlayer({
target: document.getElementById('player'),
props: {
events: events,
width: 1024, // 可以根据需要调整
width: 1024,
height: 576,
autoPlay: true,
showController: true,
// --- 👇 关键修复：添加下面这行 ---
// 这会告诉 rrweb 关闭严格的 iframe 沙盒限制
// 从而消除 "Blocked script execution" 错误
UNSAFE_replayCanvas: true,
// ------------------------------
plugins: [
getReplayConsolePlugin({
level: ['info', 'log', 'warn', 'error'],
})
]
},
});
</script>
</body>
</html>
`;
</html>`;
// 2. 创建 Blob 并下载
// 下载逻辑 (保持不变)
const blob = new Blob([htmlContent], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `replay-${Date.now()}.html`; // 保存为 .html 文件
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
const reader = new FileReader();
reader.onload = () => {
chrome.downloads.download({
url: reader.result as string,
filename: `replay-${Date.now()}.html`,
saveAs: true,
});
};
reader.readAsDataURL(blob);
};
utils/useRecorder.tsx
+5 -1
View File
@@ -1,12 +1,12 @@
import * as rrweb from 'rrweb';
import { listenerHandler } from '@rrweb/types';
import { getRecordConsolePlugin } from '@rrweb/rrweb-plugin-console-record';
export const createRecorder = () => {
let stopFn: listenerHandler | null = null;
const startRecord = async (msg: string) => {
try {
// const handler = null;
const handler = rrweb.record({
emit(event) {
chrome.runtime.sendMessage({
@@ -14,13 +14,16 @@ export const createRecorder = () => {
payload: event,
});
},
plugins: [getRecordConsolePlugin()],
});
stopFn = handler || null;
console.log('[content] rrweb started');
return true;
} catch (error) {
console.error('Failed to start recording:', error);
return false;
}
};
@@ -30,6 +33,7 @@ export const createRecorder = () => {
stopFn = null;
console.log('[content] rrweb stopped');
}
return false;
};
return { startRecord, stopRecord };
wxt.config.ts
+1
View File
@@ -15,6 +15,7 @@ export default defineConfig({
'scripting',
'tabs',
'offscreen',
'downloads',
],
host_permissions: ['<all_urls>'],
action: {