feat:

1、移动popup的page、components
2、更新wxt的host权限
3、验证message传递逻辑

entrypoints/popup/App.tsx

@@ -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 = [

entrypoints/popup/components/CopyButton.tsx

@@ -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;

entrypoints/popup/components/DatetimeToTimestamp.tsx

@@ -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>
+  );
+}

entrypoints/popup/components/TimestampExecution.tsx

@@ -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>
+  );
+}

entrypoints/popup/components/TimestampToDatetime.tsx

@@ -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>
+  );
+}

entrypoints/popup/pages/RecordeReplayPage.tsx

@@ -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;

entrypoints/popup/pages/TimestampPage.tsx

@@ -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;

entrypoints/popup/types.tsx

@@ -0,0 +1,4 @@
+export enum AppState {
+  READ = 'ready',
+  RECORDING = 'recording',
+}