更换使用wxt框架搭建testing tool

entrypoints/background.ts

@@ -0,0 +1,30 @@
+export default defineBackground(() => {
+  console.log('Hello background!', { id: browser.runtime.id });
+
+  console.log('Background script loaded');
+
+  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    console.log('收到消息:', request);
+
+    if (request.action === 'copy') {
+      console.log('开始复制文本:', request.text);
+
+      navigator.clipboard
+        .writeText(request.text)
+        .then(() => {
+          console.log('复制成功');
+          sendResponse({ success: true });
+        })
+        .catch((err) => {
+          console.error('复制失败:', err);
+          sendResponse({ success: false, error: err.message });
+        });
+
+      return true; // 保持消息端口开放以支持异步响应
+    }
+
+    // 对于未知的操作，也返回响应
+    sendResponse({ success: false, error: '未知操作' });
+    return false;
+  });
+});

entrypoints/content.ts

@@ -0,0 +1,6 @@
+export default defineContentScript({
+  matches: ['*://*.google.com/*'],
+  main() {
+    console.log('Hello content.');
+  },
+});

entrypoints/popup/App.tsx

@@ -0,0 +1,105 @@
+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 './App.css';
+
+const navItems = [
+  { path: '/', label: '时间戳', element: <TimestampPage /> },
+  // {path: '/dzmy', label: '电子木鱼', element: <ElectronicWoodenFishPage/>},
+  // { path: '/recorde-replay', label: '录制与回放', element: <RecordeReplayPage /> },
+];
+
+function App() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [visibleItems, setVisibleItems] = useState(navItems.length);
+
+  // 检测屏幕尺寸变化
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+      setIsMobile(width < 768);
+
+      // 根据屏幕宽度决定显示多少个导航项
+      if (width >= 768) {
+        setVisibleItems(navItems.length); // 大屏幕显示所有
+      } else if (width >= 480) {
+        // 中等屏幕：如果导航项超过3个，显示3个，否则显示全部
+        setVisibleItems(Math.min(3, navItems.length));
+      } else {
+        // 小屏幕：如果导航项超过2个，显示2个，否则显示全部
+        setVisibleItems(Math.min(2, navItems.length));
+      }
+    };
+
+    handleResize(); // 初始调用
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // 计算哪些导航项应该显示，哪些应该折叠
+  const visibleNavItems = navItems.slice(0, visibleItems);
+  const collapsedNavItems = navItems.slice(visibleItems);
+
+  return (
+    <Router>
+      <div className="app">
+        <nav className="nav">
+          <div className="nav-content">
+            <ul className={`nav-list ${isMenuOpen ? 'open' : ''}`}>
+              {visibleNavItems.map((item) => (
+                <li key={item.path}>
+                  <NavLink
+                    to={item.path}
+                    className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}
+                    onClick={() => isMobile && setIsMenuOpen(false)}
+                  >
+                    {item.label}
+                  </NavLink>
+                </li>
+              ))}
+
+              {/* 折叠的导航项 */}
+              {collapsedNavItems.length > 0 && (
+                <li className="nav-collapse-item">
+                  <div className={`nav-collapse-content ${isMenuOpen ? 'show' : ''}`}>
+                    {isMenuOpen &&
+                      collapsedNavItems.map((item) => (
+                        <NavLink
+                          key={item.path}
+                          to={item.path}
+                          className={({ isActive }) => (isActive ? 'nav-link active' : 'nav-link')}
+                          onClick={() => setIsMenuOpen(false)}
+                        >
+                          {item.label}
+                        </NavLink>
+                      ))}
+                  </div>
+                  <button
+                    className="nav-toggle"
+                    onClick={() => setIsMenuOpen(!isMenuOpen)}
+                    aria-label={isMenuOpen ? '收起菜单' : '展开菜单'}
+                  >
+                    <span className="nav-toggle-icon">{isMenuOpen ? '×' : '☰'}</span>
+                    {collapsedNavItems.length > 0 && !isMenuOpen && (
+                      <span className="nav-collapse-count">+{collapsedNavItems.length}</span>
+                    )}
+                  </button>
+                </li>
+              )}
+            </ul>
+          </div>
+        </nav>
+
+        <Routes>
+          {navItems.map((item) => (
+            <Route key={item.path} path={item.path} element={item.element} />
+          ))}
+        </Routes>
+      </div>
+    </Router>
+  );
+}
+
+export default App;

entrypoints/popup/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Default Popup Title</title>
+    <meta name="manifest.type" content="browser_action" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

entrypoints/popup/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './style.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

entrypoints/popup/style.css

@@ -0,0 +1,18 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-size: inherit; /* 先全部重置为继承大小 */
+    font-weight: inherit;
+}