archive/yaklang-chrome-extension
1
0
Fork 0
mirror of https://github.com/yaklang/yaklang-chrome-extension.git synced 2026-09-22 03:10:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
go0p
2025-03-04 16:07:14 +08:00
parent 6f82842c92
commit 06c053228c
11 changed files with 126 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/background.js
+7 -3
View File
@@ -2,7 +2,7 @@ import {ActionType, injectScriptAndSendMessage, WebSocketManager} from './socket
import { setupProxyHandlers } from './proxy.js'; import { setupProxyHandlers } from './proxy.js';
import { ProxyActionType } from './types/action.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(); const websocketManager = new WebSocketManager();
@@ -12,13 +12,17 @@ setupProxyHandlers();
// 添加点击事件处理 // 添加点击事件处理
chrome.action.onClicked.addListener((tab) => { 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({ chrome.sidePanel.setOptions({
enabled: true, enabled: true,
path: 'index.html' path: 'index.html'
}).catch(error => {
console.error('Error setting side panel options:', error);
}); });
chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) { chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
public/db/db.js
+5 -1
View File
@@ -3,9 +3,13 @@ class Database {
this.DB_NAME = 'yaklang_extension'; this.DB_NAME = 'yaklang_extension';
this.DB_VERSION = 1; this.DB_VERSION = 1;
this.stores = { this.stores = {
// 代理日志存储
PROXY_LOGS: 'proxy_logs', PROXY_LOGS: 'proxy_logs',
// 代理配置列表存储
PROXY_CONFIGS: 'proxy_configs', PROXY_CONFIGS: 'proxy_configs',
// 当前代理配置存储
CURRENT_PROXY: 'current_proxy', CURRENT_PROXY: 'current_proxy',
// 代理认证信息存储
PROXY_AUTH: 'proxy_auth' PROXY_AUTH: 'proxy_auth'
}; };
} }
@@ -55,7 +59,7 @@ class Database {
return tx.objectStore(storeName); return tx.objectStore(storeName);
} }
// 通用的 CRUD 操作 // CRUD 操作
async get(storeName, key) { async get(storeName, key) {
const store = await this.getStore(storeName); const store = await this.getStore(storeName);
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
public/proxy.js
+67 -65
View File
@@ -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 形式 // 修改代理状态获取函数为 Promise 形式
function getProxySettings() { function getProxySettings() {
@@ -17,7 +17,7 @@ async function handleSetProxyConfig(config, sendResponse) {
if (config.proxyType === 'direct') { if (config.proxyType === 'direct') {
await new Promise((resolve) => { await new Promise((resolve) => {
chrome.proxy.settings.set({ chrome.proxy.settings.set({
value: { mode: "direct" }, value: {mode: "direct"},
scope: 'regular' scope: 'regular'
}, resolve); }, resolve);
}); });
@@ -41,12 +41,12 @@ async function handleSetProxyConfig(config, sendResponse) {
await proxyStore.saveProxyConfigs(updatedConfigs); await proxyStore.saveProxyConfigs(updatedConfigs);
console.log('Direct connection set successfully'); console.log('Direct connection set successfully');
sendResponse({ success: true }); sendResponse({success: true});
} else { } else {
console.error('Failed to set direct connection'); console.error('Failed to set direct connection');
sendResponse({ sendResponse({
success: false, success: false,
error: '无法设置直接连接' error: '无法设置直接连接'
}); });
} }
return; return;
@@ -54,9 +54,9 @@ async function handleSetProxyConfig(config, sendResponse) {
// 处理代理服务器的情况 // 处理代理服务器的情况
if (!config || !config.host || !config.port) { if (!config || !config.host || !config.port) {
sendResponse({ sendResponse({
success: false, success: false,
error: '无效的代理配置' error: '无效的代理配置'
}); });
return; return;
} }
@@ -81,9 +81,9 @@ async function handleSetProxyConfig(config, sendResponse) {
}); });
const settings = await getProxySettings(); const settings = await getProxySettings();
const isSuccess = settings.value.mode === "fixed_servers" && 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) { if (isSuccess) {
await proxyStore.setCurrentProxy({ await proxyStore.setCurrentProxy({
@@ -99,19 +99,19 @@ async function handleSetProxyConfig(config, sendResponse) {
await proxyStore.saveProxyConfigs(updatedConfigs); await proxyStore.saveProxyConfigs(updatedConfigs);
console.log('Proxy successfully set:', settings.value); console.log('Proxy successfully set:', settings.value);
sendResponse({ success: true }); sendResponse({success: true});
} else { } else {
console.error('Proxy settings verification failed'); console.error('Proxy settings verification failed');
sendResponse({ sendResponse({
success: false, success: false,
error: '代理设置验证失败' error: '代理设置验证失败'
}); });
} }
} catch (error) { } catch (error) {
console.error('Error setting proxy:', error); console.error('Error setting proxy:', error);
sendResponse({ sendResponse({
success: false, success: false,
error: error.message || '设置代理时发生错误' error: error.message || '设置代理时发生错误'
}); });
} }
} }
@@ -126,7 +126,7 @@ async function handleClearProxyConfig(sendResponse) {
await new Promise((resolve) => { await new Promise((resolve) => {
chrome.proxy.settings.set({ chrome.proxy.settings.set({
value: { mode: "system" }, value: {mode: "system"},
scope: 'regular' scope: 'regular'
}, resolve); }, resolve);
}); });
@@ -147,19 +147,19 @@ async function handleClearProxyConfig(sendResponse) {
if (isSuccess) { if (isSuccess) {
console.log('Proxy successfully cleared'); console.log('Proxy successfully cleared');
sendResponse({ success: true }); sendResponse({success: true});
} else { } else {
console.error('Failed to clear proxy settings'); console.error('Failed to clear proxy settings');
sendResponse({ sendResponse({
success: false, success: false,
error: '无法清除代理设置' error: '无法清除代理设置'
}); });
} }
} catch (error) { } catch (error) {
console.error('Error clearing proxy:', error); console.error('Error clearing proxy:', error);
sendResponse({ sendResponse({
success: false, success: false,
error: error.message || '清除代理时发生错误' error: error.message || '清除代理时发生错误'
}); });
} }
} }
@@ -168,7 +168,7 @@ async function handleGetProxyStatus(sendResponse) {
try { try {
const settings = await getProxySettings(); const settings = await getProxySettings();
const currentProxy = await proxyStore.getCurrentProxy(); const currentProxy = await proxyStore.getCurrentProxy();
const status = { const status = {
enabled: settings.value.mode === "fixed_servers", enabled: settings.value.mode === "fixed_servers",
config: currentProxy || null, config: currentProxy || null,
@@ -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); console.error('Error in proxy error listener:', error);
}); });
}, },
{ urls: ["<all_urls>"] } {urls: ["<all_urls>"]}
); );
} }
@@ -249,55 +249,55 @@ export function setupProxyHandlers() {
// 消息监听器 // 消息监听器
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => { chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
console.log("Proxy message:", msg); console.log("Proxy message:", msg);
switch (msg.action) { switch (msg.action) {
case ProxyActionType.SET_PROXY_CONFIG: case ProxyActionType.SET_PROXY_CONFIG:
handleSetProxyConfig(msg.config, sendResponse); handleSetProxyConfig(msg.config, sendResponse);
return true; return true;
case ProxyActionType.CLEAR_PROXY_CONFIG: case ProxyActionType.CLEAR_PROXY_CONFIG:
handleClearProxyConfig(sendResponse); handleClearProxyConfig(sendResponse);
return true; return true;
case ProxyActionType.GET_PROXY_STATUS: case ProxyActionType.GET_PROXY_STATUS:
handleGetProxyStatus(sendResponse); handleGetProxyStatus(sendResponse);
return true; return true;
case ProxyActionType.GET_PROXY_LOGS: case ProxyActionType.GET_PROXY_LOGS:
proxyLogs.getLogs().then(logs => { proxyLogs.getLogs().then(logs => {
sendResponse({ sendResponse({
success: true, success: true,
data: logs data: logs
}); });
}).catch(error => { }).catch(error => {
sendResponse({ sendResponse({
success: false, success: false,
error: error.message error: error.message
}); });
}); });
return true; return true;
case ProxyActionType.CLEAR_PROXY_LOGS: case ProxyActionType.CLEAR_PROXY_LOGS:
proxyLogs.clearLogs().then(() => { proxyLogs.clearLogs().then(() => {
sendResponse({ success: true }); sendResponse({success: true});
}).catch(error => { }).catch(error => {
sendResponse({ sendResponse({
success: false, success: false,
error: error.message error: error.message
}); });
}); });
return true; return true;
case ProxyActionType.GET_PROXY_CONFIGS: case ProxyActionType.GET_PROXY_CONFIGS:
proxyStore.getProxyConfigs().then(configs => { proxyStore.getProxyConfigs().then(configs => {
sendResponse({ sendResponse({
success: true, success: true,
data: configs data: configs
}); });
}).catch(error => { }).catch(error => {
sendResponse({ sendResponse({
success: false, success: false,
error: error.message error: error.message
}); });
}); });
return true; return true;
@@ -305,12 +305,13 @@ export function setupProxyHandlers() {
case ProxyActionType.ADD_PROXY_CONFIG: case ProxyActionType.ADD_PROXY_CONFIG:
proxyStore.getProxyConfigs().then(async configs => { proxyStore.getProxyConfigs().then(async configs => {
const newConfigs = [...configs, msg.config]; const newConfigs = [...configs, msg.config];
await proxyStore.saveProxyConfigs(newConfigs); ProxyActionType
sendResponse({ success: true }); proxyStore.saveProxyConfigs(newConfigs);
sendResponse({success: true});
}).catch(error => { }).catch(error => {
sendResponse({ sendResponse({
success: false, success: false,
error: error.message error: error.message
}); });
}); });
return true; return true;
@@ -321,23 +322,23 @@ export function setupProxyHandlers() {
if (!msg.configs || !Array.isArray(msg.configs)) { if (!msg.configs || !Array.isArray(msg.configs)) {
throw new Error('无效的配置数据'); throw new Error('无效的配置数据');
} }
console.log('Updating proxy configs:', msg.configs); console.log('Updating proxy configs:', msg.configs);
await proxyStore.saveProxyConfigs(msg.configs); await proxyStore.saveProxyConfigs(msg.configs);
// 获取最新的配置 // 获取最新的配置
const updatedConfigs = await proxyStore.getProxyConfigs(); const updatedConfigs = await proxyStore.getProxyConfigs();
console.log('Configs updated successfully:', updatedConfigs); console.log('Configs updated successfully:', updatedConfigs);
// 发送响应 // 发送响应
sendResponse({ sendResponse({
success: true, success: true,
data: updatedConfigs data: updatedConfigs
}); });
} catch (error) { } catch (error) {
console.error('Error updating proxy configs:', error); console.error('Error updating proxy configs:', error);
sendResponse({ sendResponse({
success: false, success: false,
error: error.message || '更新代理配置失败' error: error.message || '更新代理配置失败'
}); });
} }
@@ -351,10 +352,11 @@ export function setupProxyHandlers() {
try { try {
// 确保默认配置存在 // 确保默认配置存在
await ProxySettings.setDefaultConfigs(); await ProxySettings.setDefaultConfigs();
// 清除之前的代理设置 // 清除之前的代理设置
await handleClearProxyConfig(() => {}); await handleClearProxyConfig(() => {
});
// 设置认证监听 // 设置认证监听
await ProxyAuth.setupAuthListener(); await ProxyAuth.setupAuthListener();
} catch (error) { } catch (error) {
public/proxy/options.js
+2 -4
View File
@@ -163,7 +163,5 @@ function showError(message) {
// 5秒后自动移除错误信息 // 5秒后自动移除错误信息
setTimeout(() => { setTimeout(() => {
errorDiv.remove(); errorDiv.remove();
}, 5000); }, 3000);
} }
// ... 其他代码保持不变
public/proxy/proxy-logs.js
+1 -33
View File
@@ -2,33 +2,6 @@ import { proxyStore } from '../db/proxy-store.js';
// 日志数据库管理 // 日志数据库管理
class ProxyLogs { 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) { async getResourceType(details) {
try { try {
// 首先检查请求类型 // 首先检查请求类型
@@ -174,9 +147,4 @@ class ProxyLogs {
} }
} }
// 导出实例而不是直接使用顶层 await export const proxyLogs = new ProxyLogs();
export const proxyLogs = new ProxyLogs();
// 移除这些顶层 await 语句
// await proxyStore.addLog({...});
// const logs = await proxyStore.getLogs();
src/index.jsx
-7
View File
@@ -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
+17
View File
@@ -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
+9 -9
View File
@@ -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 type { ColumnsType } from 'antd/es/table';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons'; import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { ProxyConfig } from '@/types/proxy'; import { ProxyConfig } from '@/types/proxy';
@@ -143,16 +143,16 @@ export const ProxySettings: React.FC<ProxySettingsProps> = ({
} }
]; ];
const buttonRef = useRef(null);
return ( return (
<div> <div>
<Space style={{ marginBottom: 16, justifyContent: 'flex-end', width: '100%' }}> <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> </Space>
<Table <Table
dataSource={proxyConfigs} dataSource={proxyConfigs}
src/pages/options.tsx
+3 -2
View File
@@ -2,11 +2,12 @@ import React from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import { App } from 'antd'; import { App } from 'antd';
import { OptionsPage } from './OptionsPage'; import { OptionsPage } from './OptionsPage';
import zhCN from 'antd/locale/zh_CN';
import '@/styles/global.css'; import '@/styles/global.css';
const container = document.getElementById('root'); 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( root.render(
<App> <App>
tsconfig.json
+4 -2
View File
@@ -19,10 +19,12 @@
"typeRoots": [ "typeRoots": [
"./node_modules/@types", "./node_modules/@types",
"./src/types" "./src/types"
] ],
"skipLibCheck": true,
"lib": ["dom", "dom.iterable", "esnext"]
}, },
"include": [ "include": [
"./src/**/*", "./src/**/*"
], ],
"exclude": [ "exclude": [
"node_modules" "node_modules"
webpack.config.js
+11 -4
View File
@@ -7,7 +7,7 @@ const webpack = require('webpack');
module.exports = { module.exports = {
mode: 'development', // 设置模式为开发模式 mode: 'development', // 设置模式为开发模式
entry: { entry: {
main: './src/index.jsx', main: './src/index.tsx',
options: './src/pages/options.tsx' options: './src/pages/options.tsx'
}, },
output: { output: {
@@ -52,9 +52,16 @@ module.exports = {
use: ['style-loader', 'css-loader'] 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文件 test: /\.(js|jsx)$/, // 匹配JS和JSX文件