refactor: 移除所有录制功能代码
- 删除录制相关页面组件（RecordReplayPage、ReplayListPage、ReplayPlayerPage） - 删除录制工具文件（recordEventsDb、recordUtils、useRecorder、tabUtils） - 清理 background.ts 和 content.ts 中的录制代码 - 更新 App.tsx 移除录制路由 - 清理 messages.tsx 中的消息定义 - 删除 types.tsx 中的录制状态 - 移除 package.json 中的 rrweb 相关依赖 - 更新 wxt.config.ts 移除 offscreen、downloads 权限 - 删除 offscreen 目录 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
雨霖铃
@@ -1,120 +0,0 @@
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import { AppState } from '../types';
|
||||
import { sendMessage, onMessage } from '@/utils/messages';
|
||||
import { Button, Container, Stack, Typography, Alert } from '@mui/material';
|
||||
import { CircularProgress } from '@mui/material';
|
||||
|
||||
const RecordReplayPage = () => {
|
||||
const [status, setStatus] = useState<AppState>(AppState.READ);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const isRecording = useMemo(() => status === AppState.RECORDING, [status]);
|
||||
|
||||
useEffect(() => {
|
||||
const unlistenStarted = onMessage('popup:started', () => {
|
||||
console.log('[popup] Received started message');
|
||||
setStatus(AppState.RECORDING);
|
||||
setIsLoading(false);
|
||||
setError(null);
|
||||
});
|
||||
|
||||
const unlistenStopped = onMessage('popup:stopped', () => {
|
||||
setStatus(AppState.READ);
|
||||
setIsLoading(false);
|
||||
setError(null);
|
||||
});
|
||||
|
||||
const unlistenReady = onMessage('popup:ready', () => {
|
||||
setStatus(AppState.READ);
|
||||
setIsLoading(false);
|
||||
setError(null);
|
||||
});
|
||||
|
||||
sendMessage('popup:check-status', undefined)
|
||||
.then((res) => {
|
||||
if (res?.active) {
|
||||
setStatus(AppState.RECORDING);
|
||||
} else {
|
||||
setStatus(AppState.READ);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
setError('检查录制状态失败');
|
||||
});
|
||||
|
||||
return () => {
|
||||
unlistenStarted();
|
||||
unlistenStopped();
|
||||
unlistenReady();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const toggleRecording = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
if (isRecording) {
|
||||
const result = await sendMessage('popup:stop', undefined);
|
||||
if (!result?.ok) {
|
||||
setError(result?.error || '停止录制失败');
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
const result = await sendMessage('popup:start', undefined);
|
||||
if (!result?.ok) {
|
||||
setError(result?.error || '开始录制失败');
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error toggling recording:', error);
|
||||
setError('操作失败，请重试');
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Container maxWidth={false} sx={{ py: 2.5 }}>
|
||||
<Stack direction="column" spacing={2} sx={{ mb: 2.5 }}>
|
||||
{error && (
|
||||
<Alert severity="error" sx={{ fontSize: '0.875rem' }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Stack direction="row" spacing={1.25} justifyContent="center">
|
||||
<Button
|
||||
variant="contained"
|
||||
size="medium"
|
||||
color={isRecording ? 'error' : 'primary'}
|
||||
onClick={toggleRecording}
|
||||
disabled={isLoading}
|
||||
sx={{ minWidth: 120 }}
|
||||
>
|
||||
{isLoading ? (
|
||||
<CircularProgress size={20} color="inherit" />
|
||||
) : isRecording ? (
|
||||
'停止录制'
|
||||
) : (
|
||||
'开始录制'
|
||||
)}
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
<Typography
|
||||
variant="body2"
|
||||
color="text.secondary"
|
||||
textAlign="center"
|
||||
sx={{ mt: 1 }}
|
||||
>
|
||||
{isRecording ? '正在录制用户操作...' : '点击开始录制用户操作'}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecordReplayPage;
|
||||
@@ -1,181 +0,0 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import {
|
||||
Container,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemButton,
|
||||
ListItemText,
|
||||
ListItemSecondaryAction,
|
||||
IconButton,
|
||||
Typography,
|
||||
Box,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
Button,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
PlayArrow as PlayIcon,
|
||||
Download as DownloadIcon,
|
||||
Delete as DeleteIcon,
|
||||
} from '@mui/icons-material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { sendMessage } from '@/utils/messages';
|
||||
|
||||
interface Session {
|
||||
id: string;
|
||||
startTime: number;
|
||||
tabId: number;
|
||||
chunkCount: number;
|
||||
totalEvents: number;
|
||||
}
|
||||
|
||||
const ReplayListPage = () => {
|
||||
const [sessions, setSessions] = useState<Session[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
fetchSessions();
|
||||
}, []);
|
||||
|
||||
const fetchSessions = async () => {
|
||||
try {
|
||||
const data = await sendMessage('popup:get-sessions');
|
||||
setSessions(data || []);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError('获取录制历史失败');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePlay = (sessionId: string) => {
|
||||
navigate(`/replay/${sessionId}`);
|
||||
};
|
||||
|
||||
const handleDownload = async (sessionId: string) => {
|
||||
try {
|
||||
await sendMessage('popup:download-session', sessionId);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError('下载失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (sessionId: string) => {
|
||||
if (window.confirm('确定要删除这个录制吗？')) {
|
||||
try {
|
||||
await sendMessage('popup:delete-session', sessionId);
|
||||
fetchSessions();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError('删除失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Container maxWidth={false} sx={{ py: 2.5, display: 'flex', justifyContent: 'center' }}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Container maxWidth={false} sx={{ py: 2.5 }}>
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
<Button variant="contained" onClick={fetchSessions}>
|
||||
重试
|
||||
</Button>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth={false} sx={{ py: 2.5 }}>
|
||||
<Typography variant="h6" sx={{ mb: 2 }}>
|
||||
录制历史
|
||||
</Typography>
|
||||
|
||||
{sessions.length === 0 ? (
|
||||
<Box textAlign="center" sx={{ py: 4 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
暂无录制历史
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
|
||||
点击"录制与回放"页面的开始按钮进行录制
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<List sx={{ width: '100%', maxWidth: 500, margin: '0 auto' }}>
|
||||
{sessions.map((session) => (
|
||||
<ListItem
|
||||
key={session.id}
|
||||
disablePadding
|
||||
sx={{ mb: 1, borderRadius: 1, overflow: 'hidden' }}
|
||||
>
|
||||
<ListItemButton
|
||||
sx={{ borderRadius: 1 }}
|
||||
onClick={() => handlePlay(session.id)}
|
||||
>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<PlayIcon fontSize="small" />
|
||||
<Typography variant="body1">
|
||||
{new Date(session.startTime).toLocaleString()}
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
secondary={
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
事件数: {session.chunkCount * 100}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
Tab: {session.tabId}
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
/>
|
||||
<ListItemSecondaryAction>
|
||||
<IconButton
|
||||
edge="end"
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDownload(session.id);
|
||||
}}
|
||||
title="下载"
|
||||
>
|
||||
<DownloadIcon fontSize="small" />
|
||||
</IconButton>
|
||||
<IconButton
|
||||
edge="end"
|
||||
size="small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDelete(session.id);
|
||||
}}
|
||||
title="删除"
|
||||
sx={{ color: 'error.main' }}
|
||||
>
|
||||
<DeleteIcon fontSize="small" />
|
||||
</IconButton>
|
||||
</ListItemSecondaryAction>
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReplayListPage;
|
||||
@@ -1,159 +0,0 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Container,
|
||||
Typography,
|
||||
Box,
|
||||
CircularProgress,
|
||||
Alert,
|
||||
IconButton,
|
||||
Button,
|
||||
} from '@mui/material';
|
||||
import {
|
||||
ArrowBack as ArrowBackIcon,
|
||||
Download as DownloadIcon,
|
||||
Delete as DeleteIcon,
|
||||
} from '@mui/icons-material';
|
||||
import { sendMessage } from '@/utils/messages';
|
||||
|
||||
const ReplayPlayerPage = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [eventsData, setEventsData] = useState<unknown[] | null>(null);
|
||||
|
||||
const fetchSessionEvents = useCallback(async (sessionId: string) => {
|
||||
try {
|
||||
const data = await sendMessage('popup:get-session-events', sessionId);
|
||||
setEventsData(data || []);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError('加载录制内容失败');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
fetchSessionEvents(id);
|
||||
}
|
||||
}, [id, fetchSessionEvents]);
|
||||
|
||||
const handleDownload = async () => {
|
||||
if (!id) return;
|
||||
try {
|
||||
await sendMessage('popup:download-session', id);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError('下载失败');
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!id) return;
|
||||
if (window.confirm('确定要删除这个录制吗？')) {
|
||||
try {
|
||||
await sendMessage('popup:delete-session', id);
|
||||
navigate('/record-replay');
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError('删除失败');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Container maxWidth={false} sx={{ py: 2.5, display: 'flex', justifyContent: 'center' }}>
|
||||
<CircularProgress />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Container maxWidth={false} sx={{ py: 2.5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<IconButton onClick={() => navigate('/record-replay')} sx={{ mr: 1 }}>
|
||||
<ArrowBackIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6">回放</Typography>
|
||||
</Box>
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
<Button variant="contained" onClick={() => fetchSessionEvents(id!)}>
|
||||
重试
|
||||
</Button>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
if (!eventsData || eventsData.length === 0) {
|
||||
return (
|
||||
<Container maxWidth={false} sx={{ py: 2.5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<IconButton onClick={() => navigate('/record-replay')} sx={{ mr: 1 }}>
|
||||
<ArrowBackIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6">回放</Typography>
|
||||
</Box>
|
||||
<Alert severity="warning">
|
||||
此会话没有事件数据，请尝试重新录制。
|
||||
</Alert>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxWidth={false} sx={{ py: 2.5 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
|
||||
<IconButton onClick={() => navigate('/record-replay')} sx={{ mr: 1 }}>
|
||||
<ArrowBackIcon />
|
||||
</IconButton>
|
||||
<Typography variant="h6">回放</Typography>
|
||||
<Box sx={{ ml: 'auto', display: 'flex', gap: 1 }}>
|
||||
<IconButton onClick={handleDownload} title="下载">
|
||||
<DownloadIcon />
|
||||
</IconButton>
|
||||
<IconButton onClick={handleDelete} title="删除" sx={{ color: 'error.main' }}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ borderRadius: 1, overflow: 'hidden', border: 1, borderColor: 'divider' }}>
|
||||
<Box sx={{ p: 2, textAlign: 'center' }}>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
由于浏览器安全策略限制，无法在内联 iframe 中直接回放。
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
|
||||
请点击右上角的"下载"按钮，下载完整的回放 HTML 文件到本地查看。
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleDownload}
|
||||
sx={{ mt: 2 }}
|
||||
startIcon={<DownloadIcon />}
|
||||
>
|
||||
下载回放文件
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 2 }}>
|
||||
<Alert severity="info">
|
||||
<Typography variant="body2">
|
||||
<strong>安全提示：</strong>浏览器扩展有严格的 Content Security Policy (CSP)
|
||||
限制，禁止内联脚本执行，因此无法在扩展 popup 中直接显示回放内容。
|
||||
下载的 HTML 文件包含了完整的回放代码，可以在任何现代浏览器中直接打开。
|
||||
</Typography>
|
||||
</Alert>
|
||||
</Box>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default ReplayPlayerPage;
|
||||
@@ -1,4 +1,3 @@
|
||||
import { sendMessage } from '@/utils/messages';
|
||||
import { Button } from '@mui/material';
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
@@ -17,11 +16,6 @@ const TestPage = () => {
|
||||
})();
|
||||
});
|
||||
|
||||
const handleSeedMessage = async () => {
|
||||
const status = await sendMessage('popup:check-status');
|
||||
console.log(`[popup]status: ${status}`);
|
||||
};
|
||||
|
||||
const handleAttach = () => {
|
||||
try {
|
||||
chrome.debugger.attach({ tabId: tabId }, '1.2', () => {
|
||||
@@ -61,9 +55,6 @@ const TestPage = () => {
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Button variant="contained" color="primary" onClick={handleSeedMessage}>
|
||||
发送消息
|
||||
</Button>
|
||||
<Button variant="contained" color="primary" onClick={handleAttach}>
|
||||
attach
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user