+
+ );
+};
+
+export default App;
+```
+
+### 选项页面
+
+```html
+
+
+
+
+
+
+ 代理切换器
+
+
+ );
+};
+
+export default App;
+```
+
+### 内容脚本
+
+```typescript
+// entrypoints/content.ts
+import { defineContentScript } from 'wxt/content-script';
+
+export default defineContentScript({
+ matches: ['代理管理器设置
+ +
+ {proxies.map(proxy => (
+
+
+
+ {proxy.name} ({proxy.protocol}://{proxy.host}:{proxy.port})
+
+
+ ))}
+
+
+ 添加新代理
+ setNewProxy({...newProxy, name: e.target.value})} + /> + + setNewProxy({...newProxy, host: e.target.value})} + /> + setNewProxy({...newProxy, port: e.target.value})} + /> + +
+ {proxies.map(proxy => (
+
+ );
+ };
+
+ export default ProxySelector;
+ ```
+
+3. **类型安全**: 为所有对象定义TypeScript接口。
+
+ ```typescript
+ // types/index.ts
+ export interface Proxy {
+ id: string;
+ name: string;
+ protocol: 'http' | 'https' | 'socks4' | 'socks5';
+ host: string;
+ port: string;
+ username?: string;
+ password?: string;
+ }
+
+ export interface ProxyRule {
+ id: string;
+ name: string;
+ pattern: string;
+ proxyId: string;
+ }
+ ```
+
+4. **使用环境变量**: 为不同环境配置不同的设置。
+
+ ```typescript
+ // wxt.config.ts
+ import { defineConfig } from 'wxt';
+
+ export default defineConfig({
+ manifest: {
+ name: process.env.NODE_ENV === 'development' ? '[DEV] 代理切换器' : '代理切换器',
+ version: '1.0.0',
+ description: '一个强大的浏览器代理管理扩展',
+ },
+ // 其他配置...
+ });
+ ```
+
+5. **消息通信**: 使用结构化消息系统。
+
+ ```typescript
+ // utils/messaging.ts
+ export type MessageType =
+ | { type: 'SWITCH_PROXY'; proxyId: string }
+ | { type: 'GET_CURRENT_PROXY' }
+ | { type: 'PROXY_CHANGED'; proxyId: string };
+
+ export function sendMessage onChange(proxy.id)}
+ >
+ {proxy.name}
+
+ ))}
+
+
+ );
+};
\ No newline at end of file
diff --git a/src/entrypoints/background.ts b/src/entrypoints/background.ts
new file mode 100644
index 0000000..d615d78
--- /dev/null
+++ b/src/entrypoints/background.ts
@@ -0,0 +1,36 @@
+import { browser, type Browser } from 'wxt/browser';
+import {ContentActionType, ProxyActionType} from '@/types/action';
+import { getCurrentProxyMode, switchProxyMode } from '@/utils/proxy';
+
+export default defineBackground({
+ type: 'module',
+
+ main() {
+ // 初始化代理状态监听
+ browser.runtime.onMessage.addListener((message: any, sender: Browser.runtime.MessageSender, sendResponse: (response?: any) => void) => {
+ if (message.action === ProxyActionType.GET_PROXY_STATUS) {
+ // 获取当前代理状态
+ getCurrentProxyMode().then(mode => {
+ sendResponse({ success: true, data: { mode } });
+ });
+ return true;
+ } else if (message.action === ProxyActionType.SWITCH_PROXY) {
+ // 切换代理
+ switchProxyMode(message.mode).then(success => {
+ sendResponse({ success });
+
+ // 如果切换成功，广播代理状态更改消息
+ if (success) {
+ browser.runtime.sendMessage({
+ action: ContentActionType.PROXY_CONFIGS_UPDATED,
+ source: 'background'
+ });
+ }
+ });
+ return true;
+ }
+ });
+
+ console.log('代理管理后台服务已启动');
+ },
+});
diff --git a/src/entrypoints/content.ts b/src/entrypoints/content.ts
new file mode 100644
index 0000000..264a528
--- /dev/null
+++ b/src/entrypoints/content.ts
@@ -0,0 +1,6 @@
+export default defineContentScript({
+ matches: ['*://*.google.com/*'],
+ main() {
+ console.log('Hello content.');
+ },
+});
diff --git a/src/entrypoints/options/App.css b/src/entrypoints/options/App.css
new file mode 100644
index 0000000..35a92f9
--- /dev/null
+++ b/src/entrypoints/options/App.css
@@ -0,0 +1,39 @@
+.options-layout {
+ min-height: 100vh;
+}
+
+.options-header {
+ background-color: #F28B44;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 24px;
+}
+
+.options-content {
+ padding: 24px;
+ max-width: 800px;
+ margin: 0 auto;
+ background-color: #f5f5f5;
+}
+
+.proxy-list-card {
+ margin-bottom: 24px;
+}
+
+.proxy-list-card .ant-list-item {
+ padding: 12px 24px;
+ transition: all 0.3s;
+}
+
+.proxy-list-card .ant-list-item:hover {
+ background-color: rgba(242, 139, 68, 0.05);
+}
+
+.add-proxy-card {
+ margin-bottom: 24px;
+}
+
+.ant-space {
+ width: 100%;
+}
\ No newline at end of file
diff --git a/src/entrypoints/options/App.tsx b/src/entrypoints/options/App.tsx
new file mode 100644
index 0000000..508df8b
--- /dev/null
+++ b/src/entrypoints/options/App.tsx
@@ -0,0 +1,242 @@
+import React, { useState, useEffect } from 'react';
+import { ConfigProvider, Layout, Typography, List, Button, Form, Input, Select, Space, Card, Divider } from 'antd';
+import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
+import { v4 as uuidv4 } from 'uuid';
+import { browser } from 'wxt/browser';
+import type { ProxyConfig } from '../../types/proxy';
+import { getAllProxyConfigs, saveProxyConfig, deleteProxyConfig, enableProxyConfig } from '../../utils/storage';
+import {ContentActionType, ProxyActionType} from '../../types/action';
+import './App.css';
+
+const { Header, Content } = Layout;
+const { Title } = Typography;
+const { Option } = Select;
+
+export default function App() {
+ const [proxies, setProxies] = useState- (
+
+
+
+
+
+
+ Yaklang 代理管理
+
+
+ );
+};
+
+export default App;
\ No newline at end of file
diff --git a/src/entrypoints/proxy.content/index.tsx b/src/entrypoints/proxy.content/index.tsx
new file mode 100644
index 0000000..8baeec1
--- /dev/null
+++ b/src/entrypoints/proxy.content/index.tsx
@@ -0,0 +1,39 @@
+import './App.css';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+
+export default defineContentScript({
+ matches: [' !isDragging && setExpanded(!expanded)}
+ >
+
+
+ {expanded && (
+
+ 
+
+
+ {proxyIcon}
+ {proxyName}
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+ handleProxySwitch({
+ id: 'direct',
+ name: '[直接连接]',
+ proxyType: 'direct',
+ enabled: false
+ })}
+ title="直接连接"
+ >
+ 🟢
+ 直接连接
+ {proxyStatus.currentMode === 'direct' && }
+
+
+ handleProxySwitch({
+ id: 'system',
+ name: '[系统代理]',
+ proxyType: 'system',
+ enabled: true
+ })}
+ title="系统代理"
+ >
+ ⚙️
+ 系统代理
+ {proxyStatus.currentMode === 'system' && }
+
+
+
+
+ {proxyConfigs.map(config => {
+ if (config.proxyType !== 'direct' && config.proxyType !== 'system') {
+ const isActive = proxyStatus.currentMode === 'fixed_servers' && config.enabled;
+ const proxyIcon = config.proxyType === 'pac_script' ? '📜' : '🌐';
+ const tooltipText = config.proxyType === 'pac_script'
+ ? 'PAC Script'
+ : `${config.scheme ? `${config.scheme.toUpperCase()} ` : ''}${config.host}:${config.port}`;
+
+ return (
+ handleProxySwitch({...config, enabled: true})}
+ title={tooltipText}
+ >
+ {proxyIcon}
+ {config.name || '未命名代理'}
+ {isActive && }
+
+ );
+ }
+ return null;
+ })}
+
+
+
+ openOptionsPage(true)}>
+ ➕
+ 添加代理
+
+
+ openOptionsPage(false)}>
+ ⚙️
+ 设置
+
+
+ {/* Links panel content will be added in the future */}
+
+
+
+ 链接面板功能将在未来版本中实现
+