feat:
1、移动popup的page、components 2、更新wxt的host权限 3、验证message传递逻辑
This commit is contained in:
雨霖铃
+31
-31
@@ -2,8 +2,7 @@ import '../.wxt/types/imports.d.ts';
|
||||
import { browser } from 'wxt/browser';
|
||||
|
||||
export default defineBackground(() => {
|
||||
console.log('Hello background!', { id: browser.runtime.id });
|
||||
|
||||
// 监听扩展安装或更新事件
|
||||
browser.runtime.onInstalled.addListener(async ({ reason }) => {
|
||||
if (reason === 'install') {
|
||||
// 第一次安装扩展时触发
|
||||
@@ -28,41 +27,42 @@ export default defineBackground(() => {
|
||||
}
|
||||
});
|
||||
|
||||
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||
// 处理来自其他部分的消息
|
||||
console.log('[bg] message received:', msg, sender.tab);
|
||||
|
||||
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
|
||||
const currentTab = tabs[0];
|
||||
console.log('[bg] 真正活跃的页面标题是:', currentTab?.title);
|
||||
sendResponse({ ok: true, title: currentTab?.title });
|
||||
});
|
||||
|
||||
if (msg.type === 'CREATE_OFFSCREEN') {
|
||||
console.log('[bg] offscreen created');
|
||||
sendResponse({ ok: true });
|
||||
// 监听来自 popup script 的消息
|
||||
chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
|
||||
if (msg.type === messages.popup.checkStatus) {
|
||||
console.log('[bg] checkStatus received');
|
||||
// void chrome.runtime.sendMessage({ type: messages.content.checkStatus });
|
||||
sendToActiveTab({ type: messages.content.checkStatus })
|
||||
.then(() => {
|
||||
sendResponse({ ok: true });
|
||||
})
|
||||
.catch(() => {
|
||||
sendResponse({ ok: false });
|
||||
});
|
||||
return true;
|
||||
}
|
||||
|
||||
if (msg.type === 'DOWNLOAD') {
|
||||
console.log('[bg] DOWNLOAD received');
|
||||
if (msg.type === messages.offscreen.to.startRecording) {
|
||||
console.log('[bg] startRecording received');
|
||||
sendResponse({ ok: true });
|
||||
// void browser.runtime.sendMessage({ type: messages.popup.to.started });
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
// async function _sendToActiveTab(message: {
|
||||
// type: string;
|
||||
// data?: unknown;
|
||||
// activeTabId?: number;
|
||||
// [key: string]: unknown;
|
||||
// }) {
|
||||
// const activeTabs = await browser.tabs.query({
|
||||
// active: true,
|
||||
// currentWindow: true,
|
||||
// });
|
||||
// const activeTab = activeTabs[0];
|
||||
// const sendTo = message.activeTabId || activeTab.id;
|
||||
// await browser.tabs.sendMessage(sendTo!, message);
|
||||
// }
|
||||
async function sendToActiveTab(message: {
|
||||
type: string;
|
||||
data?: unknown;
|
||||
activeTabId?: number;
|
||||
[key: string]: unknown;
|
||||
}) {
|
||||
const activeTabs = await chrome.tabs.query({
|
||||
active: true,
|
||||
currentWindow: true,
|
||||
});
|
||||
const activeTab = activeTabs[0];
|
||||
const sendTo = message.activeTabId || activeTab.id;
|
||||
await chrome.tabs.sendMessage(sendTo!, message);
|
||||
}
|
||||
});
|
||||
|
||||
+6
-14
@@ -1,25 +1,17 @@
|
||||
import '../.wxt/types/imports.d.ts';
|
||||
import { browser } from 'wxt/browser';
|
||||
|
||||
export default defineContentScript({
|
||||
// matches: ['*://*.google.com/*'],
|
||||
matches: ['<all_urls>'],
|
||||
runAt: 'document_start',
|
||||
main() {
|
||||
console.log('Content script loaded successfully', { id: browser.runtime.id });
|
||||
|
||||
chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
|
||||
if (message.type === 'START_RECORD') {
|
||||
// startRecord();
|
||||
console.log('Start recording command received in content script');
|
||||
sendResponse({ status: 'Recording started' });
|
||||
} else if (message.type === 'STOP_RECORD') {
|
||||
// stopRecord();
|
||||
console.log('Stop recording command received in content script');
|
||||
sendResponse({ status: 'Recording stopped' });
|
||||
// 监听来自 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 });
|
||||
} else {
|
||||
console.log('Unknown command received in content script');
|
||||
sendResponse({ status: 'Unknown command' });
|
||||
console.log('[content] unknown message type:', msg.type);
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { HashRouter as Router, Routes, Route, NavLink } from 'react-router-dom';
|
||||
import { useState, useEffect } from 'react';
|
||||
import TimestampPage from '../../pages/TimestampPage';
|
||||
import RecordeReplayPage from '../../pages/RecordeReplayPage';
|
||||
import TimestampPage from './pages/TimestampPage';
|
||||
import RecordeReplayPage from './pages/RecordeReplayPage';
|
||||
import './App.css';
|
||||
|
||||
const navItems = [
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
|
||||
const CopyButton = ({
|
||||
text = '要复制的文本',
|
||||
buttonText = '复制文本',
|
||||
className = 'action-btn',
|
||||
successMessage = '复制成功！',
|
||||
errorMessage = '复制失败，请手动复制。',
|
||||
copyingMessage = '复制中...',
|
||||
}) => {
|
||||
const [status, setStatus] = useState('idle'); // 'idle' | 'copying' | 'success' | 'error'
|
||||
|
||||
useEffect(() => {
|
||||
let timer: number;
|
||||
if (status === 'success' || status === 'error') {
|
||||
timer = window.setTimeout(() => {
|
||||
setStatus('idle');
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [status]);
|
||||
|
||||
const performCopy = useCallback(async () => {
|
||||
if (!text) {
|
||||
console.warn('没有提供要复制的文本');
|
||||
return false;
|
||||
}
|
||||
|
||||
const safeText = String(text);
|
||||
|
||||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||||
try {
|
||||
await navigator.clipboard.writeText(safeText);
|
||||
return true;
|
||||
} catch (err) {
|
||||
console.error('使用 Clipboard API 复制失败:', err);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return false;
|
||||
}, [text]);
|
||||
|
||||
const handleClick = useCallback(async () => {
|
||||
setStatus('copying');
|
||||
|
||||
try {
|
||||
const isSuccess = await performCopy();
|
||||
setStatus(isSuccess ? 'success' : 'error');
|
||||
} catch (error) {
|
||||
console.error('复制时出错:', error);
|
||||
setStatus('error');
|
||||
}
|
||||
}, [performCopy]);
|
||||
|
||||
// 根据状态计算当前显示的文本
|
||||
const currentText =
|
||||
status === 'success'
|
||||
? successMessage
|
||||
: status === 'error'
|
||||
? errorMessage
|
||||
: status === 'copying'
|
||||
? copyingMessage
|
||||
: buttonText;
|
||||
|
||||
// 动态样式：只在非默认状态下覆盖颜色，平时让 className 控制
|
||||
const getStyle = () => {
|
||||
if (status === 'success') {
|
||||
return { backgroundColor: '#4CAF50', color: 'white' };
|
||||
}
|
||||
if (status === 'error') {
|
||||
return { backgroundColor: '#f44336', color: 'white' };
|
||||
}
|
||||
|
||||
return {};
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={handleClick}
|
||||
className={`${className} ${status} copy-button`}
|
||||
style={getStyle()}
|
||||
disabled={status === 'success' || status === 'copying'}
|
||||
>
|
||||
{currentText}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
||||
export default CopyButton;
|
||||
@@ -0,0 +1,192 @@
|
||||
import { formatWithDate, formatWithZone } from '../../../utils/timeUtils';
|
||||
import { useState, useCallback } from 'react';
|
||||
|
||||
/**
|
||||
* 日期时间转时间戳组件
|
||||
*
|
||||
* 功能特性：
|
||||
* 1. 将日期时间字符串转换为时间戳
|
||||
* 2. 支持多种时区选择
|
||||
* 3. 支持毫秒和秒单位切换
|
||||
* 4. 提供输入验证和错误提示
|
||||
* 5. 实时单位转换
|
||||
*
|
||||
* @component
|
||||
* @example
|
||||
* ```jsx
|
||||
* <DatetimeToTimestamp />
|
||||
* ```
|
||||
*
|
||||
* @returns {JSX.Element} 日期时间转时间戳组件
|
||||
*/
|
||||
|
||||
// 常用时区列表
|
||||
const TIME_ZONE_LIST = [
|
||||
'America/New_York',
|
||||
'America/Chicago',
|
||||
'America/Denver',
|
||||
'America/Los_Angeles',
|
||||
'America/Anchorage',
|
||||
'America/Honolulu',
|
||||
'Europe/London',
|
||||
'Europe/Paris',
|
||||
'Europe/Berlin',
|
||||
'Europe/Moscow',
|
||||
'Asia/Tokyo',
|
||||
'Asia/Shanghai',
|
||||
'Asia/Hong_Kong',
|
||||
'Asia/Singapore',
|
||||
'Asia/Dubai',
|
||||
'Asia/Kolkata',
|
||||
'Australia/Sydney',
|
||||
'Pacific/Auckland',
|
||||
];
|
||||
|
||||
// 时间戳单位选项
|
||||
const TIMESTAMP_UNITS = [
|
||||
{ value: 'milliseconds', label: '毫秒(ms)' },
|
||||
{ value: 'seconds', label: '秒(s)' },
|
||||
];
|
||||
|
||||
export function DatetimeToTimestamp() {
|
||||
const [dateValue, setDateValue] = useState(() => formatWithZone(Date.now(), 'Asia/Shanghai'));
|
||||
|
||||
const [selectedZone, setSelectedZone] = useState('Asia/Shanghai');
|
||||
|
||||
const [result, setResult] = useState('');
|
||||
|
||||
const [unit, setUnit] = useState('milliseconds');
|
||||
|
||||
const [error, setError] = useState('');
|
||||
|
||||
/**
|
||||
* 转换日期时间为时间戳
|
||||
*/
|
||||
const handleConvertDatetimeToTimestamp = useCallback(() => {
|
||||
try {
|
||||
setError('');
|
||||
const timestamp = formatWithDate(dateValue, selectedZone);
|
||||
|
||||
if (typeof timestamp !== 'number' || isNaN(timestamp)) {
|
||||
setError('无效的日期时间格式');
|
||||
setResult('');
|
||||
return;
|
||||
}
|
||||
|
||||
const finalResult = unit === 'milliseconds' ? timestamp : Math.floor(timestamp / 1000);
|
||||
|
||||
setResult(finalResult.toString());
|
||||
} catch (err) {
|
||||
console.error('转换错误:', err);
|
||||
setError('转换失败，请检查输入格式');
|
||||
setResult('');
|
||||
}
|
||||
}, [dateValue, selectedZone, unit]);
|
||||
|
||||
/**
|
||||
* 处理日期时间输入变化
|
||||
*/
|
||||
const handleDateChange = useCallback((e) => {
|
||||
setDateValue(e.target.value);
|
||||
setError(''); // 清除错误信息
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 处理时区选择变化
|
||||
*/
|
||||
const handleZoneChange = useCallback((e) => {
|
||||
setSelectedZone(e.target.value);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 处理时间戳单位变化
|
||||
*/
|
||||
const handleUnitChange = useCallback(
|
||||
(e) => {
|
||||
const newUnit = e.target.value;
|
||||
setUnit(newUnit);
|
||||
|
||||
// 如果已有结果，重新计算
|
||||
if (result) {
|
||||
const currentResult = parseInt(result, 10);
|
||||
if (!isNaN(currentResult)) {
|
||||
const newResult =
|
||||
newUnit === 'milliseconds' ? currentResult * 1000 : Math.floor(currentResult / 1000);
|
||||
setResult(newResult.toString());
|
||||
}
|
||||
}
|
||||
},
|
||||
[result],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="datetime-converter">
|
||||
<h2 className="converter-title">日期时间转时间戳</h2>
|
||||
|
||||
<div className="converter-form">
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="输入日期时间 (如: 2024-01-01 12:00:00)"
|
||||
value={dateValue}
|
||||
className="datetime-input"
|
||||
onChange={handleDateChange}
|
||||
aria-label="输入要转换的日期时间"
|
||||
title="支持格式: YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
<select
|
||||
value={selectedZone}
|
||||
className="timezone-select"
|
||||
onChange={handleZoneChange}
|
||||
aria-label="选择时区"
|
||||
>
|
||||
{TIME_ZONE_LIST.map((zone) => (
|
||||
<option key={zone} value={zone}>
|
||||
{zone}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="error-message" role="alert">
|
||||
⚠️ {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="action-group">
|
||||
<button
|
||||
className="converter-btn action-btn"
|
||||
onClick={handleConvertDatetimeToTimestamp}
|
||||
aria-label="转换日期时间为时间戳"
|
||||
>
|
||||
转换
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="result-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="转换结果"
|
||||
value={result}
|
||||
className="result-input"
|
||||
readOnly
|
||||
aria-label="转换结果"
|
||||
/>
|
||||
<select
|
||||
value={unit}
|
||||
className="unit-select"
|
||||
onChange={handleUnitChange}
|
||||
aria-label="选择时间戳单位"
|
||||
>
|
||||
{TIMESTAMP_UNITS.map(({ value, label }) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import CopyButton from './CopyButton';
|
||||
|
||||
/**
|
||||
* 时间戳显示和执行组件
|
||||
*
|
||||
* @component
|
||||
* @example
|
||||
* ```jsx
|
||||
* <TimestampExecution />
|
||||
* ```
|
||||
*
|
||||
* @returns {JSX.Element} 时间戳组件
|
||||
*/
|
||||
export function TimestampExecution() {
|
||||
/** @type {[number, function]} 当前时间戳（毫秒）和更新函数 */
|
||||
const [currentTimestamp, setCurrentTimestamp] = useState(() => Math.floor(Date.now()));
|
||||
|
||||
/** @type {[boolean, function]} 是否显示毫秒（true=毫秒，false=秒） */
|
||||
const [showMilliseconds, setShowMilliseconds] = useState(true);
|
||||
|
||||
/** @type {[boolean, function]} 时间戳是否正在自动更新 */
|
||||
const [isRunningTimestamp, setIsRunningTimestamp] = useState(true);
|
||||
|
||||
/**
|
||||
* 计算显示的时间戳值
|
||||
* @type {number}
|
||||
*/
|
||||
const displayTimestamp = showMilliseconds
|
||||
? currentTimestamp
|
||||
: Math.floor(currentTimestamp / 1000);
|
||||
|
||||
const unitText = showMilliseconds ? '毫秒' : '秒';
|
||||
|
||||
/**
|
||||
* 定时更新时间戳的副作用
|
||||
* 根据 isRunningTimestamp 和 showMilliseconds 控制定时器的启停和间隔
|
||||
*/
|
||||
useEffect(() => {
|
||||
let timer: number;
|
||||
|
||||
if (isRunningTimestamp) {
|
||||
const interval = showMilliseconds ? 100 : 1000;
|
||||
timer = window.setInterval(() => {
|
||||
setCurrentTimestamp(Math.floor(Date.now()));
|
||||
}, interval);
|
||||
}
|
||||
|
||||
// 清理函数
|
||||
return () => clearInterval(timer);
|
||||
}, [isRunningTimestamp, showMilliseconds]);
|
||||
|
||||
/**
|
||||
* 切换时间戳显示单位（毫秒/秒）
|
||||
*/
|
||||
const toggleUnit = useCallback(() => {
|
||||
setShowMilliseconds((prev) => !prev);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 切换时间戳自动更新状态（启动/停止）
|
||||
*/
|
||||
const toggleTimestamp = useCallback(() => {
|
||||
setIsRunningTimestamp((prev) => !prev);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 切换单位按钮的辅助文本
|
||||
* @type {string}
|
||||
*/
|
||||
const unitButtonLabel = showMilliseconds ? '切换为秒显示' : '切换为毫秒显示';
|
||||
|
||||
/**
|
||||
* 启动/停止按钮的辅助文本
|
||||
* @type {string}
|
||||
*/
|
||||
const toggleButtonLabel = isRunningTimestamp ? '停止时间戳自动更新' : '开始时间戳自动更新';
|
||||
|
||||
/**
|
||||
* 启动/停止按钮的显示文本
|
||||
* @type {string}
|
||||
*/
|
||||
const toggleButtonText = isRunningTimestamp ? '停止' : '开始';
|
||||
|
||||
return (
|
||||
<div className="timestamp-container">
|
||||
<div className="timestamp-display">
|
||||
<span className="timestamp-value">{displayTimestamp}</span>
|
||||
<span className="timestamp-unit">{unitText}</span>
|
||||
</div>
|
||||
|
||||
<div className="timestamp-controls">
|
||||
<button
|
||||
type="button"
|
||||
className="action-btn"
|
||||
onClick={toggleUnit}
|
||||
aria-label={unitButtonLabel}
|
||||
title={unitButtonLabel}
|
||||
>
|
||||
切换单位
|
||||
</button>
|
||||
|
||||
<CopyButton
|
||||
text={String(currentTimestamp)}
|
||||
buttonText="复制时间戳"
|
||||
aria-label="复制当前时间戳到剪贴板"
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className={`${isRunningTimestamp ? 'stop-btn' : 'action-btn'}`}
|
||||
onClick={toggleTimestamp}
|
||||
aria-label={toggleButtonLabel}
|
||||
title={toggleButtonLabel}
|
||||
>
|
||||
{toggleButtonText}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,191 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import { formatWithZone } from '../../../utils/timeUtils';
|
||||
|
||||
/**
|
||||
* 时间戳转日期时间组件
|
||||
*
|
||||
* 功能特性：
|
||||
* 1. 将时间戳转换为日期时间字符串
|
||||
* 2. 支持多种时区选择
|
||||
* 3. 支持毫秒和秒单位切换
|
||||
* 4. 提供输入验证和错误提示
|
||||
*
|
||||
* @component
|
||||
* @example
|
||||
* ```jsx
|
||||
* <TimestampToDatetime />
|
||||
* ```
|
||||
*
|
||||
* @returns {JSX.Element} 时间戳转日期时间组件
|
||||
*/
|
||||
|
||||
// 常用时区列表
|
||||
const TIME_ZONE_LIST = [
|
||||
'America/New_York',
|
||||
'America/Chicago',
|
||||
'America/Denver',
|
||||
'America/Los_Angeles',
|
||||
'America/Anchorage',
|
||||
'America/Honolulu',
|
||||
'Europe/London',
|
||||
'Europe/Paris',
|
||||
'Europe/Berlin',
|
||||
'Europe/Moscow',
|
||||
'Asia/Tokyo',
|
||||
'Asia/Shanghai',
|
||||
'Asia/Hong_Kong',
|
||||
'Asia/Singapore',
|
||||
'Asia/Dubai',
|
||||
'Asia/Kolkata',
|
||||
'Australia/Sydney',
|
||||
'Pacific/Auckland',
|
||||
];
|
||||
|
||||
// 时间戳单位选项
|
||||
const TIMESTAMP_UNITS = [
|
||||
{ value: 'milliseconds', label: '毫秒(ms)' },
|
||||
{ value: 'seconds', label: '秒(s)' },
|
||||
];
|
||||
|
||||
export function TimestampToDatetime() {
|
||||
/** @type {[string, function]} 输入的时间戳值 */
|
||||
const [timestampValue, setTimestampValue] = useState(() => Date.now());
|
||||
|
||||
/** @type {[string, function]} 转换结果 */
|
||||
const [timestampResult, setTimestampResult] = useState('');
|
||||
|
||||
/** @type {[string, function]} 时间戳单位 ('milliseconds' | 'seconds') */
|
||||
const [unit, setUnit] = useState('milliseconds');
|
||||
|
||||
/** @type {[string, function]} 选择的时区 */
|
||||
const [selectedZone, setSelectedZone] = useState('Asia/Shanghai');
|
||||
|
||||
/** @type {[string, function]} 错误信息 */
|
||||
const [error, setError] = useState('');
|
||||
|
||||
/**
|
||||
* 转换时间戳为日期时间
|
||||
* @type {function(): void}
|
||||
*/
|
||||
const handleConvertTimestampToDate = useCallback(() => {
|
||||
try {
|
||||
setError('');
|
||||
|
||||
if (!timestampValue) {
|
||||
setError('请输入时间戳');
|
||||
setTimestampResult('');
|
||||
return;
|
||||
}
|
||||
|
||||
const numericValue = Number(timestampValue);
|
||||
if (isNaN(numericValue)) {
|
||||
setError('无效的时间戳格式');
|
||||
setTimestampResult('');
|
||||
return;
|
||||
}
|
||||
|
||||
const result = formatWithZone(numericValue, selectedZone, unit);
|
||||
setTimestampResult(result);
|
||||
} catch (err) {
|
||||
console.error('转换时间戳出错:', err);
|
||||
setError('转换失败，请检查输入格式');
|
||||
setTimestampResult('');
|
||||
}
|
||||
}, [timestampValue, selectedZone, unit]);
|
||||
|
||||
/**
|
||||
* 处理时间戳输入变化
|
||||
* @type {function(React.ChangeEvent<HTMLInputElement>): void}
|
||||
*/
|
||||
const handleInputChange = useCallback((e) => {
|
||||
setTimestampValue(e.target.value);
|
||||
setError(''); // 清除错误信息
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 处理时区选择变化
|
||||
* @type {function(React.ChangeEvent<HTMLSelectElement>): void}
|
||||
*/
|
||||
const handleZoneChange = useCallback((e) => {
|
||||
setSelectedZone(e.target.value);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* 处理时间戳单位变化
|
||||
* @type {function(React.ChangeEvent<HTMLSelectElement>): void}
|
||||
*/
|
||||
const handleUnitChange = useCallback((e) => {
|
||||
setUnit(e.target.value);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="datetime-converter">
|
||||
<h2 className="converter-title">时间戳转日期时间</h2>
|
||||
|
||||
<div className="converter-form">
|
||||
<div className="input-group">
|
||||
<input
|
||||
type="number"
|
||||
placeholder="输入时间戳 (如: 1704067200000)"
|
||||
value={timestampValue}
|
||||
className="datetime-input"
|
||||
onChange={handleInputChange}
|
||||
aria-label="输入要转换的时间戳"
|
||||
title="支持毫秒或秒为单位的时间戳"
|
||||
/>
|
||||
<select
|
||||
value={unit}
|
||||
className="unit-select"
|
||||
onChange={handleUnitChange}
|
||||
aria-label="选择时间戳单位"
|
||||
>
|
||||
{TIMESTAMP_UNITS.map(({ value, label }) => (
|
||||
<option key={value} value={value}>
|
||||
{label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="error-message" role="alert">
|
||||
⚠️ {error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="action-group">
|
||||
<button
|
||||
className="converter-btn action-btn"
|
||||
onClick={handleConvertTimestampToDate}
|
||||
aria-label="转换时间戳为日期时间"
|
||||
>
|
||||
转换
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="result-group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="转换结果"
|
||||
value={timestampResult}
|
||||
className="result-input"
|
||||
readOnly
|
||||
aria-label="转换结果"
|
||||
/>
|
||||
<select
|
||||
value={selectedZone}
|
||||
className="timezone-select"
|
||||
onChange={handleZoneChange}
|
||||
aria-label="选择时区"
|
||||
>
|
||||
{TIME_ZONE_LIST.map((zone) => (
|
||||
<option key={zone} value={zone}>
|
||||
{zone}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { AppState } from '../types';
|
||||
import { messages } from '../../../utils/messages';
|
||||
|
||||
const RecordeReplayPage = () => {
|
||||
const [status, setStatus] = useState<AppState>(AppState.READ);
|
||||
const [isRecording, setIsRecording] = useState(false);
|
||||
|
||||
const getActiveTab = async () => {
|
||||
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
|
||||
return tab;
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleMessage = (msg: { type: string }) => {
|
||||
if (msg.type === messages.popup.ready) {
|
||||
setStatus(AppState.READ);
|
||||
} else if (msg.type === messages.popup.to.started) {
|
||||
setStatus(AppState.RECORDING);
|
||||
} else if (msg.type === messages.popup.to.stoped) {
|
||||
setStatus(AppState.READ);
|
||||
}
|
||||
};
|
||||
|
||||
browser.runtime.onMessage.addListener(handleMessage);
|
||||
|
||||
browser.runtime.sendMessage({ type: messages.popup.checkStatus });
|
||||
|
||||
return () => browser.runtime.onMessage.removeListener(handleMessage);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const checkStatus = async () => {
|
||||
const tab = await getActiveTab();
|
||||
if (tab?.id) {
|
||||
try {
|
||||
chrome.tabs.sendMessage(tab.id, { command: 'CHECK_STATUS' }, (response) => {
|
||||
// 如果 content script 没加载，这里会报错，需要 catch
|
||||
if (chrome.runtime.lastError) {
|
||||
console.log('Content script not ready');
|
||||
return;
|
||||
}
|
||||
if (response?.isRecording) {
|
||||
setIsRecording(true);
|
||||
setStatus(AppState.RECORDING);
|
||||
console.log(status);
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
};
|
||||
checkStatus();
|
||||
}, [status]);
|
||||
|
||||
const toggleRecording = async () => {
|
||||
const tab = await getActiveTab();
|
||||
if (!tab?.id) return;
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ padding: '20px' }}>
|
||||
<div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
|
||||
<button className={`action-btn ${isRecording ? 'stop-btn' : ''}`} onClick={toggleRecording}>
|
||||
{isRecording ? '停止录制' : '开始录制'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecordeReplayPage;
|
||||
@@ -0,0 +1,15 @@
|
||||
import { TimestampToDatetime } from '../components/TimestampToDatetime';
|
||||
import { DatetimeToTimestamp } from '../components/DatetimeToTimestamp';
|
||||
import { TimestampExecution } from '../components/TimestampExecution';
|
||||
|
||||
const TimestampPage = () => {
|
||||
return (
|
||||
<div className="timestamp-utils">
|
||||
<TimestampExecution />
|
||||
<TimestampToDatetime />
|
||||
<DatetimeToTimestamp />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimestampPage;
|
||||
@@ -0,0 +1,4 @@
|
||||
export enum AppState {
|
||||
READ = 'ready',
|
||||
RECORDING = 'recording',
|
||||
}
|
||||
Reference in New Issue
Block a user