feat(extension): 添加调试器功能并优化界面布局

- 集成 Chrome 调试器 API 支持 attach/detach 功能
- 新增 tabUtils 工具模块用于获取活动标签页 ID
- 在背景脚本中添加标签页激活和更新事件监听
- 使用 Material-UI 容器和堆叠组件重构页面布局
- 移除 Chromium 启动参数中的自动打开开发者工具选项
- 更新权限配置添加调试器相关权限
- 在测试页面添加多个调试功能按钮和状态管理

entrypoints/background.ts

@@ -2,6 +2,7 @@ import '../.wxt/types/imports.d.ts';
 import { browser } from 'wxt/browser';
 import { downloadHtmlInBackground } from '@/utils/recordUtils.tsx';
 import { sendMessage, onMessage } from '@/utils/messages';
+import { getActiveTabId } from '@/utils/tabUtils';
 
 const events: unknown[] = [];
 
@@ -52,6 +53,14 @@ export default defineBackground(() => {
     );
   });
 
+  chrome.tabs.onActivated.addListener((activeInfo) => {
+    console.log('当前活跃的 Tab ID:', activeInfo.tabId);
+  });
+
+  chrome.tabs.onUpdated.addListener((tabId) => {
+    console.log('加载完成的 Tab ID:', tabId);
+  });
+
   onMessage('popup:check-status', async (message) => {
     console.log(`[background] popup:check-status: ${message}`);
     const obj = {
@@ -109,35 +118,4 @@ export default defineBackground(() => {
     events.push(eventsList);
     return true;
   });
-
-  async function getActiveTabId() {
-    const activeTabs = await chrome.tabs.query({
-      active: true,
-      currentWindow: true,
-    });
-    const activeTab = activeTabs[0];
-
-    if (!activeTab) {
-      throw new Error('No active tab found.');
-    }
-
-    // 检查URL是否受限
-    if (activeTab?.url) {
-      const restrictedProtocols = [
-        'chrome:',
-        'chrome-extension:',
-        'about:',
-        'edge:',
-        'view-source:',
-        'data:',
-        'file:',
-      ];
-      if (restrictedProtocols.some((protocol) => activeTab.url!.startsWith(protocol))) {
-        throw new Error(`Cannot send message to a restricted URL: ${activeTab.url}`);
-      }
-    }
-
-    const sendTo = activeTab.id;
-    return sendTo!;
-  }
 });

entrypoints/popup/pages/RecordeReplayPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState, useMemo } from 'react';
 import { AppState } from '../types';
 import { sendMessage, onMessage } from '@/utils/messages';
-import { Button } from '@mui/material';
+import { Button, Container, Stack } from '@mui/material';
 
 const RecordeReplayPage = () => {
   const [status, setStatus] = useState<AppState>(AppState.READ);
@@ -54,8 +54,8 @@ const RecordeReplayPage = () => {
   };
 
   return (
-    <div style={{ padding: '20px' }}>
-      <div style={{ display: 'flex', gap: '10px', marginBottom: '20px' }}>
+    <Container maxWidth={false} sx={{ py: 2.5 }}>
+      <Stack direction="row" spacing={1.25} sx={{ mb: 2.5 }}>
         <Button
           variant="contained"
           size="medium"
@@ -64,8 +64,8 @@ const RecordeReplayPage = () => {
         >
           {isRecording ? '停止录制' : '开始录制'}
         </Button>
-      </div>
-    </div>
+      </Stack>
+    </Container>
   );
 };
 

entrypoints/popup/pages/TestPage.tsx

@@ -1,16 +1,84 @@
 import { sendMessage } from '@/utils/messages';
 import { Button } from '@mui/material';
+import { useState, useEffect } from 'react';
 
 const TestPage = () => {
+  const [tabId, setTabId] = useState(-1);
+
+  useEffect(() => {
+    (async () => {
+      const activeTabs = await chrome.tabs.query({
+        active: true,
+        currentWindow: true,
+      });
+      console.log(`activeTabs:`, activeTabs[0].id);
+      if (activeTabs[0].id && activeTabs[0].id > 0) setTabId(activeTabs[0].id);
+      else throw new Error('no active tab');
+    })();
+  });
+
   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', () => {
+        console.log('[debugger] attached');
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleDetach = async () => {
+    try {
+      chrome.debugger.detach({ tabId: tabId }, () => {
+        console.log('[debugger] detached');
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
+  const handleGetTarget = () => {
+    chrome.debugger.getTargets((targets) => {
+      console.log('[debugger] targets:', targets);
+    });
+  };
+
+  const enableRuntime = () => {
+    chrome.debugger.sendCommand({ tabId: tabId }, 'Runtime.enable', {}, (res) => {
+      console.log('[debugger] Runtime.enable:', res);
+    });
+  };
+
+  const disableRuntime = () => {
+    chrome.debugger.sendCommand({ tabId: tabId }, 'Runtime.disable', {}, (res) => {
+      console.log('[debugger] Runtime.disable:', res);
+    });
+  };
   return (
     <div>
       <Button variant="contained" color="primary" onClick={handleSeedMessage}>
         发送消息
       </Button>
+      <Button variant="contained" color="primary" onClick={handleAttach}>
+        attach
+      </Button>
+      <Button variant="contained" color="primary" onClick={handleDetach}>
+        detach
+      </Button>
+      <Button variant="contained" color="primary" onClick={handleGetTarget}>
+        getTargets
+      </Button>
+      <Button variant="contained" color="primary" onClick={enableRuntime}>
+        enableRuntime
+      </Button>
+      <Button variant="contained" color="primary" onClick={disableRuntime}>
+        disableRuntime
+      </Button>
     </div>
   );
 };

entrypoints/popup/pages/TimestampPage.tsx

@@ -1,14 +1,17 @@
 import { TimestampToDatetime } from '@/components/TimestampToDatetime';
 import { DatetimeToTimestamp } from '@/components/DatetimeToTimestamp';
 import { TimestampExecution } from '@/components/TimestampExecution';
+import { Container, Box } from '@mui/material';
 
 const TimestampPage = () => {
   return (
-    <div className="timestamp-utils">
-      <TimestampExecution />
-      <TimestampToDatetime />
-      <DatetimeToTimestamp />
-    </div>
+    <Container maxWidth="md" sx={{ py: 2 }}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, width: '100%' }}>
+        <TimestampExecution />
+        <TimestampToDatetime />
+        <DatetimeToTimestamp />
+      </Box>
+    </Container>
   );
 };