diff --git a/.claude/settings.local.json b/.claude/settings.local.json
new file mode 100644
index 0000000..fc9d25b
--- /dev/null
+++ b/.claude/settings.local.json
@@ -0,0 +1,5 @@
+{
+ "permissions": {
+ "allow": ["WebSearch"]
+ }
+}
diff --git a/.gitignore b/.gitignore
index a256953..c809157 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,7 +12,6 @@ node_modules
stats.html
stats-*.json
.wxt
-web-ext.config.ts
# Editor directories and files
.vscode/*
diff --git a/entrypoints/background.ts b/entrypoints/background.ts
index 8de3338..975f94a 100644
--- a/entrypoints/background.ts
+++ b/entrypoints/background.ts
@@ -61,10 +61,7 @@ export default defineBackground(() => {
})
.catch((error: Error) => {
if (error.message.includes('restricted URL')) {
- console.warn(
- 'Could not check status: on a restricted page.',
- error.message,
- );
+ console.warn('Could not check status: on a restricted page.', error.message);
} else if (error.message.includes('No active tab found')) {
console.warn('Could not check status: no active tab found.');
} else {
@@ -84,10 +81,7 @@ export default defineBackground(() => {
})
.catch((error: Error) => {
if (error.message.includes('restricted URL')) {
- console.warn(
- 'Could not start recording: on a restricted page.',
- error.message,
- );
+ console.warn('Could not start recording: on a restricted page.', error.message);
} else if (error.message.includes('No active tab found')) {
console.warn('Could not start recording: no active tab found.');
} else {
@@ -107,10 +101,7 @@ export default defineBackground(() => {
})
.catch((error: Error) => {
if (error.message.includes('restricted URL')) {
- console.warn(
- 'Could not stop recording: on a restricted page.',
- error.message,
- );
+ console.warn('Could not stop recording: on a restricted page.', error.message);
} else if (error.message.includes('No active tab found')) {
console.warn('Could not stop recording: no active tab found.');
} else {
@@ -132,6 +123,10 @@ export default defineBackground(() => {
}
});
+ onMessage('getStringLength', (message) => {
+ return message.data.length;
+ });
+
async function sendToActiveTab(message: {
type: string;
data?: unknown;
diff --git a/entrypoints/content.ts b/entrypoints/content.ts
index ff6cb6e..caab129 100644
--- a/entrypoints/content.ts
+++ b/entrypoints/content.ts
@@ -15,6 +15,10 @@ export default defineContentScript({
const recorder = createRecorder();
let isRecording = false;
+ onMessage('getStringLength', (message) => {
+ console.log(`[content] getStringLength received: ${message.data}`);
+ });
+
// 监听来自 background script 的消息
chrome.runtime.onMessage.addListener(
(msg: { type: string }, _sender, sendResponse: (response: IResponse) => void) => {
diff --git a/entrypoints/popup/App.tsx b/entrypoints/popup/App.tsx
index ea6dcc2..c7a51f1 100644
--- a/entrypoints/popup/App.tsx
+++ b/entrypoints/popup/App.tsx
@@ -1,38 +1,32 @@
// App.js
import { HashRouter as Router, Routes, Route } from 'react-router-dom';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import { SnackbarProvider } from 'notistack';
import TimestampPage from './pages/TimestampPage';
import RecordeReplayPage from './pages/RecordeReplayPage';
+import TestPage from './pages/TestPage';
import Navbar from './components/Navbar';
import RoutePersistence from './components/RoutePersistence';
import './App.css';
// 路由配置数据
const navItems = [
+ { path: '/test', label: '测试页面', element: },
{ path: '/', label: '时间戳', element: },
- // {path: '/dzmy', label: '电子木鱼', element: },
{ path: '/recorde-replay', label: '录制与回放', element: },
];
-const theme = createTheme();
-
function App() {
return (
-
-
-
-
-
- {navItems.map((item) => (
-
- ))}
-
-
-
+
+
+
+
+ {navItems.map((item) => (
+
+ ))}
+
+
);
}
diff --git a/entrypoints/popup/components/CopyButton.tsx b/entrypoints/popup/components/CopyButton.tsx
new file mode 100644
index 0000000..fd196bf
--- /dev/null
+++ b/entrypoints/popup/components/CopyButton.tsx
@@ -0,0 +1,134 @@
+import { useState, useCallback, FC, ReactNode, useEffect } from 'react';
+import Button, { ButtonProps } from '@mui/material/Button';
+import Snackbar from '@mui/material/Snackbar';
+import Alert, { AlertColor } from '@mui/material/Alert';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+
+type CopyStatus = 'idle' | 'copying' | 'success' | 'error';
+
+interface CopyButtonProps extends Omit {
+ textToCopy: string | number;
+ buttonText?: ReactNode;
+ successMessage?: string;
+ errorMessage?: string;
+ variant?: ButtonProps['variant'];
+}
+
+const CopyButton: FC = ({
+ textToCopy,
+ buttonText = '复制',
+ successMessage = '复制成功！',
+ errorMessage = '复制失败，请手动复制。',
+ variant = 'contained',
+ ...buttonProps
+}) => {
+ const [status, setStatus] = useState('idle');
+ const [openSnackbar, setOpenSnackbar] = useState(false);
+ const [snackbarContent, setSnackbarContent] = useState<{
+ message: string;
+ severity: AlertColor;
+ } | null>(null);
+
+ useEffect(() => {
+ if (status === 'success' || status === 'error') {
+ const timer = setTimeout(() => setStatus('idle'), 2000);
+ return () => clearTimeout(timer);
+ }
+ return undefined;
+ }, [status]);
+
+ const performCopy = useCallback(async () => {
+ if (!textToCopy) {
+ console.warn('没有提供要复制的文本');
+ return false;
+ }
+ const safeText = String(textToCopy);
+ try {
+ await navigator.clipboard.writeText(safeText);
+ return true;
+ } catch (err) {
+ console.error('使用 Clipboard API 复制失败:', err);
+ return false;
+ }
+ }, [textToCopy]);
+
+ const handleClick = useCallback(async () => {
+ if (status !== 'idle') return;
+
+ setStatus('copying');
+ let isSuccess = false;
+ try {
+ [isSuccess] = await Promise.all([
+ performCopy(),
+ new Promise((resolve) => setTimeout(resolve, 300)),
+ ]);
+ } catch (error) {
+ console.error('复制时出错:', error);
+ isSuccess = false;
+ } finally {
+ const newStatus = isSuccess ? 'success' : 'error';
+ setStatus(newStatus);
+ setSnackbarContent({
+ message: isSuccess ? successMessage : errorMessage,
+ severity: newStatus,
+ });
+ setOpenSnackbar(true);
+ }
+ }, [performCopy, status, successMessage, errorMessage]);
+
+ const handleCloseSnackbar = (_event?: Event | React.SyntheticEvent, reason?: string) => {
+ if (reason === 'clickaway') return;
+ setOpenSnackbar(false);
+ };
+
+ const renderButtonIcon = () => {
+ if (status === 'success') {
+ return ;
+ }
+ return ;
+ };
+
+ return (
+ <>
+
+
+ {snackbarContent ? (
+
+ {snackbarContent.message}
+
+ ) : undefined}
+
+
+ );
+};
+
+export default CopyButton;
diff --git a/entrypoints/popup/components/DatetimeToTimestamp.tsx b/entrypoints/popup/components/DatetimeToTimestamp.tsx
index 8a6893e..9bdc2f6 100644
--- a/entrypoints/popup/components/DatetimeToTimestamp.tsx
+++ b/entrypoints/popup/components/DatetimeToTimestamp.tsx
@@ -8,7 +8,6 @@ import {
FormControl,
InputLabel,
Paper,
- Typography,
Stack,
Box,
SelectChangeEvent,
@@ -87,9 +86,6 @@ export function DatetimeToTimestamp() {
return (
-
- 日期时间转时间戳
-
Math.floor(Date.now()));
+ const [currentTimestamp, setCurrentTimestamp] = useState(() =>
+ Math.floor(Date.now()),
+ );
const [showMilliseconds, setShowMilliseconds] = useState(true);
const [isRunningTimestamp, setIsRunningTimestamp] = useState(true);
@@ -45,14 +45,19 @@ export function TimestampExecution() {
setIsRunningTimestamp((prev) => !prev);
}, []);
- const unitButtonLabel = showMilliseconds ? '切换为秒显示' : '切换为毫秒显示';
- const toggleButtonLabel = isRunningTimestamp ? '停止时间戳自动更新' : '开始时间戳自动更新';
+ const unitButtonLabel = showMilliseconds
+ ? '切换为秒显示'
+ : '切换为毫秒显示';
+ const toggleButtonLabel = isRunningTimestamp
+ ? '停止时间戳自动更新'
+ : '开始时间戳自动更新';
const toggleButtonText = isRunningTimestamp ? '停止' : '开始';
- const { isCopied, copy } = useCopy();
-
return (
-
+
- {/* */}
-
-
+ />