fix

public/background.js

@@ -2,7 +2,7 @@ import {ActionType, injectScriptAndSendMessage, WebSocketManager} from './socket
 import { setupProxyHandlers } from './proxy.js';
 import { ProxyActionType } from './types/action.js';
 
-console.info("Chrome Extenstion Background is loaded")
+console.info("Chrome Extension Background is loaded");
 
 const websocketManager = new WebSocketManager();
 
@@ -12,13 +12,17 @@ setupProxyHandlers();
 // 添加点击事件处理
 chrome.action.onClicked.addListener((tab) => {
     // 打开侧边栏
-    chrome.sidePanel.open({ windowId: tab.windowId });
+    chrome.sidePanel.open({windowId: tab.windowId}).catch(error => {
+        console.error('Error opening side panel:', error);
+    });
 });
 
-// 可选：设置默认打开状态
+// 设置默认打开状态
 chrome.sidePanel.setOptions({
     enabled: true,
     path: 'index.html'
+}).catch(error => {
+    console.error('Error setting side panel options:', error);
 });
 
 chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {

public/db/db.js

@@ -3,9 +3,13 @@ class Database {
         this.DB_NAME = 'yaklang_extension';
         this.DB_VERSION = 1;
         this.stores = {
+            // 代理日志存储
             PROXY_LOGS: 'proxy_logs',
+            // 代理配置列表存储
             PROXY_CONFIGS: 'proxy_configs',
+            // 当前代理配置存储
             CURRENT_PROXY: 'current_proxy',
+            // 代理认证信息存储
             PROXY_AUTH: 'proxy_auth'
         };
     }
@@ -55,7 +59,7 @@ class Database {
         return tx.objectStore(storeName);
     }
 
-    // 通用的 CRUD 操作
+    // CRUD 操作
     async get(storeName, key) {
         const store = await this.getStore(storeName);
         return new Promise((resolve, reject) => {

public/proxy.js

@@ -1,8 +1,8 @@
-import { ProxySettings } from './proxy/proxy-settings.js';
+import {ProxySettings} from './proxy/proxy-settings.js';
-import { ProxyAuth } from './proxy/proxy-auth.js';
+import {ProxyAuth} from './proxy/proxy-auth.js';
-import { ProxyActionType } from './types/action.js';
+import {ProxyActionType} from './types/action.js';
-import { proxyLogs } from './proxy/proxy-logs.js';
+import {proxyLogs} from './proxy/proxy-logs.js';
-import { proxyStore } from './db/proxy-store.js';
+import {proxyStore} from './db/proxy-store.js';
 
 // 修改代理状态获取函数为 Promise 形式
 function getProxySettings() {
@@ -17,7 +17,7 @@ async function handleSetProxyConfig(config, sendResponse) {
         if (config.proxyType === 'direct') {
             await new Promise((resolve) => {
                 chrome.proxy.settings.set({
-                    value: { mode: "direct" },
+                    value: {mode: "direct"},
                     scope: 'regular'
                 }, resolve);
             });
@@ -41,7 +41,7 @@ async function handleSetProxyConfig(config, sendResponse) {
                 await proxyStore.saveProxyConfigs(updatedConfigs);
 
                 console.log('Direct connection set successfully');
-                sendResponse({ success: true });
+                sendResponse({success: true});
             } else {
                 console.error('Failed to set direct connection');
                 sendResponse({
@@ -82,8 +82,8 @@ async function handleSetProxyConfig(config, sendResponse) {
 
         const settings = await getProxySettings();
         const isSuccess = settings.value.mode === "fixed_servers" &&
-                         settings.value.rules.singleProxy.host === config.host &&
+            settings.value.rules.singleProxy.host === config.host &&
-                         settings.value.rules.singleProxy.port === parseInt(config.port);
+            settings.value.rules.singleProxy.port === parseInt(config.port);
 
         if (isSuccess) {
             await proxyStore.setCurrentProxy({
@@ -99,7 +99,7 @@ async function handleSetProxyConfig(config, sendResponse) {
             await proxyStore.saveProxyConfigs(updatedConfigs);
 
             console.log('Proxy successfully set:', settings.value);
-            sendResponse({ success: true });
+            sendResponse({success: true});
         } else {
             console.error('Proxy settings verification failed');
             sendResponse({
@@ -126,7 +126,7 @@ async function handleClearProxyConfig(sendResponse) {
 
         await new Promise((resolve) => {
             chrome.proxy.settings.set({
-                value: { mode: "system" },
+                value: {mode: "system"},
                 scope: 'regular'
             }, resolve);
         });
@@ -147,7 +147,7 @@ async function handleClearProxyConfig(sendResponse) {
 
         if (isSuccess) {
             console.log('Proxy successfully cleared');
-            sendResponse({ success: true });
+            sendResponse({success: true});
         } else {
             console.error('Failed to clear proxy settings');
             sendResponse({
@@ -200,7 +200,7 @@ function setupProxyRequestListener() {
             });
             // 不需要返回值
         },
-        { urls: ["<all_urls>"] }
+        {urls: ["<all_urls>"]}
     );
 
     // 监听请求错误
@@ -211,7 +211,7 @@ function setupProxyRequestListener() {
                 console.error('Error in proxy error listener:', error);
             });
         },
-        { urls: ["<all_urls>"] }
+        {urls: ["<all_urls>"]}
     );
 }
 
@@ -279,7 +279,7 @@ export function setupProxyHandlers() {
 
             case ProxyActionType.CLEAR_PROXY_LOGS:
                 proxyLogs.clearLogs().then(() => {
-                    sendResponse({ success: true });
+                    sendResponse({success: true});
                 }).catch(error => {
                     sendResponse({
                         success: false,
@@ -305,8 +305,9 @@ export function setupProxyHandlers() {
             case ProxyActionType.ADD_PROXY_CONFIG:
                 proxyStore.getProxyConfigs().then(async configs => {
                     const newConfigs = [...configs, msg.config];
-                    await proxyStore.saveProxyConfigs(newConfigs);
+                    ProxyActionType
-                    sendResponse({ success: true });
+                    proxyStore.saveProxyConfigs(newConfigs);
+                    sendResponse({success: true});
                 }).catch(error => {
                     sendResponse({
                         success: false,
@@ -353,7 +354,8 @@ export function setupProxyHandlers() {
             await ProxySettings.setDefaultConfigs();
 
             // 清除之前的代理设置
-            await handleClearProxyConfig(() => {});
+            await handleClearProxyConfig(() => {
+            });
 
             // 设置认证监听
             await ProxyAuth.setupAuthListener();

public/proxy/options.js

@@ -163,7 +163,5 @@ function showError(message) {
     // 5秒后自动移除错误信息
     setTimeout(() => {
         errorDiv.remove();
-    }, 5000);
+    }, 3000);
 }
-
-// ... 其他代码保持不变 

public/proxy/proxy-logs.js

@@ -2,33 +2,6 @@ import { proxyStore } from '../db/proxy-store.js';
 
 // 日志数据库管理
 class ProxyLogs {
-    constructor() {
-        this.DB_NAME = 'proxy_extension';
-        this.STORE_NAME = 'proxy_logs';
-        this.DB_VERSION = 1;
-        this.MAX_LOGS = 1000; // 最多保存1000条日志
-    }
-
-    async initDB() {
-        return new Promise((resolve, reject) => {
-            const request = indexedDB.open(this.DB_NAME, this.DB_VERSION);
-
-            request.onerror = () => reject(request.error);
-            request.onsuccess = () => resolve(request.result);
-
-            request.onupgradeneeded = (event) => {
-                const db = event.target.result;
-                if (!db.objectStoreNames.contains(this.STORE_NAME)) {
-                    const store = db.createObjectStore(this.STORE_NAME, { keyPath: 'id' });
-                    // 创建索引
-                    store.createIndex('timestamp', 'timestamp');
-                    store.createIndex('resourceType', 'resourceType');
-                    store.createIndex('status', 'status');
-                }
-            };
-        });
-    }
-
     async getResourceType(details) {
         try {
             // 首先检查请求类型
@@ -174,9 +147,4 @@ class ProxyLogs {
     }
 }
 
-// 导出实例而不是直接使用顶层 await
 export const proxyLogs = new ProxyLogs();
-
-// 移除这些顶层 await 语句
-// await proxyStore.addLog({...});
-// const logs = await proxyStore.getLogs(); 

src/index.jsx

@@ -1,7 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<App/>);

src/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+// 获取根元素
+const container = document.getElementById('root');
+if (!container) throw new Error('Failed to find the root element');
+
+// 创建根
+const root = createRoot(container);
+
+// 渲染应用
+root.render(
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+); 

src/pages/OptionsPage/components/ProxySettings/index.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
+import React, { useRef } from 'react';
-import { Card, Input, Space, Button, Select, InputNumber, Form, Table } from 'antd';
+import { Card, Input, Space, Button, Select, InputNumber, Form, Table, Tooltip, Popover } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
 import { ProxyConfig } from '@/types/proxy';
@@ -143,16 +143,16 @@ export const ProxySettings: React.FC<ProxySettingsProps> = ({
         }
     ];
 
+    const buttonRef = useRef(null);
+
     return (
         <div>
             <Space style={{ marginBottom: 16, justifyContent: 'flex-end', width: '100%' }}>
-                <Button 
+                <Popover content="添加代理" trigger="hover">
-                    type="primary" 
+                    <Button ref={buttonRef} onClick={onAdd}>
-                    icon={<PlusOutlined />} 
+                        添加代理
-                    onClick={onAdd}
+                    </Button>
-                >
+                </Popover>
-                    添加代理
-                </Button>
             </Space>
             <Table 
                 dataSource={proxyConfigs}

src/pages/options.tsx

@@ -2,11 +2,12 @@ import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { App } from 'antd';
 import { OptionsPage } from './OptionsPage';
-import zhCN from 'antd/locale/zh_CN';
 import '@/styles/global.css';
 
 const container = document.getElementById('root');
-const root = createRoot(container!);
+if (!container) throw new Error('Failed to find the root element');
+
+const root = createRoot(container);
 
 root.render(
     <App>

tsconfig.json

@@ -19,10 +19,12 @@
     "typeRoots": [
       "./node_modules/@types",
       "./src/types"
-    ]
+    ],
+    "skipLibCheck": true,
+    "lib": ["dom", "dom.iterable", "esnext"]
   },
   "include": [
-    "./src/**/*",
+    "./src/**/*"
   ],
   "exclude": [
     "node_modules"

webpack.config.js

@@ -7,7 +7,7 @@ const webpack = require('webpack');
 module.exports = {
   mode: 'development', // 设置模式为开发模式
   entry: {
-    main: './src/index.jsx',
+    main: './src/index.tsx',
     options: './src/pages/options.tsx'
   },
   output: {
@@ -52,9 +52,16 @@ module.exports = {
         use: ['style-loader', 'css-loader']
       },
       {
-        test: /\.tsx?$/, // 匹配TS和TSX文件
+        test: /\.tsx?$/,
-        use: 'ts-loader',
+        use: [
-        exclude: /node_modules/,
+          {
+            loader: 'ts-loader',
+            options: {
+              transpileOnly: true  // 添加这个选项可以加快编译速度
+            }
+          }
+        ],
+        exclude: /node_modules/
       },
       {
         test: /\.(js|jsx)$/, // 匹配JS和JSX文件