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!;
-  }
 });