├── .gitignore ├── screenshot.png ├── Readme.md ├── manifest.json ├── popup ├── popup.html ├── popup.js └── popup.css ├── _locales ├── zh_CN │ └── messages.json └── en │ └── messages.json ├── options ├── options.html ├── options.css └── options.js └── background.js /.gitignore: -------------------------------------------------------------------------------- 1 | icons/* -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kxcode/Chrome-Extension-KProxy/HEAD/screenshot.png -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # KProxy: Chrome Proxy Manager 2 | 3 | Simple Easy Stylish Proxy Manager for Chrome 4 | 5 | * Effortlessly manage and switch between HTTP, HTTPS, and SOCKS5 proxies. 6 | * Automatically switch proxies based on website (URL/hostname matching). 7 | * Import AutoProxy rule lists. 8 | 9 | # Screenshot 10 | 11 | ![使用界面](screenshot.png) -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "name": "KProxy", 4 | "version": "1.0.0", 5 | "description": "Simple Easy Stylish Proxy Manager for Chrome", 6 | "author": "KINGX", 7 | "action": { 8 | "default_popup": "popup/popup.html" 9 | }, 10 | "options_page": "options/options.html", 11 | "background": { 12 | "service_worker": "background.js" 13 | }, 14 | "permissions": [ 15 | "proxy", 16 | "storage", 17 | "notifications", 18 | "webRequest", 19 | "webRequestAuthProvider", 20 | "declarativeNetRequest", 21 | "declarativeNetRequestWithHostAccess" 22 | ], 23 | "host_permissions": [ 24 | "" 25 | ], 26 | "default_locale": "zh_CN" 27 | } -------------------------------------------------------------------------------- /popup/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | KProxy 6 | 7 | 8 | 9 | 10 |

11 |

切换代理

12 | 13 |

14 |

加载中...

15 |

16 | 17 |

18 | 19 |

20 | 21 | 24 |

25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /_locales/zh_CN/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "KProxy", 4 | "description": "扩展名称" 5 | }, 6 | "appDesc": { 7 | "message": "一个简洁优雅的 Chrome 代理管理工具", 8 | "description": "扩展描述" 9 | }, 10 | "directConnection": { 11 | "message": "直接连接", 12 | "description": "直接连接选项" 13 | }, 14 | "addProxy": { 15 | "message": "添加代理", 16 | "description": "添加代理按钮" 17 | }, 18 | "editProxy": { 19 | "message": "编辑代理", 20 | "description": "编辑代理标题" 21 | }, 22 | "proxyName": { 23 | "message": "名称", 24 | "description": "代理名称标签" 25 | }, 26 | "proxyType": { 27 | "message": "代理类型", 28 | "description": "代理类型标签" 29 | }, 30 | "proxyHost": { 31 | "message": "服务器地址", 32 | "description": "服务器地址标签" 33 | }, 34 | "proxyPort": { 35 | "message": "端口", 36 | "description": "端口标签" 37 | }, 38 | "proxyAuth": { 39 | "message": "需要认证", 40 | "description": "认证复选框标签" 41 | }, 42 | "authType": { 43 | "message": "认证类型", 44 | "description": "认证类型标签" 45 | }, 46 | "username": { 47 | "message": "用户名", 48 | "description": "用户名标签" 49 | }, 50 | "password": { 51 | "message": "密码", 52 | "description": "密码标签" 53 | }, 54 | "save": { 55 | "message": "保存", 56 | "description": "保存按钮" 57 | }, 58 | "cancel": { 59 | "message": "取消", 60 | "description": "取消按钮" 61 | }, 62 | "delete": { 63 | "message": "删除", 64 | "description": "删除按钮" 65 | }, 66 | "import": { 67 | "message": "导入", 68 | "description": "导入按钮" 69 | }, 70 | "export": { 71 | "message": "导出", 72 | "description": "导出按钮" 73 | }, 74 | "options": { 75 | "message": "选项", 76 | "description": "选项按钮" 77 | } 78 | } -------------------------------------------------------------------------------- /_locales/en/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "appName": { 3 | "message": "KProxy", 4 | "description": "Extension name" 5 | }, 6 | "appDesc": { 7 | "message": "A clean and elegant Chrome proxy manager", 8 | "description": "Extension description" 9 | }, 10 | "directConnection": { 11 | "message": "Direct Connection", 12 | "description": "Direct connection option" 13 | }, 14 | "addProxy": { 15 | "message": "Add Proxy", 16 | "description": "Add proxy button" 17 | }, 18 | "editProxy": { 19 | "message": "Edit Proxy", 20 | "description": "Edit proxy title" 21 | }, 22 | "proxyName": { 23 | "message": "Name", 24 | "description": "Proxy name label" 25 | }, 26 | "proxyType": { 27 | "message": "Proxy Type", 28 | "description": "Proxy type label" 29 | }, 30 | "proxyHost": { 31 | "message": "Server Address", 32 | "description": "Server address label" 33 | }, 34 | "proxyPort": { 35 | "message": "Port", 36 | "description": "Port label" 37 | }, 38 | "proxyAuth": { 39 | "message": "Authentication Required", 40 | "description": "Authentication checkbox label" 41 | }, 42 | "authType": { 43 | "message": "Authentication Type", 44 | "description": "Authentication type label" 45 | }, 46 | "username": { 47 | "message": "Username", 48 | "description": "Username label" 49 | }, 50 | "password": { 51 | "message": "Password", 52 | "description": "Password label" 53 | }, 54 | "save": { 55 | "message": "Save", 56 | "description": "Save button" 57 | }, 58 | "cancel": { 59 | "message": "Cancel", 60 | "description": "Cancel button" 61 | }, 62 | "delete": { 63 | "message": "Delete", 64 | "description": "Delete button" 65 | }, 66 | "import": { 67 | "message": "Import", 68 | "description": "Import button" 69 | }, 70 | "export": { 71 | "message": "Export", 72 | "description": "Export button" 73 | }, 74 | "options": { 75 | "message": "Options", 76 | "description": "Options button" 77 | } 78 | } -------------------------------------------------------------------------------- /popup/popup.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', function() { 2 | // 获取代理配置列表 3 | loadProxyList(); 4 | 5 | // 绑定管理代理按钮事件 6 | document.getElementById('manageProxiesBtn').addEventListener('click', function() { 7 | chrome.runtime.openOptionsPage(); 8 | }); 9 | 10 | }); 11 | 12 | // 加载代理配置 13 | function loadProxyList() { 14 | chrome.runtime.sendMessage({ action: 'getProxyConfigs' }, function(response) { 15 | const proxyConfigs = response.proxyConfigs; 16 | const activeProxy = response.activeProxy; 17 | 18 | const proxyListElement = document.querySelector('.proxy-list'); 19 | if (!proxyListElement) { 20 | console.error('找不到代理列表元素'); 21 | return; 22 | } 23 | 24 | proxyListElement.innerHTML = ''; 25 | 26 | // 添加直接连接选项 27 | if (proxyConfigs.direct) { 28 | addProxyItemToList(proxyConfigs.direct, 'direct', activeProxy === 'direct', proxyListElement); 29 | } 30 | 31 | // 添加自动切换规则 32 | for (const proxyId in proxyConfigs) { 33 | if (proxyId !== 'direct' && proxyConfigs[proxyId].type === 'auto') { 34 | const config = proxyConfigs[proxyId]; 35 | addAutoProxyItemToList(config, proxyId, activeProxy === proxyId, proxyListElement); 36 | } 37 | } 38 | 39 | // 添加其他代理配置 40 | for (const proxyId in proxyConfigs) { 41 | if (proxyId !== 'direct' && proxyConfigs[proxyId].type !== 'auto') { 42 | const config = proxyConfigs[proxyId]; 43 | addProxyItemToList(config, proxyId, activeProxy === proxyId, proxyListElement); 44 | } 45 | } 46 | }); 47 | } 48 | 49 | // 添加代理项到列表 50 | function addProxyItemToList(config, proxyId, isActive, listElement) { 51 | const proxyItem = document.createElement('div'); 52 | proxyItem.className = `proxy-item ${isActive ? 'active' : ''}`; 53 | proxyItem.dataset.proxyId = proxyId; 54 | 55 | let iconHtml = ''; 56 | let infoHtml = ''; 57 | 58 | if (config.type === 'direct') { 59 | iconHtml = '🔗'; 60 | infoHtml = '直接连接到互联网'; 61 | } else { 62 | iconHtml = getProxyTypeIcon(config.type); 63 | infoHtml = `${config.type.toUpperCase()} - ${config.host}:${config.port}`; 64 | if (config.auth) { 65 | infoHtml += ' (需要认证)'; 66 | } 67 | } 68 | 69 | proxyItem.innerHTML = ` 70 |

${iconHtml}

71 |

72 |

${config.name}

73 |

${infoHtml}

74 |

75 | `; 76 | 77 | // 点击切换代理 78 | proxyItem.addEventListener('click', function() { 79 | setActiveProxy(proxyId); 80 | }); 81 | 82 | listElement.appendChild(proxyItem); 83 | } 84 | 85 | // 添加自动代理项到列表 86 | function addAutoProxyItemToList(config, proxyId, isActive, listElement) { 87 | const proxyItem = document.createElement('div'); 88 | proxyItem.className = `proxy-item ${isActive ? 'active' : ''}`; 89 | proxyItem.dataset.proxyId = proxyId; 90 | 91 | proxyItem.innerHTML = ` 92 |

🔌

93 |

94 |

${config.name}

95 |

自动切换规则

96 |

97 | `; 98 | 99 | // 点击切换代理 100 | proxyItem.addEventListener('click', function() { 101 | setActiveProxy(proxyId); 102 | }); 103 | 104 | listElement.appendChild(proxyItem); 105 | } 106 | 107 | // 获取代理类型图标 108 | function getProxyTypeIcon(type) { 109 | switch (type) { 110 | case 'http': 111 | return '🌐'; 112 | case 'https': 113 | return '🔒'; 114 | case 'socks5': 115 | return '🧦'; 116 | default: 117 | return '🌐'; 118 | } 119 | } 120 | 121 | // 设置活动代理 122 | function setActiveProxy(proxyId) { 123 | chrome.runtime.sendMessage({ 124 | action: 'setActiveProxy', 125 | proxyId: proxyId 126 | }, function(response) { 127 | if (response.success) { 128 | // 刷新列表以更新活动状态 129 | loadProxyList(); 130 | } 131 | }); 132 | } -------------------------------------------------------------------------------- /popup/popup.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | width: 320px; 6 | background-color: #fafafa; 7 | color: #424242; 8 | } 9 | 10 | .container { 11 | padding: 16px; 12 | } 13 | 14 | h1 { 15 | font-size: 18px; 16 | font-weight: 500; 17 | margin: 0 0 16px 0; 18 | color: #6b7cff; 19 | padding-bottom: 12px; 20 | border-bottom: 1px solid #e0e0e0; 21 | display: flex; 22 | align-items: center; 23 | letter-spacing: 0.5px; 24 | } 25 | 26 | h1::before { 27 | content: ''; 28 | display: inline-block; 29 | width: 20px; 30 | height: 20px; 31 | background-color: #6b7cff; 32 | border-radius: 50%; 33 | margin-right: 8px; 34 | background-image: url('data:image/svg+xml;utf8,'); 35 | background-repeat: no-repeat; 36 | background-position: center; 37 | } 38 | 39 | .proxy-list { 40 | margin-bottom: 16px; 41 | } 42 | 43 | .proxy-item { 44 | display: flex; 45 | align-items: center; 46 | padding: 12px; 47 | margin-bottom: 8px; 48 | background-color: white; 49 | border-radius: 12px; 50 | border: 1px solid #f0f0f0; 51 | cursor: pointer; 52 | transition: background-color 0.2s ease; 53 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); 54 | } 55 | 56 | .proxy-item:hover { 57 | background-color: #f8f9ff; 58 | border-color: #d4daff; 59 | } 60 | 61 | .proxy-item.active { 62 | background-color: #f0f4ff; 63 | border-color: #d4daff; 64 | box-shadow: 0 2px 4px rgba(107, 124, 255, 0.1); 65 | } 66 | 67 | .proxy-item-icon { 68 | margin-right: 12px; 69 | width: 36px; 70 | height: 36px; 71 | display: flex; 72 | align-items: center; 73 | justify-content: center; 74 | background-color: #f5f7ff; 75 | border-radius: 50%; 76 | font-size: 16px; 77 | } 78 | 79 | .proxy-item.active .proxy-item-icon { 80 | background-color: #e0e6ff; 81 | } 82 | 83 | .proxy-item-details { 84 | flex-grow: 1; 85 | } 86 | 87 | .proxy-name { 88 | font-weight: 500; 89 | margin-bottom: 4px; 90 | color: #424242; 91 | } 92 | 93 | .proxy-info { 94 | font-size: 12px; 95 | color: #757575; 96 | } 97 | 98 | .actions { 99 | display: flex; 100 | justify-content: center; 101 | margin-top: 16px; 102 | } 103 | 104 | .manage-btn { 105 | background-color: #6b7cff; 106 | color: white; 107 | border: none; 108 | padding: 10px 16px; 109 | border-radius: 8px; 110 | cursor: pointer; 111 | font-size: 14px; 112 | font-weight: 500; 113 | transition: all 0.2s ease; 114 | box-shadow: 0 2px 4px rgba(107, 124, 255, 0.2); 115 | width: 100%; 116 | justify-content: center; 117 | display: flex; 118 | align-items: center; 119 | letter-spacing: 0.5px; 120 | } 121 | 122 | .manage-btn:hover { 123 | background-color: #5a6bff; 124 | box-shadow: 0 4px 8px rgba(107, 124, 255, 0.3); 125 | } 126 | 127 | .manage-btn:active { 128 | transform: translateY(1px); 129 | box-shadow: 0 2px 4px rgba(107, 124, 255, 0.2); 130 | } 131 | 132 | .manage-btn::before { 133 | content: ''; 134 | display: inline-block; 135 | width: 16px; 136 | height: 16px; 137 | margin-right: 8px; 138 | background-image: url('data:image/svg+xml;utf8,'); 139 | background-repeat: no-repeat; 140 | background-position: center; 141 | } 142 | 143 | .loading { 144 | text-align: center; 145 | padding: 24px; 146 | color: #757575; 147 | font-size: 14px; 148 | } 149 | 150 | .loading::after { 151 | content: ''; 152 | display: block; 153 | width: 24px; 154 | height: 24px; 155 | margin: 12px auto 0; 156 | border-radius: 50%; 157 | border: 2px solid #6b7cff; 158 | border-top-color: transparent; 159 | animation: spin 1s linear infinite; 160 | } 161 | 162 | @keyframes spin { 163 | 0% { transform: rotate(0deg); } 164 | 100% { transform: rotate(360deg); } 165 | } 166 | 167 | .no-proxies { 168 | text-align: center; 169 | padding: 20px; 170 | color: #757575; 171 | background-color: white; 172 | border-radius: 12px; 173 | border: 1px dashed #e0e0e0; 174 | margin-bottom: 16px; 175 | } 176 | 177 | .no-proxies p { 178 | margin-bottom: 16px; 179 | } 180 | 181 | .add-btn { 182 | background-color: #6bbd6e; 183 | color: white; 184 | border: none; 185 | padding: 8px 16px; 186 | border-radius: 8px; 187 | cursor: pointer; 188 | font-size: 14px; 189 | font-weight: 500; 190 | transition: all 0.2s ease; 191 | box-shadow: 0 2px 4px rgba(107, 189, 110, 0.2); 192 | } 193 | 194 | .add-btn:hover { 195 | background-color: #5aac5d; 196 | box-shadow: 0 4px 8px rgba(107, 189, 110, 0.3); 197 | } 198 | 199 | .footer { 200 | text-align: center; 201 | margin-top: 16px; 202 | font-size: 11px; 203 | color: #9e9e9e; 204 | } 205 | 206 | .footer a { 207 | color: #6b7cff; 208 | text-decoration: none; 209 | } 210 | 211 | .footer a:hover { 212 | text-decoration: underline; 213 | } 214 | 215 | /* 自动代理图标样式 */ 216 | .proxy-icon.auto { 217 | background-color: #e6e0ff; 218 | } 219 | 220 | .proxy-item.active .proxy-icon.auto { 221 | background-color: #d4c6ff; 222 | } -------------------------------------------------------------------------------- /options/options.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | KProxy - 选项 6 | 7 | 8 | 9 | 10 |

11 |

12 |

KProxy

13 |

14 | 15 | 16 |

17 |

18 | 19 |

20 | 27 | 28 |

29 | 62 | 63 | 132 | 133 |

134 |

135 |

欢迎使用 KProxy

136 |

请从左侧选择一个代理配置进行编辑，或者添加一个新的代理配置。

137 |
138 |

使用过程中有任何问题或建议，请前往 GitHub 反馈

139 |

140 |

141 |

142 |

143 | 144 | 147 |

148 | 149 | 160 | 161 | 195 | 196 |

197 | 198 | 199 | 200 | -------------------------------------------------------------------------------- /options/options.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; 3 | margin: 0; 4 | padding: 0; 5 | background-color: #efefef; 6 | color: #424242; 7 | line-height: 1.5; 8 | } 9 | 10 | .container { 11 | max-width: 1200px; 12 | margin: 0 auto; 13 | padding: 24px; 14 | } 15 | 16 | header { 17 | display: flex; 18 | justify-content: space-between; 19 | align-items: center; 20 | margin-bottom: 24px; 21 | padding-bottom: 16px; 22 | border-bottom: 1px solid #e0e0e0; 23 | } 24 | 25 | h1 { 26 | font-size: 24px; 27 | font-weight: 500; 28 | margin: 0; 29 | color: #6b7cff; 30 | display: flex; 31 | align-items: center; 32 | letter-spacing: 0.5px; 33 | } 34 | 35 | h1::before { 36 | content: ''; 37 | display: inline-block; 38 | width: 28px; 39 | height: 28px; 40 | background-color: #6b7cff; 41 | border-radius: 50%; 42 | margin-right: 12px; 43 | background-image: url('data:image/svg+xml;utf8,'); 44 | background-repeat: no-repeat; 45 | background-position: center; 46 | } 47 | 48 | .actions { 49 | display: flex; 50 | gap: 12px; 51 | } 52 | 53 | button { 54 | background-color: #6b7cff; 55 | color: white; 56 | border: none; 57 | padding: 8px 16px; 58 | border-radius: 8px; 59 | cursor: pointer; 60 | font-size: 14px; 61 | font-weight: 500; 62 | transition: all 0.2s ease; 63 | box-shadow: 0 2px 4px rgba(107, 124, 255, 0.2); 64 | display: flex; 65 | align-items: center; 66 | letter-spacing: 0.5px; 67 | } 68 | 69 | button:hover { 70 | background-color: #5a6bff; 71 | box-shadow: 0 4px 8px rgba(107, 124, 255, 0.3); 72 | } 73 | 74 | button:active { 75 | transform: translateY(1px); 76 | box-shadow: 0 2px 4px rgba(107, 124, 255, 0.2); 77 | } 78 | 79 | .main-content { 80 | display: flex; 81 | gap: 24px; 82 | } 83 | 84 | .sidebar { 85 | width: 300px; 86 | background-color: white; 87 | border-radius: 12px; 88 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); 89 | padding: 16px; 90 | height: fit-content; 91 | } 92 | 93 | .content { 94 | flex-grow: 1; 95 | background-color: white; 96 | border-radius: 12px; 97 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); 98 | padding: 24px; 99 | } 100 | 101 | .proxy-list { 102 | margin-bottom: 16px; 103 | } 104 | 105 | .proxy-item { 106 | display: flex; 107 | align-items: center; 108 | padding: 12px; 109 | margin-bottom: 8px; 110 | background-color: white; 111 | border-radius: 8px; 112 | border: 1px solid #f0f0f0; 113 | cursor: pointer; 114 | transition: all 0.2s ease; 115 | } 116 | 117 | .proxy-item:hover { 118 | background-color: #f8f9ff; 119 | border-color: #d4daff; 120 | } 121 | 122 | .proxy-item.active { 123 | background-color: #f0f4ff; 124 | border-color: #d4daff; 125 | box-shadow: 0 1px 3px rgba(107, 124, 255, 0.2); 126 | } 127 | 128 | .proxy-item-icon { 129 | margin-right: 12px; 130 | width: 32px; 131 | height: 32px; 132 | display: flex; 133 | align-items: center; 134 | justify-content: center; 135 | background-color: #f5f7ff; 136 | border-radius: 50%; 137 | font-size: 16px; 138 | } 139 | 140 | .proxy-item.active .proxy-item-icon { 141 | background-color: #e0e6ff; 142 | } 143 | 144 | .proxy-item-details { 145 | flex-grow: 1; 146 | } 147 | 148 | .proxy-name { 149 | font-weight: 500; 150 | margin-bottom: 4px; 151 | color: #424242; 152 | } 153 | 154 | .proxy-info { 155 | font-size: 12px; 156 | color: #757575; 157 | } 158 | 159 | .add-btn { 160 | background-color: #6bbd6e; 161 | width: 100%; 162 | justify-content: center; 163 | } 164 | 165 | .add-btn:hover { 166 | background-color: #5aac5d; 167 | } 168 | 169 | .proxy-form { 170 | width: 100%; 171 | } 172 | 173 | h2 { 174 | font-size: 20px; 175 | font-weight: 500; 176 | margin-top: 0; 177 | margin-bottom: 24px; 178 | color: #424242; 179 | padding-bottom: 12px; 180 | border-bottom: 1px solid #f0f0f0; 181 | } 182 | 183 | /* 更新表单样式，使其更加整齐统一 */ 184 | .form-group { 185 | margin-bottom: 20px; 186 | display: flex; 187 | flex-direction: column; 188 | } 189 | 190 | label { 191 | font-weight: 500; 192 | margin-bottom: 8px; 193 | color: #424242; 194 | font-size: 14px; 195 | } 196 | 197 | input[type="text"], 198 | input[type="number"], 199 | input[type="password"], 200 | select { 201 | padding: 10px 12px; 202 | border: 1px solid #e0e0e0; 203 | border-radius: 8px; 204 | font-size: 14px; 205 | width: 100%; 206 | box-sizing: border-box; 207 | transition: all 0.2s ease; 208 | background-color: #f9f9f9; 209 | } 210 | 211 | input[type="text"]:focus, 212 | input[type="number"]:focus, 213 | input[type="password"]:focus, 214 | select:focus { 215 | outline: none; 216 | border-color: #6b7cff; 217 | box-shadow: 0 0 0 2px rgba(107, 124, 255, 0.1); 218 | background-color: white; 219 | } 220 | 221 | /* 表单操作按钮区域 */ 222 | .form-actions { 223 | display: flex; 224 | gap: 12px; 225 | margin-top: 24px; 226 | margin-bottom: 24px; 227 | justify-content: flex-start; 228 | } 229 | 230 | /* 删除按钮样式 */ 231 | .delete-btn { 232 | background-color: #ff6b6b; 233 | margin-left: auto; 234 | } 235 | 236 | .delete-btn:hover { 237 | background-color: #ff5252; 238 | } 239 | 240 | .welcome-message { 241 | display: flex; 242 | align-items: center; 243 | justify-content: center; 244 | height: 100%; 245 | min-height: 400px; 246 | text-align: center; 247 | padding: 0; 248 | } 249 | 250 | .welcome-content { 251 | padding: 40px 20px; 252 | } 253 | 254 | .welcome-message h2 { 255 | border-bottom: none; 256 | margin-bottom: 16px; 257 | } 258 | 259 | .welcome-message p { 260 | color: #757575; 261 | font-size: 16px; 262 | max-width: 500px; 263 | margin: 0 auto; 264 | } 265 | 266 | .loading { 267 | text-align: center; 268 | padding: 24px; 269 | color: #757575; 270 | font-size: 14px; 271 | } 272 | 273 | .loading::after { 274 | content: ''; 275 | display: block; 276 | width: 24px; 277 | height: 24px; 278 | margin: 12px auto 0; 279 | border-radius: 50%; 280 | border: 2px solid #6b7cff; 281 | border-top-color: transparent; 282 | animation: spin 1s linear infinite; 283 | } 284 | 285 | @keyframes spin { 286 | 0% { transform: rotate(0deg); } 287 | 100% { transform: rotate(360deg); } 288 | } 289 | 290 | .modal { 291 | position: fixed; 292 | top: 0; 293 | left: 0; 294 | width: 100%; 295 | height: 100%; 296 | background-color: rgba(0, 0, 0, 0.5); 297 | display: flex; 298 | align-items: center; 299 | justify-content: center; 300 | z-index: 1000; 301 | backdrop-filter: blur(3px); 302 | } 303 | 304 | .modal-content { 305 | background-color: white; 306 | padding: 24px; 307 | border-radius: 12px; 308 | width: 500px; 309 | max-width: 90%; 310 | box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 311 | box-sizing: border-box; 312 | } 313 | 314 | .modal h2 { 315 | margin-top: 0; 316 | color: #6b7cff; 317 | border-bottom: none; 318 | } 319 | 320 | textarea { 321 | width: 100%; 322 | padding: 12px; 323 | border: 1px solid #e0e0e0; 324 | border-radius: 8px; 325 | font-size: 14px; 326 | font-family: monospace; 327 | background-color: #f9f9f9; 328 | min-height: 150px; 329 | resize: vertical; 330 | box-sizing: border-box; 331 | } 332 | 333 | textarea:focus { 334 | outline: none; 335 | border-color: #6b7cff; 336 | box-shadow: 0 0 0 2px rgba(107, 124, 255, 0.1); 337 | background-color: white; 338 | } 339 | 340 | .modal-actions { 341 | display: flex; 342 | justify-content: flex-end; 343 | gap: 12px; 344 | margin-top: 20px; 345 | } 346 | 347 | .modal.hidden { 348 | display: none !important; 349 | } 350 | 351 | #importBtn::before { 352 | content: '↓'; 353 | margin-right: 8px; 354 | } 355 | 356 | #exportBtn::before { 357 | content: '↑'; 358 | margin-right: 8px; 359 | } 360 | 361 | .footer { 362 | text-align: center; 363 | margin-top: 24px; 364 | padding-top: 16px; 365 | border-top: 1px solid #f0f0f0; 366 | color: #9e9e9e; 367 | font-size: 12px; 368 | } 369 | 370 | .footer a { 371 | color: #6b7cff; 372 | text-decoration: none; 373 | } 374 | 375 | .footer a:hover { 376 | text-decoration: underline; 377 | } 378 | 379 | /* 响应式设计 */ 380 | @media (max-width: 768px) { 381 | .main-content { 382 | flex-direction: column; 383 | } 384 | 385 | .sidebar { 386 | width: 100%; 387 | } 388 | } 389 | 390 | /* 直接连接信息样式 */ 391 | .direct-connection-info { 392 | background-color: #f0f4ff; 393 | border-radius: 8px; 394 | padding: 16px; 395 | margin: 20px 0; 396 | border: 1px solid #d4daff; 397 | } 398 | 399 | .direct-connection-info p { 400 | margin: 0 0 12px 0; 401 | color: #5f6368; 402 | font-size: 14px; 403 | line-height: 1.5; 404 | } 405 | 406 | .direct-connection-info p:last-child { 407 | margin-bottom: 0; 408 | } 409 | 410 | /* 隐藏类 */ 411 | .hidden { 412 | display: none !important; 413 | } 414 | 415 | /* AutoProxy 相关样式 */ 416 | .auto-proxy-btn { 417 | background-color: #7c6bff; 418 | margin-top: 12px; 419 | } 420 | 421 | .auto-proxy-btn:hover { 422 | background-color: #6b5aff; 423 | } 424 | 425 | .rule-list-container { 426 | border: 1px solid #e0e0e0; 427 | border-radius: 8px; 428 | background-color: #f9f9f9; 429 | max-height: 300px; 430 | overflow-y: auto; 431 | } 432 | 433 | .rule-list { 434 | padding: 8px; 435 | } 436 | 437 | .rule-item { 438 | display: flex; 439 | align-items: center; 440 | padding: 8px 12px; 441 | margin-bottom: 8px; 442 | background-color: white; 443 | border-radius: 6px; 444 | border: 1px solid #f0f0f0; 445 | transition: all 0.2s ease; 446 | } 447 | 448 | .rule-item:hover { 449 | background-color: #f8f9ff; 450 | border-color: #d4daff; 451 | } 452 | 453 | .rule-pattern { 454 | flex-grow: 1; 455 | font-family: monospace; 456 | font-size: 13px; 457 | color: #424242; 458 | } 459 | 460 | .rule-proxy { 461 | margin: 0 12px; 462 | font-size: 13px; 463 | color: #6b7cff; 464 | font-weight: 500; 465 | } 466 | 467 | .rule-actions { 468 | padding-top: 8px; 469 | display: flex; 470 | justify-content: flex-end; 471 | /* background-color: #f0f0f0; */ 472 | /* border-bottom-left-radius: 8px; */ 473 | /* border-bottom-right-radius: 8px; */ 474 | } 475 | 476 | .rule-delete { 477 | color: #ff6b6b; 478 | cursor: pointer; 479 | padding: 4px 8px; 480 | border-radius: 4px; 481 | transition: all 0.2s ease; 482 | } 483 | 484 | .rule-delete:hover { 485 | background-color: #ffeeee; 486 | } 487 | 488 | .small-btn { 489 | background-color: #6b7cff; 490 | color: white; 491 | border: none; 492 | padding: 6px 12px; 493 | border-radius: 6px; 494 | cursor: pointer; 495 | font-size: 13px; 496 | font-weight: 500; 497 | transition: all 0.2s ease; 498 | } 499 | 500 | .small-btn:hover { 501 | background-color: #5a6bff; 502 | } 503 | 504 | .rule-import-actions { 505 | display: flex; 506 | justify-content: flex-end; 507 | align-items: center; 508 | margin-top: 8px; 509 | } 510 | 511 | .rule-format-hint { 512 | margin-left: 12px; 513 | margin-right: 12px; 514 | font-size: 12px; 515 | color: #757575; 516 | } 517 | 518 | .proxy-item-icon.auto { 519 | background-color: #e6e0ff; 520 | } 521 | 522 | .proxy-item.active .proxy-item-icon.auto { 523 | background-color: #d4c6ff; 524 | } 525 | 526 | /* 规则模态框样式 */ 527 | #ruleModal .modal-content { 528 | width: 400px; 529 | } 530 | 531 | /* 拖拽排序样式 */ 532 | .rule-item.dragging { 533 | opacity: 0.5; 534 | border: 2px dashed #6b7cff; 535 | } 536 | 537 | .rule-item.drag-over { 538 | border-top: 2px solid #6b7cff; 539 | } 540 | 541 | /* 自动切换规则项样式 */ 542 | .proxy-item.auto-proxy .proxy-item-icon { 543 | background-color: #e6e0ff; 544 | } 545 | 546 | .proxy-item.auto-proxy.active .proxy-item-icon { 547 | background-color: #d4c6ff; 548 | } 549 | 550 | /* 规则导入帮助样式 */ 551 | .rule-import-help { 552 | margin-top: 8px; 553 | padding: 12px; 554 | background-color: #f5f7ff; 555 | border: 1px solid #e0e6ff; 556 | border-radius: 6px; 557 | font-size: 13px; 558 | color: #424242; 559 | max-height: 210px; 560 | /* overflow-y: auto; */ 561 | } 562 | 563 | .rule-import-help h4 { 564 | margin: 0 0 8px 0; 565 | font-size: 14px; 566 | color: #6b7cff; 567 | } 568 | 569 | .rule-import-help ul { 570 | margin: 0 0 12px 0; 571 | padding-left: 20px; 572 | } 573 | 574 | .rule-import-help li { 575 | margin-bottom: 4px; 576 | } 577 | 578 | .rule-import-help code { 579 | background-color: #e6e0ff; 580 | padding: 2px 4px; 581 | border-radius: 3px; 582 | font-family: monospace; 583 | font-size: 12px; 584 | } 585 | 586 | .rule-import-help pre { 587 | background-color: white; 588 | padding: 8px; 589 | border: 1px solid #e0e0e0; 590 | border-radius: 4px; 591 | font-family: monospace; 592 | font-size: 12px; 593 | margin: 8px 0; 594 | white-space: pre-wrap; 595 | } 596 | 597 | .rule-import-note { 598 | font-style: italic; 599 | color: #757575; 600 | margin-top: 8px; 601 | } 602 | 603 | /* 调整导入文本框的高度 */ 604 | #ruleImport { 605 | min-height: 100px; 606 | } 607 | 608 | /* 规则匹配类型图标样式 */ 609 | .rule-match-type { 610 | margin-right: 8px; 611 | font-size: 16px; 612 | width: 24px; 613 | text-align: center; 614 | cursor: help; 615 | } 616 | 617 | /* 匹配类型提示样式 */ 618 | .match-type-hint { 619 | margin-top: 8px; 620 | font-size: 12px; 621 | color: #757575; 622 | background-color: #f5f7ff; 623 | padding: 8px; 624 | border-radius: 4px; 625 | border: 1px solid #e0e6ff; 626 | } 627 | 628 | .match-type-hint p { 629 | margin: 4px 0; 630 | } 631 | 632 | /* Toast notification styles */ 633 | .toast-container { 634 | position: fixed; 635 | bottom: 20px; 636 | right: 20px; 637 | z-index: 9999; 638 | } 639 | 640 | .toast { 641 | display: flex; 642 | align-items: center; 643 | background-color: #4CAF50; 644 | color: white; 645 | padding: 12px 16px; 646 | border-radius: 8px; 647 | margin-bottom: 10px; 648 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); 649 | animation: toast-slide-in 0.3s, toast-fade-out 0.5s 2.5s forwards; 650 | max-width: 500px; 651 | } 652 | 653 | .toast.error { 654 | background-color: #ff6b6b; 655 | } 656 | 657 | .toast-icon { 658 | margin-right: 10px; 659 | font-size: 18px; 660 | } 661 | 662 | .toast-message { 663 | font-size: 14px; 664 | font-weight: 500; 665 | } 666 | 667 | @keyframes toast-slide-in { 668 | from { 669 | transform: translateX(100%); 670 | opacity: 0; 671 | } 672 | to { 673 | transform: translateX(0); 674 | opacity: 1; 675 | } 676 | } 677 | 678 | @keyframes toast-fade-out { 679 | from { 680 | opacity: 1; 681 | } 682 | to { 683 | opacity: 0; 684 | } 685 | } 686 | 687 | /* 保存规则列表按钮样式 */ 688 | #saveAutoProxyBtn { 689 | background-color: #6bbd6e; 690 | color: white; 691 | font-weight: 500; 692 | display: none; /* Hide the save button */ 693 | } 694 | 695 | #saveAutoProxyBtn:hover { 696 | background-color: #5aac5d; 697 | } 698 | 699 | .small-btn.save-btn { 700 | padding: 8px 16px; 701 | font-size: 14px; 702 | } -------------------------------------------------------------------------------- /background.js: -------------------------------------------------------------------------------- 1 | // 代理配置管理和应用 2 | let currentProxyConfig = null; 3 | 4 | // 初始化 5 | chrome.runtime.onInstalled.addListener(() => { 6 | // 设置默认配置 7 | chrome.storage.local.get(['proxyConfigs', 'activeProxy'], (result) => { 8 | if (!result.proxyConfigs) { 9 | const defaultConfigs = { 10 | 'direct': { 11 | name: '直接连接', 12 | type: 'direct', 13 | active: true 14 | } 15 | }; 16 | 17 | chrome.storage.local.set({ 18 | proxyConfigs: defaultConfigs, 19 | activeProxy: 'direct' 20 | }); 21 | } 22 | 23 | // 应用当前活动的代理配置 24 | applyActiveProxyConfig(); 25 | }); 26 | 27 | // 监听未捕获的错误 28 | self.addEventListener('error', function (event) { 29 | console.error('未捕获的错误:', event.message, event.filename, event.lineno); 30 | }); 31 | 32 | // 监听未处理的 Promise 拒绝 33 | self.addEventListener('unhandledrejection', function (event) { 34 | console.error('未处理的 Promise 拒绝:', event.reason); 35 | }); 36 | }); 37 | 38 | // 监听浏览器启动事件 39 | chrome.runtime.onStartup.addListener(() => { 40 | console.log('浏览器已启动，应用活动代理配置'); 41 | // 应用当前活动的代理配置，这将同时更新图标徽章 42 | applyActiveProxyConfig(); 43 | }); 44 | 45 | // 监听来自弹出窗口和选项页面的消息 46 | chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { 47 | console.log('收到消息:', request.action, request); 48 | 49 | try { 50 | const handlers = { 51 | getProxyConfigs: () => { 52 | chrome.storage.local.get(['proxyConfigs', 'activeProxy'], function (data) { 53 | console.log('获取代理配置完成，准备发送响应'); 54 | sendResponse({ 55 | proxyConfigs: data.proxyConfigs || {}, 56 | activeProxy: data.activeProxy || 'direct' 57 | }); 58 | }); 59 | }, 60 | 61 | setActiveProxy: () => { 62 | console.log('设置活动代理:', request.proxyId); 63 | setActiveProxy(request.proxyId, function (success) { 64 | console.log('设置活动代理完成，准备发送响应'); 65 | sendResponse({ success: success }); 66 | }); 67 | }, 68 | 69 | addProxyConfig: () => { 70 | console.log('添加代理配置:', request.config); 71 | addProxyConfig(request.config, function (success, proxyId, error) { 72 | console.log('添加代理配置完成，准备发送响应'); 73 | sendResponse({ success, proxyId, error }); 74 | }); 75 | }, 76 | 77 | updateProxyConfig: () => { 78 | console.log('更新代理配置:', request.proxyId, request.config); 79 | updateProxyConfig(request.proxyId, request.config, function (success, error) { 80 | console.log('更新代理配置完成，准备发送响应'); 81 | sendResponse({ success, error }); 82 | }); 83 | }, 84 | 85 | deleteProxyConfig: () => { 86 | console.log('删除代理配置:', request.proxyId); 87 | deleteProxyConfig(request.proxyId, function (success, error) { 88 | console.log('删除代理配置完成，准备发送响应'); 89 | sendResponse({ success, error }); 90 | }); 91 | }, 92 | 93 | importConfigs: () => { 94 | console.log('导入配置'); 95 | importConfigs(request.configs, function (success) { 96 | console.log('导入配置完成，准备发送响应'); 97 | sendResponse({ success }); 98 | }); 99 | }, 100 | 101 | exportConfigs: () => { 102 | console.log('导出配置'); 103 | chrome.storage.local.get('proxyConfigs', function (data) { 104 | console.log('导出配置完成，准备发送响应'); 105 | sendResponse({ 106 | success: true, 107 | configs: data.proxyConfigs || {} 108 | }); 109 | }); 110 | } 111 | }; 112 | 113 | const handler = handlers[request.action]; 114 | if (handler) { 115 | handler(); 116 | } else { 117 | console.log('未知操作:', request.action); 118 | sendResponse({ success: false, error: '未知操作' }); 119 | } 120 | } catch (error) { 121 | console.error('处理消息时出错:', error); 122 | sendResponse({ success: false, error: error.message }); 123 | } 124 | 125 | // 返回 true 表示将异步发送响应 126 | return true; 127 | }); 128 | 129 | // 应用当前活动的代理配置 130 | function applyActiveProxyConfig() { 131 | console.log('应用当前活动的代理配置'); 132 | 133 | // 获取当前的代理设置，检查是否已经应用 134 | chrome.proxy.settings.get({}, function (config) { 135 | console.log('当前代理设置:', JSON.stringify(config)); 136 | }); 137 | 138 | chrome.storage.local.get(['proxyConfigs', 'activeProxy'], (result) => { 139 | const activeProxyId = result.activeProxy || 'direct'; 140 | const proxyConfigs = result.proxyConfigs || {}; 141 | const config = proxyConfigs[activeProxyId]; 142 | 143 | console.log('当前活动代理:', activeProxyId, JSON.stringify(config)); 144 | 145 | if (!config) { 146 | console.log('没有找到代理配置，清除设置'); 147 | clearProxySettings(); 148 | return; 149 | } 150 | 151 | if (config.type === 'direct') { 152 | console.log('使用直接连接'); 153 | clearProxySettings(); 154 | } else if (config.type === 'auto') { 155 | console.log('应用自动切换规则'); 156 | applyAutoProxyConfig(config, proxyConfigs); 157 | } else { 158 | console.log('应用代理设置:', JSON.stringify(config)); 159 | setProxySettings(config); 160 | } 161 | 162 | // 更新图标状态 163 | updateIcon(config); 164 | }); 165 | } 166 | 167 | // 应用自动切换规则 168 | function applyAutoProxyConfig(autoConfig, proxyConfigs) { 169 | console.log('应用自动切换规则:', JSON.stringify(autoConfig)); 170 | 171 | // 创建 PAC 脚本 172 | let pacScript = generatePacScript(autoConfig, proxyConfigs); 173 | 174 | console.log('应用 PAC 脚本:', pacScript); 175 | 176 | // 应用 PAC 脚本 177 | chrome.proxy.settings.set({ 178 | value: { 179 | mode: "pac_script", 180 | pacScript: { 181 | data: pacScript 182 | } 183 | }, 184 | scope: 'regular' 185 | }, function () { 186 | if (chrome.runtime.lastError) { 187 | console.error('设置 PAC 脚本时出错:', chrome.runtime.lastError); 188 | 189 | // 尝试使用 Base64 编码 190 | try { 191 | const base64Script = btoa(unescape(encodeURIComponent(pacScript))); 192 | chrome.proxy.settings.set({ 193 | value: { 194 | mode: "pac_script", 195 | pacScript: { 196 | data: pacScript, 197 | dataType: "base64" 198 | } 199 | }, 200 | scope: 'regular' 201 | }, function () { 202 | if (chrome.runtime.lastError) { 203 | console.error('使用 Base64 编码设置 PAC 脚本时出错:', chrome.runtime.lastError); 204 | } else { 205 | console.log('PAC 脚本已成功应用 (Base64 编码)'); 206 | } 207 | }); 208 | } catch (e) { 209 | console.error('Base64 编码 PAC 脚本时出错:', e); 210 | } 211 | } else { 212 | console.log('PAC 脚本已成功应用'); 213 | } 214 | }); 215 | } 216 | 217 | // 生成 PAC 脚本 218 | function generatePacScript(autoConfig, proxyConfigs) { 219 | const defaultProxyId = autoConfig.defaultProxy || 'direct'; 220 | const defaultProxy = proxyConfigs[defaultProxyId] || proxyConfigs.direct; 221 | 222 | // 构建规则数组 223 | const rules = autoConfig.rules || []; 224 | 225 | // 构建 PAC 脚本 226 | let pacScript = ` 227 | function FindProxyForURL(url, host) { 228 | url = url.toLowerCase(); 229 | host = host.toLowerCase(); 230 | 231 | function regExpMatch(str, pattern) { 232 | try { 233 | return new RegExp(pattern).test(str); 234 | } catch (e) { 235 | return false; 236 | } 237 | } 238 | `; 239 | 240 | // 添加规则匹配逻辑 241 | rules.forEach(rule => { 242 | const proxyId = rule.proxyId; 243 | if (!proxyConfigs[proxyId]) return; 244 | 245 | const proxyConfig = proxyConfigs[proxyId]; 246 | let proxyString = ''; 247 | 248 | if (proxyId === 'direct' || proxyConfig.type === 'direct') { 249 | proxyString = 'DIRECT'; 250 | } else { 251 | const type = proxyConfig.type.toUpperCase(); 252 | if (type === 'HTTP' || type === 'HTTPS') 253 | { 254 | proxyString = `PROXY ${proxyConfig.host}:${proxyConfig.port}`; 255 | } else { 256 | proxyString = `${type} ${proxyConfig.host}:${proxyConfig.port}`; 257 | } 258 | 259 | } 260 | 261 | // 检查是否是正则表达式模式 (/pattern/) 262 | const isRegex = rule.pattern.length > 2 && 263 | rule.pattern.startsWith('/') && 264 | rule.pattern.endsWith('/'); 265 | 266 | // 根据匹配类型和模式类型使用不同的匹配函数 267 | const matchType = rule.matchType || 'url'; 268 | 269 | if (isRegex) { 270 | // 提取正则表达式内容（去掉开头和结尾的斜杠） 271 | const regexPattern = rule.pattern.substring(1, rule.pattern.length - 1); 272 | 273 | if (matchType === 'host') { 274 | pacScript += ` 275 | if (regExpMatch(host, "${regexPattern}")) { 276 | return "${proxyString}"; 277 | } 278 | `; 279 | } else { 280 | pacScript += ` 281 | if (regExpMatch(url, "${regexPattern}")) { 282 | return "${proxyString}"; 283 | } 284 | `; 285 | } 286 | } else { 287 | // 使用通配符匹配 288 | if (matchType === 'host') { 289 | pacScript += ` 290 | if (shExpMatch(host, "${rule.pattern}")) { 291 | return "${proxyString}"; 292 | } 293 | `; 294 | } else { 295 | pacScript += ` 296 | if (shExpMatch(url, "${rule.pattern}")) { 297 | return "${proxyString}"; 298 | } 299 | `; 300 | } 301 | } 302 | }); 303 | 304 | // 添加默认代理 305 | let defaultProxyString = ''; 306 | if (defaultProxyId === 'direct' || defaultProxy.type === 'direct') { 307 | defaultProxyString = 'DIRECT'; 308 | } else { 309 | const type = defaultProxy.type.toUpperCase(); 310 | defaultProxyString = `${type} ${defaultProxy.host}:${defaultProxy.port}`; 311 | } 312 | 313 | pacScript += ` 314 | return "${defaultProxyString}"; 315 | } 316 | `; 317 | 318 | return pacScript; 319 | } 320 | 321 | // 清除代理设置 322 | function clearProxySettings() { 323 | console.log('正在清除代理设置...'); 324 | chrome.proxy.settings.clear({ scope: 'regular' }, () => { 325 | if (chrome.runtime.lastError) { 326 | console.error('清除代理设置时出错:', chrome.runtime.lastError); 327 | } else { 328 | console.log('代理设置已成功清除'); 329 | } 330 | }); 331 | } 332 | 333 | // 设置代理 334 | function setProxySettings(config) { 335 | console.log('设置代理配置:', JSON.stringify(config)); 336 | 337 | try { 338 | const proxyConfig = { 339 | mode: "fixed_servers", 340 | rules: { 341 | singleProxy: { 342 | scheme: config.type, 343 | host: config.host, 344 | port: parseInt(config.port, 10) 345 | }, 346 | bypassList: [] 347 | } 348 | }; 349 | 350 | console.log('应用代理设置:', JSON.stringify(proxyConfig)); 351 | 352 | // 应用代理设置 353 | chrome.proxy.settings.set( 354 | { value: proxyConfig, scope: 'regular' }, 355 | function () { 356 | if (chrome.runtime.lastError) { 357 | console.error('设置代理时出错:', chrome.runtime.lastError); 358 | return; 359 | } 360 | 361 | console.log('代理设置成功应用'); 362 | 363 | // 为所有类型的代理设置认证处理程序（如果需要） 364 | if (config.auth && config.username && config.password) { 365 | setupProxyAuth(config); 366 | } 367 | } 368 | ); 369 | } catch (error) { 370 | console.error('设置代理时发生异常:', error); 371 | } 372 | } 373 | 374 | function setupProxyAuth(config) { 375 | // 注意：预留函数位置，目前不支持自动认证，不支持 socks5 代理认证，以下代码无效 376 | 377 | // 移除之前的认证监听器 378 | removeAuthHandler(); 379 | 380 | // 添加新的认证监听器 381 | chrome.webRequest.onAuthRequired.addListener( 382 | (details, callback) => { 383 | callback({ 384 | authCredentials: { 385 | username: config.username, 386 | password: config.password 387 | } 388 | }); 389 | }, 390 | { urls: [""] }, 391 | ["blocking"] 392 | ); 393 | } 394 | 395 | function removeAuthHandler() { 396 | if (chrome.webRequest.onAuthRequired.hasListeners()) { 397 | chrome.webRequest.onAuthRequired.removeListener(); 398 | } 399 | } 400 | 401 | // 更新图标状态 402 | function updateIcon(config) { 403 | // 根据代理类型更改图标颜色或徽章 404 | if (config.type === 'direct') { 405 | chrome.action.setBadgeText({ text: '' }); 406 | } else if (config.type === 'auto') { 407 | chrome.action.setBadgeText({ text: 'Auto' }); 408 | chrome.action.setBadgeBackgroundColor({ color: '#8BC34A' }); 409 | } 410 | else { 411 | chrome.action.setBadgeText({ text: 'ON' }); 412 | chrome.action.setBadgeBackgroundColor({ color: '#8BC34A' }); 413 | } 414 | } 415 | 416 | // 保存代理配置 417 | function saveProxyConfig(config, sendResponse) { 418 | chrome.storage.local.get(['proxyConfigs'], (result) => { 419 | const proxyConfigs = result.proxyConfigs || {}; 420 | 421 | // 生成唯一ID（如果是新配置） 422 | if (!config.id) { 423 | config.id = 'proxy_' + Date.now(); 424 | } 425 | 426 | // 更新配置 427 | proxyConfigs[config.id] = config; 428 | 429 | chrome.storage.local.set({ proxyConfigs }, () => { 430 | sendResponse({ success: true, config }); 431 | }); 432 | }); 433 | } 434 | 435 | // 删除代理配置 436 | function deleteProxyConfig(proxyId, callback) { 437 | chrome.storage.local.get(['proxyConfigs', 'activeProxy'], function (result) { 438 | const proxyConfigs = result.proxyConfigs || {}; 439 | const activeProxy = result.activeProxy; 440 | 441 | // 不允许删除当前活动的代理 442 | if (proxyId === activeProxy) { 443 | callback(false, '不能删除当前活动的代理配置'); 444 | return; 445 | } 446 | 447 | // 不允许删除直接连接选项 448 | if (proxyId === 'direct') { 449 | callback(false, '不能删除直接连接选项'); 450 | return; 451 | } 452 | 453 | // 删除配置 454 | delete proxyConfigs[proxyId]; 455 | 456 | chrome.storage.local.set({ proxyConfigs: proxyConfigs }, function () { 457 | if (chrome.runtime.lastError) { 458 | console.error('删除代理配置时出错:', chrome.runtime.lastError); 459 | callback(false, chrome.runtime.lastError.message); 460 | } else { 461 | callback(true); 462 | } 463 | }); 464 | }); 465 | } 466 | 467 | // 导入配置 468 | function importConfigs(configs, callback) { 469 | chrome.storage.local.get(['proxyConfigs'], function (result) { 470 | let proxyConfigs = result.proxyConfigs || {}; 471 | 472 | // 合并配置 473 | proxyConfigs = { ...proxyConfigs, ...configs }; 474 | 475 | chrome.storage.local.set({ proxyConfigs: proxyConfigs }, function () { 476 | if (chrome.runtime.lastError) { 477 | console.error('导入配置时出错:', chrome.runtime.lastError); 478 | callback(false); 479 | } else { 480 | callback(true); 481 | } 482 | }); 483 | }); 484 | } 485 | 486 | // 导出配置 487 | function exportConfigs(sendResponse) { 488 | chrome.storage.local.get(['proxyConfigs'], (result) => { 489 | sendResponse({ success: true, configs: result.proxyConfigs || {} }); 490 | }); 491 | } 492 | 493 | // 添加代理配置 494 | function addProxyConfig(config, callback) { 495 | console.log('开始添加代理配置:', config); 496 | chrome.storage.local.get('proxyConfigs', function (data) { 497 | console.log('获取到现有代理配置'); 498 | const proxyConfigs = data.proxyConfigs || {}; 499 | 500 | // 生成唯一ID 501 | const proxyId = 'proxy_' + Date.now(); 502 | console.log('生成代理ID:', proxyId); 503 | 504 | // 添加新配置 505 | proxyConfigs[proxyId] = config; 506 | 507 | // 保存更新后的配置 508 | saveProxyConfigs(proxyConfigs, () => { 509 | callback(true, proxyId); 510 | }, (error) => { 511 | callback(false, null, error); 512 | }); 513 | }); 514 | } 515 | 516 | // 更新代理配置 517 | function updateProxyConfig(proxyId, config, callback) { 518 | console.log('开始更新代理配置:', proxyId, config); 519 | chrome.storage.local.get('proxyConfigs', function (data) { 520 | console.log('获取到现有代理配置'); 521 | const proxyConfigs = data.proxyConfigs || {}; 522 | 523 | // 检查代理ID是否存在 524 | if (!proxyConfigs[proxyId]) { 525 | console.error('代理配置不存在:', proxyId); 526 | callback(false, '代理配置不存在'); 527 | return; 528 | } 529 | 530 | // 更新配置 531 | proxyConfigs[proxyId] = config; 532 | 533 | // 保存更新后的配置 534 | saveProxyConfigs(proxyConfigs, () => { 535 | callback(true); 536 | }, (error) => { 537 | callback(false, error); 538 | }); 539 | }); 540 | } 541 | 542 | // 辅助函数：保存代理配置 543 | function saveProxyConfigs(proxyConfigs, onSuccess, onError) { 544 | console.log('准备保存代理配置'); 545 | chrome.storage.local.set({ proxyConfigs }, function () { 546 | console.log('代理配置已保存'); 547 | if (chrome.runtime.lastError) { 548 | console.error('保存代理配置时出错:', chrome.runtime.lastError); 549 | if (onError) onError(chrome.runtime.lastError.message); 550 | } else { 551 | console.log('成功保存代理配置，调用回调'); 552 | if (onSuccess) onSuccess(); 553 | } 554 | }); 555 | } 556 | 557 | // 设置活动代理 558 | function setActiveProxy(proxyId, callback) { 559 | chrome.storage.local.set({ activeProxy: proxyId }, function () { 560 | if (chrome.runtime.lastError) { 561 | console.error('设置活动代理时出错:', chrome.runtime.lastError); 562 | callback(false); 563 | return; 564 | } 565 | 566 | // 应用代理配置 567 | applyActiveProxyConfig(); 568 | callback(true); 569 | }); 570 | } -------------------------------------------------------------------------------- /options/options.js: -------------------------------------------------------------------------------- 1 | let currentProxyId = null; 2 | let activeProxyId = null; 3 | let proxyConfigs = {}; 4 | let editingAutoProxyId = null; 5 | 6 | // 显示提示消息 7 | function showToast(message, type = 'success') { 8 | const toastContainer = document.getElementById('toastContainer'); 9 | 10 | // 创建 toast 元素 11 | const toast = document.createElement('div'); 12 | toast.className = `toast ${type}`; 13 | 14 | // 设置图标 15 | const icon = type === 'success' ? '' : ''; 16 | 17 | // 设置内容 18 | // toast.innerHTML = ` 19 | //

${icon}

20 | //

${message}

21 | // `; 22 | 23 | toast.innerHTML = ` 24 |

${message}

25 | `; 26 | 27 | // 添加到容器 28 | toastContainer.appendChild(toast); 29 | 30 | // 定时移除 31 | setTimeout(() => { 32 | toast.addEventListener('animationend', function() { 33 | toast.remove(); 34 | }); 35 | }, 5000); 36 | } 37 | 38 | function initOptionsPage() { 39 | // 确保导入模态窗口默认隐藏 40 | const importModal = document.getElementById('importModal'); 41 | if (importModal) { 42 | importModal.classList.add('hidden'); 43 | } 44 | 45 | // 确保规则模态窗口默认隐藏 46 | const ruleModal = document.getElementById('ruleModal'); 47 | if (ruleModal) { 48 | ruleModal.classList.add('hidden'); 49 | } 50 | 51 | // 确保欢迎界面显示，表单隐藏 52 | document.getElementById('welcomeMessage').classList.remove('hidden'); 53 | document.getElementById('proxyForm').classList.add('hidden'); 54 | 55 | // 如果存在自动代理表单，也确保它隐藏 56 | const autoProxyForm = document.getElementById('autoProxyForm'); 57 | if (autoProxyForm) { 58 | autoProxyForm.classList.add('hidden'); 59 | } 60 | } 61 | 62 | document.addEventListener('DOMContentLoaded', function() { 63 | console.log('选项页面已加载'); 64 | 65 | // 检查导入模态窗口状态 66 | const importModal = document.getElementById('importModal'); 67 | console.log('导入模态窗口状态:', importModal.classList.contains('hidden') ? '隐藏' : '显示'); 68 | 69 | // 强制隐藏导入模态窗口 70 | importModal.classList.add('hidden'); 71 | console.log('已强制隐藏导入模态窗口'); 72 | 73 | // 初始化页面 74 | initOptionsPage(); 75 | 76 | // 加载代理配置 77 | loadProxyConfigs(); 78 | 79 | // 绑定添加代理按钮事件 80 | document.getElementById('addProxyBtn').addEventListener('click', showAddProxyForm); 81 | 82 | // 绑定保存代理按钮事件 83 | document.getElementById('saveProxyBtn').addEventListener('click', saveProxyConfig); 84 | 85 | // 绑定取消按钮事件 86 | document.getElementById('cancelBtn').addEventListener('click', hideProxyForm); 87 | 88 | // 绑定删除代理按钮事件 89 | document.getElementById('deleteProxyBtn').addEventListener('click', deleteProxyConfig); 90 | 91 | // 绑定导入按钮事件 92 | document.getElementById('importBtn').addEventListener('click', showImportModal); 93 | 94 | // 绑定导出按钮事件 95 | document.getElementById('exportBtn').addEventListener('click', exportConfigs); 96 | 97 | // 绑定确认导入按钮事件 98 | document.getElementById('confirmImportBtn').addEventListener('click', importConfigs); 99 | 100 | // 绑定取消导入按钮事件 101 | document.getElementById('cancelImportBtn').addEventListener('click', hideImportModal); 102 | 103 | // 在页面加载后延迟检查模态窗口状态 104 | setTimeout(function() { 105 | const importModal = document.getElementById('importModal'); 106 | if (!importModal.classList.contains('hidden')) { 107 | console.log('模态窗口仍然显示，强制隐藏'); 108 | importModal.classList.add('hidden'); 109 | importModal.style.display = 'none'; 110 | } 111 | }, 100); 112 | 113 | // 添加作者链接事件 114 | const authorLink = document.getElementById('authorLink'); 115 | if (authorLink) { 116 | authorLink.addEventListener('click', function(e) { 117 | e.preventDefault(); 118 | chrome.tabs.create({ url: 'https://github.com/kxcode' }); 119 | }); 120 | } 121 | 122 | // 绑定添加自动代理按钮事件 123 | const addAutoProxyBtn = document.getElementById('addAutoProxyBtn'); 124 | if (addAutoProxyBtn) { 125 | addAutoProxyBtn.addEventListener('click', showAddAutoProxyForm); 126 | } 127 | 128 | // 绑定保存自动代理按钮事件 129 | const saveAutoProxyBtn = document.getElementById('saveAutoProxyBtn'); 130 | if (saveAutoProxyBtn) { 131 | saveAutoProxyBtn.addEventListener('click', saveAutoProxyConfig); 132 | } 133 | 134 | // 绑定取消自动代理按钮事件 135 | const cancelAutoProxyBtn = document.getElementById('cancelAutoProxyBtn'); 136 | if (cancelAutoProxyBtn) { 137 | cancelAutoProxyBtn.addEventListener('click', hideAutoProxyForm); 138 | } 139 | 140 | // 绑定删除自动代理按钮事件 141 | const deleteAutoProxyBtn = document.getElementById('deleteAutoProxyBtn'); 142 | if (deleteAutoProxyBtn) { 143 | deleteAutoProxyBtn.addEventListener('click', deleteAutoProxyConfig); 144 | } 145 | 146 | // 绑定添加规则按钮事件 147 | const addRuleBtn = document.getElementById('addRuleBtn'); 148 | if (addRuleBtn) { 149 | addRuleBtn.addEventListener('click', showAddRuleModal); 150 | } 151 | 152 | // 绑定保存规则按钮事件 153 | const saveRuleBtn = document.getElementById('saveRuleBtn'); 154 | if (saveRuleBtn) { 155 | saveRuleBtn.addEventListener('click', saveRule); 156 | } 157 | 158 | // 绑定取消规则按钮事件 159 | const cancelRuleBtn = document.getElementById('cancelRuleBtn'); 160 | if (cancelRuleBtn) { 161 | cancelRuleBtn.addEventListener('click', hideRuleModal); 162 | } 163 | 164 | // 绑定导入规则按钮事件 165 | const importRulesBtn = document.getElementById('importRulesBtn'); 166 | if (importRulesBtn) { 167 | importRulesBtn.addEventListener('click', importRules); 168 | } 169 | }); 170 | 171 | // 加载代理配置 172 | function loadProxyConfigs() { 173 | chrome.runtime.sendMessage({ action: 'getProxyConfigs' }, function(response) { 174 | proxyConfigs = response.proxyConfigs; 175 | const activeProxy = response.activeProxy; 176 | activeProxyId = activeProxy; 177 | 178 | const proxyListElement = document.querySelector('.proxy-list'); 179 | proxyListElement.innerHTML = ''; 180 | 181 | // 首先添加直接连接选项 182 | if (proxyConfigs.direct) { 183 | addProxyItemToList(proxyConfigs.direct, 'direct', activeProxy === 'direct', proxyListElement); 184 | } 185 | 186 | // 添加其他代理配置 187 | for (const proxyId in proxyConfigs) { 188 | if (proxyId !== 'direct') { 189 | const config = proxyConfigs[proxyId]; 190 | addProxyItemToList(config, proxyId, activeProxy === proxyId, proxyListElement); 191 | } 192 | } 193 | 194 | // 如果没有配置，显示提示 195 | if (Object.keys(proxyConfigs).length === 0) { 196 | proxyListElement.innerHTML = '

没有可用的代理配置。

'; 197 | } 198 | 199 | // 确保欢迎界面显示 200 | document.getElementById('welcomeMessage').classList.remove('hidden'); 201 | document.getElementById('proxyForm').classList.add('hidden'); 202 | }); 203 | } 204 | 205 | // 添加代理项到列表 206 | function addProxyItemToList(config, proxyId, isActive, listElement) { 207 | const proxyItem = document.createElement('div'); 208 | proxyItem.className = `proxy-item ${isActive ? 'active' : ''}`; 209 | 210 | // 添加自动代理类标识 211 | if (config.type === 'auto') { 212 | proxyItem.className += ' auto-proxy'; 213 | } 214 | 215 | proxyItem.dataset.proxyId = proxyId; 216 | 217 | let iconHtml = ''; 218 | let infoHtml = ''; 219 | 220 | if (config.type === 'direct') { 221 | iconHtml = '🔗'; 222 | infoHtml = '直接连接到互联网'; 223 | } else if (config.type === 'auto') { 224 | iconHtml = '🔌'; 225 | infoHtml = '自动切换规则'; 226 | } else { 227 | iconHtml = getProxyTypeIcon(config.type); 228 | infoHtml = `${config.type.toUpperCase()} - ${config.host}:${config.port}`; 229 | } 230 | 231 | proxyItem.innerHTML = ` 232 |

${iconHtml}

233 |

234 |

${config.name}

235 |

${infoHtml}

236 |

237 | `; 238 | 239 | // 点击编辑代理 240 | proxyItem.addEventListener('click', function() { 241 | if (config.type === 'auto') { 242 | editAutoProxy(proxyId); 243 | } else { 244 | editProxy(proxyId); 245 | } 246 | }); 247 | 248 | listElement.appendChild(proxyItem); 249 | } 250 | 251 | // 获取代理类型图标 252 | function getProxyTypeIcon(type) { 253 | switch (type) { 254 | case 'http': 255 | return '🌐'; 256 | case 'https': 257 | return '🔒'; 258 | case 'socks5': 259 | return '🧦'; 260 | default: 261 | return '🔌'; 262 | } 263 | } 264 | 265 | // 显示添加代理表单 266 | function showAddProxyForm() { 267 | // 重置表单 268 | const form = document.getElementById('proxyForm'); 269 | 270 | // 移除直接连接说明文本（如果存在） 271 | const directInfoElement = document.getElementById('directConnectionInfo'); 272 | if (directInfoElement) { 273 | directInfoElement.remove(); 274 | } 275 | 276 | // 显示所有表单组 277 | const formGroups = document.querySelectorAll('.form-group'); 278 | formGroups.forEach(group => { 279 | group.style.display = 'flex'; 280 | }); 281 | 282 | // 清除之前的输入 283 | document.getElementById('proxyName').value = ''; 284 | document.getElementById('proxyType').value = 'http'; 285 | document.getElementById('proxyHost').value = ''; 286 | document.getElementById('proxyPort').value = ''; 287 | 288 | // 更新表单标题 289 | document.getElementById('formTitle').textContent = '添加代理'; 290 | 291 | // 隐藏删除按钮 292 | document.getElementById('deleteProxyBtn').classList.add('hidden'); 293 | 294 | // 显示表单 295 | form.classList.remove('hidden'); 296 | document.getElementById('welcomeMessage').classList.add('hidden'); 297 | 298 | // 清除当前编辑的代理ID 299 | currentProxyId = null; 300 | } 301 | 302 | function toggleProxyFormGroupDisplay(show){ 303 | if(!show){ 304 | // 隐藏不需要的表单组 305 | const formGroups = document.querySelectorAll('.form-group'); 306 | formGroups.forEach((group, index) => { 307 | if (index > 0) { // 保留名称字段 308 | group.style.display = 'none'; 309 | } 310 | }); 311 | }else{ 312 | // 显示所有表单组 313 | const formGroups = document.querySelectorAll('.form-group'); 314 | formGroups.forEach(group => { 315 | group.style.display = 'flex'; 316 | }); 317 | } 318 | } 319 | 320 | // 编辑代理 321 | function editProxy(proxyId) { 322 | const config = proxyConfigs[proxyId]; 323 | if (!config) return; 324 | 325 | // 如果是自动代理类型，调用自动代理编辑函数 326 | if (config.type === 'auto') { 327 | editAutoProxy(proxyId); 328 | return; 329 | } 330 | 331 | // 设置当前编辑的代理ID 332 | currentProxyId = proxyId; 333 | 334 | // 设置表单标题 335 | document.getElementById('formTitle').textContent = '编辑代理'; 336 | 337 | // 如果是直接连接 338 | if (config.type === 'direct') { 339 | toggleProxyFormGroupDisplay(false); 340 | 341 | // 填充名称 342 | document.getElementById('proxyName').value = config.name; 343 | 344 | // 添加直接连接说明文本 345 | const formElement = document.getElementById('proxyForm'); 346 | if (!document.getElementById('directConnectionInfo')) { 347 | const infoElement = document.createElement('div'); 348 | infoElement.id = 'directConnectionInfo'; 349 | infoElement.className = 'direct-connection-info'; 350 | infoElement.innerHTML = ` 351 |

直接连接模式下，浏览器将不使用任何代理服务器，直接连接到互联网。

352 |

这是浏览器的默认连接方式。

353 | `; 354 | formElement.insertBefore(infoElement, document.querySelector('.form-actions')); 355 | } 356 | 357 | // 隐藏删除按钮 358 | document.getElementById('deleteProxyBtn').classList.add('hidden'); 359 | } else { 360 | // 移除直接连接说明文本（如果存在） 361 | const directInfoElement = document.getElementById('directConnectionInfo'); 362 | if (directInfoElement) { 363 | directInfoElement.remove(); 364 | } 365 | 366 | // 显示所有表单组 367 | toggleProxyFormGroupDisplay(true); 368 | 369 | // 填充表单数据 370 | document.getElementById('proxyName').value = config.name; 371 | document.getElementById('proxyType').value = config.type; 372 | document.getElementById('proxyHost').value = config.host || ''; 373 | document.getElementById('proxyPort').value = config.port || ''; 374 | 375 | // 显示删除按钮 376 | document.getElementById('deleteProxyBtn').classList.remove('hidden'); 377 | } 378 | 379 | // 显示表单 380 | document.getElementById('proxyForm').classList.remove('hidden'); 381 | document.getElementById('welcomeMessage').classList.add('hidden'); 382 | 383 | // 如果存在自动代理表单，确保它隐藏 384 | const autoProxyForm = document.getElementById('autoProxyForm'); 385 | if (autoProxyForm) { 386 | autoProxyForm.classList.add('hidden'); 387 | } 388 | } 389 | 390 | // 隐藏代理表单 391 | function hideProxyForm() { 392 | document.getElementById('proxyForm').classList.add('hidden'); 393 | document.getElementById('welcomeMessage').classList.remove('hidden'); 394 | currentProxyId = null; 395 | } 396 | 397 | // 保存代理配置 398 | function saveProxyConfig() { 399 | // 获取表单数据 400 | const name = document.getElementById('proxyName').value; 401 | 402 | if (!name) { 403 | alert('请输入代理名称'); 404 | return; 405 | } 406 | 407 | let config = { 408 | name: name 409 | }; 410 | 411 | // 如果是直接连接选项，只更新名称 412 | if (currentProxyId === 'direct') { 413 | config.type = 'direct'; 414 | } else { 415 | // 获取其他表单数据 416 | const type = document.getElementById('proxyType').value; 417 | const host = document.getElementById('proxyHost').value; 418 | const port = document.getElementById('proxyPort').value; 419 | 420 | if (type !== 'direct' && (!host || !port)) { 421 | alert('请输入服务器地址和端口'); 422 | return; 423 | } 424 | 425 | config.type = type; 426 | config.host = host; 427 | config.port = parseInt(port, 10); 428 | } 429 | 430 | // 显示保存中提示 431 | const saveBtn = document.getElementById('saveProxyBtn'); 432 | const originalText = saveBtn.textContent; 433 | saveBtn.textContent = '保存中...'; 434 | saveBtn.disabled = true; 435 | 436 | // 设置超时处理 437 | const timeoutId = setTimeout(() => { 438 | saveBtn.textContent = originalText; 439 | saveBtn.disabled = false; 440 | alert('保存超时，请重试'); 441 | }, 5000); // 5秒超时 442 | 443 | try { 444 | // 保存配置 445 | if (currentProxyId) { 446 | // 更新现有配置 447 | chrome.runtime.sendMessage({ 448 | action: 'updateProxyConfig', 449 | proxyId: currentProxyId, 450 | config: config 451 | }, function(response) { 452 | clearTimeout(timeoutId); 453 | saveBtn.textContent = originalText; 454 | saveBtn.disabled = false; 455 | 456 | // 添加错误处理 457 | if (chrome.runtime.lastError) { 458 | console.error('更新代理配置时出错:', chrome.runtime.lastError); 459 | alert('保存失败: ' + chrome.runtime.lastError.message); 460 | return; 461 | } 462 | 463 | if (response && response.success) { 464 | // 检查是否需要刷新当前激活的代理 465 | if (activeProxyId === currentProxyId) { 466 | chrome.runtime.sendMessage({ 467 | action: 'setActiveProxy', 468 | proxyId: currentProxyId 469 | }); 470 | } 471 | 472 | // 重新加载代理配置 473 | loadProxyConfigs(); 474 | // 隐藏表单 475 | hideProxyForm(); 476 | } else { 477 | alert('保存失败: ' + (response ? response.error : '未知错误')); 478 | } 479 | }); 480 | } else { 481 | // 添加新配置 482 | chrome.runtime.sendMessage({ 483 | action: 'addProxyConfig', 484 | config: config 485 | }, function(response) { 486 | clearTimeout(timeoutId); 487 | saveBtn.textContent = originalText; 488 | saveBtn.disabled = false; 489 | 490 | // 添加错误处理 491 | if (chrome.runtime.lastError) { 492 | console.error('添加代理配置时出错:', chrome.runtime.lastError); 493 | alert('保存失败: ' + chrome.runtime.lastError.message); 494 | return; 495 | } 496 | 497 | if (response && response.success) { 498 | // 重新加载代理配置 499 | loadProxyConfigs(); 500 | // 隐藏表单 501 | hideProxyForm(); 502 | } else { 503 | alert('保存失败: ' + (response ? response.error : '未知错误')); 504 | } 505 | }); 506 | } 507 | } catch (error) { 508 | clearTimeout(timeoutId); 509 | saveBtn.textContent = originalText; 510 | saveBtn.disabled = false; 511 | console.error('保存过程中发生错误:', error); 512 | alert('保存失败: ' + error.message); 513 | } 514 | } 515 | 516 | // 删除代理配置 517 | function deleteProxyConfig() { 518 | if (!currentProxyId) return; 519 | 520 | if (confirm('确定要删除此代理配置吗？')) { 521 | chrome.runtime.sendMessage({ 522 | action: 'deleteProxyConfig', 523 | proxyId: currentProxyId 524 | }, function(response) { 525 | if (response.success) { 526 | // 重新加载配置列表 527 | loadProxyConfigs(); 528 | 529 | // 隐藏表单 530 | hideProxyForm(); 531 | } else { 532 | alert(response.error || '无法删除代理配置'); 533 | } 534 | }); 535 | } 536 | } 537 | 538 | // 显示导入模态框 539 | function showImportModal() { 540 | const importModal = document.getElementById('importModal'); 541 | importModal.classList.remove('hidden'); 542 | importModal.style.display = 'flex'; 543 | document.getElementById('importData').value = ''; 544 | } 545 | 546 | // 隐藏导入模态框 547 | function hideImportModal() { 548 | const importModal = document.getElementById('importModal'); 549 | importModal.classList.add('hidden'); 550 | importModal.style.display = 'none'; 551 | } 552 | 553 | // 导入配置 554 | function importConfigs() { 555 | const importData = document.getElementById('importData').value.trim(); 556 | if (!importData) { 557 | alert('请输入要导入的配置数据'); 558 | return; 559 | } 560 | 561 | try { 562 | const configs = JSON.parse(importData); 563 | 564 | chrome.runtime.sendMessage({ 565 | action: 'importConfigs', 566 | configs 567 | }, function(response) { 568 | if (response.success) { 569 | // 重新加载配置列表 570 | loadProxyConfigs(); 571 | 572 | // 隐藏模态框 573 | hideImportModal(); 574 | 575 | alert('配置导入成功'); 576 | } 577 | }); 578 | } catch (error) { 579 | alert('导入失败：无效的 JSON 格式'); 580 | } 581 | } 582 | 583 | // 导出配置 584 | function exportConfigs() { 585 | chrome.runtime.sendMessage({ 586 | action: 'exportConfigs' 587 | }, function(response) { 588 | if (response.success) { 589 | const configs = response.configs; 590 | const exportData = JSON.stringify(configs, null, 2); 591 | 592 | // 创建下载链接 593 | const blob = new Blob([exportData], { type: 'application/json' }); 594 | const url = URL.createObjectURL(blob); 595 | 596 | const a = document.createElement('a'); 597 | a.href = url; 598 | a.download = 'proxy-configs.json'; 599 | a.click(); 600 | 601 | URL.revokeObjectURL(url); 602 | } 603 | }); 604 | } 605 | 606 | // 添加规则到列表 607 | function addRuleToList(rule) { 608 | const ruleList = document.getElementById('ruleList'); 609 | const ruleItem = document.createElement('div'); 610 | ruleItem.className = 'rule-item'; 611 | ruleItem.dataset.pattern = rule.pattern; 612 | ruleItem.dataset.proxyId = rule.proxyId; 613 | // 添加匹配类型字段，默认为 'url' 614 | ruleItem.dataset.matchType = rule.matchType || 'url'; 615 | 616 | const proxyName = rule.proxyId === 'direct' ? '直接连接' : 617 | (proxyConfigs[rule.proxyId] ? proxyConfigs[rule.proxyId].name : '未知代理'); 618 | 619 | // 添加匹配类型图标 620 | const matchTypeIcon = rule.matchType === 'host' ? '🏠' : '🔗'; 621 | 622 | ruleItem.innerHTML = ` 623 |

${matchTypeIcon}

624 |

${rule.pattern}

625 |

${proxyName}

626 |

627 | `; 628 | 629 | // 添加删除规则事件 630 | ruleItem.querySelector('.rule-delete').addEventListener('click', function(e) { 631 | e.stopPropagation(); 632 | ruleItem.remove(); 633 | saveAutoProxyConfig() 634 | }); 635 | 636 | // 添加编辑规则事件 637 | ruleItem.addEventListener('click', function() { 638 | editRule(ruleItem); 639 | }); 640 | 641 | ruleList.appendChild(ruleItem); 642 | } 643 | 644 | // 编辑规则 645 | function editRule(ruleItem) { 646 | // 获取规则项的索引 647 | const ruleItems = document.querySelectorAll('#ruleList .rule-item'); 648 | currentRuleIndex = Array.from(ruleItems).indexOf(ruleItem); 649 | 650 | // 填充表单 651 | document.getElementById('rulePattern').value = ruleItem.dataset.pattern; 652 | 653 | // 设置匹配类型 654 | const matchType = ruleItem.dataset.matchType || 'url'; 655 | document.getElementById('ruleMatchType').value = matchType; 656 | 657 | // 填充代理下拉框 658 | populateProxyDropdown('ruleProxy'); 659 | document.getElementById('ruleProxy').value = ruleItem.dataset.proxyId; 660 | 661 | // 显示模态框 662 | const ruleModal = document.getElementById('ruleModal'); 663 | ruleModal.classList.remove('hidden'); 664 | ruleModal.style.display = 'flex'; 665 | } 666 | 667 | // 导入规则 668 | function importRules() { 669 | const rulesText = document.getElementById('ruleImport').value.trim(); 670 | if (!rulesText) { 671 | showToast('请输入要导入的规则', 'error'); 672 | return; 673 | } 674 | 675 | const lines = rulesText.split('\n'); 676 | let importedCount = 0; 677 | 678 | lines.forEach(line => { 679 | line = line.trim(); 680 | // 跳过规则中的空行、注释行 681 | if (!line || line.startsWith('!') || line.startsWith('[')) return; 682 | 683 | // 确定匹配类型，默认为URL匹配 684 | let matchType = 'url'; 685 | let proxyId = document.getElementById('ruleImportProxy').value; 686 | 687 | // 处理 AutoProxy 格式规则 688 | 689 | // 处理例外规则，强制使用直接连接 690 | if (line.startsWith('@@')) { 691 | proxyId = 'direct'; 692 | line = line.substring(2); 693 | } 694 | 695 | if (line.startsWith('||')) { 696 | // 例如 ||example.com 697 | line = '*' + line.substring(2); 698 | matchType = 'host'; // 双竖线通常表示主机名匹配 699 | } else if (line.startsWith('|')) { 700 | line = line.substring(1) + "*"; 701 | matchType = 'url'; // 单竖线通常表示URL开头匹配 702 | } else if (!line.includes('/')) { 703 | // 子域名通配，例如 example.com 704 | line = '/(.*\\.)?' + line.replace(/\./g, '\\.') + '/'; 705 | matchType = 'host' 706 | } else if (line.length > 1 && line.startsWith('/') && line.endsWith('/')) { 707 | // 正则表达式，保留正则表达式 708 | line = line 709 | matchType = 'url'; 710 | } else if (line.startsWith('http://') || line.startsWith('https://')) { 711 | // 例如 http://example.com 712 | line = line + "*" 713 | matchType = 'url'; 714 | } 715 | 716 | // 添加规则 717 | addRuleToList({ 718 | pattern: line, 719 | proxyId: proxyId, 720 | matchType: matchType 721 | }); 722 | 723 | importedCount++; 724 | }); 725 | 726 | // 清空导入文本框 727 | document.getElementById('ruleImport').value = ''; 728 | 729 | // 显示导入成功提示 730 | if (importedCount > 0) { 731 | showToast(`成功导入 ${importedCount} 条规则，正在保存规则列表...`); 732 | saveAutoProxyConfig() 733 | } else { 734 | showToast('没有导入任何规则', 'error'); 735 | } 736 | } 737 | 738 | // 显示添加自动切换规则表单 739 | function showAddAutoProxyForm() { 740 | toggleProxyFormGroupDisplay(true); 741 | 742 | // 隐藏其他表单，显示自动代理表单 743 | document.getElementById('proxyForm').classList.add('hidden'); 744 | document.getElementById('welcomeMessage').classList.add('hidden'); 745 | document.getElementById('autoProxyForm').classList.remove('hidden'); 746 | 747 | // 清除表单数据 748 | document.getElementById('autoProxyName').value = ''; 749 | document.getElementById('ruleList').innerHTML = ''; 750 | document.getElementById('ruleImport').value = ''; 751 | 752 | // 隐藏删除按钮 753 | document.getElementById('deleteAutoProxyBtn').classList.add('hidden'); 754 | 755 | // 填充默认代理下拉框 756 | populateProxyDropdown('defaultProxy'); 757 | populateProxyDropdown('ruleImportProxy'); 758 | 759 | // 清除编辑状态 760 | editingAutoProxyId = null; 761 | } 762 | 763 | // 隐藏自动代理表单 764 | function hideAutoProxyForm() { 765 | document.getElementById('autoProxyForm').classList.add('hidden'); 766 | document.getElementById('welcomeMessage').classList.remove('hidden'); 767 | editingAutoProxyId = null; 768 | } 769 | 770 | // 编辑自动切换规则 771 | function editAutoProxy(proxyId) { 772 | const config = proxyConfigs[proxyId]; 773 | if (!config || config.type !== 'auto') return; 774 | 775 | // 设置当前编辑的自动代理ID 776 | editingAutoProxyId = proxyId; 777 | 778 | toggleProxyFormGroupDisplay(true); 779 | 780 | // 隐藏其他表单，显示自动代理表单 781 | document.getElementById('proxyForm').classList.add('hidden'); 782 | document.getElementById('welcomeMessage').classList.add('hidden'); 783 | document.getElementById('autoProxyForm').classList.remove('hidden'); 784 | 785 | // 填充表单数据 786 | document.getElementById('autoProxyName').value = config.name || ''; 787 | 788 | // 填充默认代理下拉框 789 | populateProxyDropdown('defaultProxy'); 790 | populateProxyDropdown('ruleImportProxy'); 791 | 792 | // 设置默认代理 793 | document.getElementById('defaultProxy').value = config.defaultProxy || 'direct'; 794 | 795 | // 设置导入规则代理（如果存在） 796 | if (config.ruleImportProxy) { 797 | document.getElementById('ruleImportProxy').value = config.ruleImportProxy; 798 | } 799 | 800 | // 清空规则列表 801 | document.getElementById('ruleList').innerHTML = ''; 802 | 803 | // 添加规则 804 | if (config.rules && Array.isArray(config.rules)) { 805 | config.rules.forEach(rule => { 806 | addRuleToList(rule); 807 | }); 808 | } 809 | 810 | // 显示删除按钮 811 | document.getElementById('deleteAutoProxyBtn').classList.remove('hidden'); 812 | } 813 | 814 | // 填充代理下拉框 815 | function populateProxyDropdown(selectId) { 816 | const select = document.getElementById(selectId); 817 | 818 | // 保存当前选中的值 819 | const currentValue = select.value; 820 | 821 | // 清除现有选项（保留第一个直接连接选项） 822 | while (select.options.length > 1) { 823 | select.remove(1); 824 | } 825 | 826 | // 添加代理选项 827 | for (const proxyId in proxyConfigs) { 828 | // alert(selectId+"添加代理选项"+proxyId) 829 | if (proxyId !== 'direct' && proxyConfigs[proxyId].type !== 'auto') { 830 | const option = document.createElement('option'); 831 | option.value = proxyId; 832 | option.textContent = proxyConfigs[proxyId].name; 833 | select.appendChild(option); 834 | } 835 | } 836 | 837 | // 尝试恢复之前选中的值 838 | if (currentValue && Array.from(select.options).some(opt => opt.value === currentValue)) { 839 | select.value = currentValue; 840 | } 841 | } 842 | 843 | // 保存规则 844 | function saveRule() { 845 | const pattern = document.getElementById('rulePattern').value; 846 | const proxyId = document.getElementById('ruleProxy').value; 847 | const matchType = document.getElementById('ruleMatchType').value; 848 | 849 | if (!pattern) { 850 | showToast('请输入URL模式', 'error'); 851 | return; 852 | } 853 | 854 | console.log('保存规则:', pattern, proxyId, matchType, '当前规则索引:', currentRuleIndex); 855 | 856 | if (currentRuleIndex >= 0) { 857 | // 更新现有规则 858 | const ruleItems = document.querySelectorAll('#ruleList .rule-item'); 859 | if (currentRuleIndex < ruleItems.length) { 860 | const ruleItem = ruleItems[currentRuleIndex]; 861 | ruleItem.dataset.pattern = pattern; 862 | ruleItem.dataset.proxyId = proxyId; 863 | ruleItem.dataset.matchType = matchType; 864 | 865 | const proxyName = proxyId === 'direct' ? '直接连接' : 866 | (proxyConfigs[proxyId] ? proxyConfigs[proxyId].name : '未知代理'); 867 | 868 | // 更新匹配类型图标 869 | const matchTypeIcon = matchType === 'host' ? '🏠' : '🔗'; 870 | ruleItem.querySelector('.rule-match-type').innerHTML = matchTypeIcon; 871 | ruleItem.querySelector('.rule-match-type').title = matchType === 'host' ? '主机名匹配' : 'URL匹配'; 872 | 873 | ruleItem.querySelector('.rule-pattern').textContent = pattern; 874 | ruleItem.querySelector('.rule-proxy').textContent = proxyName; 875 | 876 | showToast('规则已更新'); 877 | } 878 | } else { 879 | // 添加新规则 880 | addRuleToList({ 881 | pattern: pattern, 882 | proxyId: proxyId, 883 | matchType: matchType 884 | }); 885 | 886 | showToast('规则已添加'); 887 | } 888 | 889 | // 隐藏模态框 890 | hideRuleModal(); 891 | 892 | saveAutoProxyConfig() 893 | } 894 | 895 | // 保存自动切换规则 896 | function saveAutoProxyConfig() { 897 | try { 898 | const name = document.getElementById('autoProxyName').value.trim(); 899 | if (!name) { 900 | alert('请输入规则名称'); 901 | return; 902 | } 903 | 904 | // 获取默认代理 905 | const defaultProxy = document.getElementById('defaultProxy').value; 906 | 907 | // 获取导入规则代理 908 | const ruleImportProxy = document.getElementById('ruleImportProxy').value; 909 | 910 | // 获取规则列表 911 | const ruleItems = document.querySelectorAll('#ruleList .rule-item'); 912 | const rules = []; 913 | 914 | // 调试信息 915 | console.log('规则项数量:', ruleItems.length); 916 | 917 | ruleItems.forEach(item => { 918 | console.log('规则项:', item.dataset.pattern, item.dataset.proxyId, item.dataset.matchType); 919 | rules.push({ 920 | pattern: item.dataset.pattern, 921 | proxyId: item.dataset.proxyId, 922 | matchType: item.dataset.matchType || 'url' // 确保有默认值 923 | }); 924 | }); 925 | 926 | // 构建配置对象 927 | const config = { 928 | name: name, 929 | type: 'auto', 930 | defaultProxy: defaultProxy, 931 | ruleImportProxy: ruleImportProxy, // 保存导入规则代理设置 932 | rules: rules 933 | }; 934 | 935 | console.log('保存的自动代理配置:', config); 936 | 937 | // 禁用保存按钮，显示保存中状态 938 | const saveBtn = document.getElementById('saveAutoProxyBtn'); 939 | const originalText = saveBtn.textContent; 940 | saveBtn.textContent = '保存中...'; 941 | saveBtn.disabled = true; 942 | 943 | // 设置超时，防止长时间无响应 944 | const timeoutId = setTimeout(() => { 945 | saveBtn.textContent = originalText; 946 | saveBtn.disabled = false; 947 | alert('保存超时，请重试'); 948 | }, 5000); 949 | 950 | if (editingAutoProxyId) { 951 | // 更新现有配置 952 | chrome.runtime.sendMessage({ 953 | action: 'updateProxyConfig', 954 | proxyId: editingAutoProxyId, 955 | config: config 956 | }, function(response) { 957 | clearTimeout(timeoutId); 958 | saveBtn.textContent = originalText; 959 | saveBtn.disabled = false; 960 | 961 | if (chrome.runtime.lastError) { 962 | console.error('更新自动切换规则时出错:', chrome.runtime.lastError); 963 | showToast('保存失败: ' + chrome.runtime.lastError.message, 'error'); 964 | return; 965 | } 966 | 967 | if (response && response.success) { 968 | // 显示保存成功提示 969 | showToast('规则列表保存成功'); 970 | 971 | // 检查是否需要刷新当前激活的代理 972 | if (activeProxyId === editingAutoProxyId) { 973 | chrome.runtime.sendMessage({ 974 | action: 'setActiveProxy', 975 | proxyId: editingAutoProxyId 976 | }); 977 | } 978 | 979 | // 重新加载代理配置但不隐藏表单 980 | reloadProxyConfigsQuietly(); 981 | } else { 982 | showToast('保存失败: ' + (response ? response.error : '未知错误'), 'error'); 983 | } 984 | }); 985 | } else { 986 | // 添加新配置 987 | chrome.runtime.sendMessage({ 988 | action: 'addProxyConfig', 989 | config: config 990 | }, function(response) { 991 | clearTimeout(timeoutId); 992 | saveBtn.textContent = originalText; 993 | saveBtn.disabled = false; 994 | 995 | if (chrome.runtime.lastError) { 996 | console.error('添加自动切换规则时出错:', chrome.runtime.lastError); 997 | showToast('保存失败: ' + chrome.runtime.lastError.message, 'error'); 998 | return; 999 | } 1000 | 1001 | if (response && response.success) { 1002 | // 设置编辑模式为新创建的规则 1003 | editingAutoProxyId = response.proxyId; 1004 | 1005 | // 更新表单标题和删除按钮状态 1006 | document.getElementById('deleteAutoProxyBtn').classList.remove('hidden'); 1007 | 1008 | // 显示保存成功提示 1009 | showToast('规则列表创建成功'); 1010 | 1011 | // 重新加载代理配置但不隐藏表单 1012 | reloadProxyConfigsQuietly(); 1013 | } else { 1014 | showToast('保存失败: ' + (response ? response.error : '未知错误'), 'error'); 1015 | } 1016 | }); 1017 | } 1018 | } catch (error) { 1019 | console.error('保存过程中发生错误:', error); 1020 | showToast('保存失败: ' + error.message, 'error'); 1021 | } 1022 | } 1023 | 1024 | // 隐藏规则模态框 1025 | function hideRuleModal() { 1026 | const ruleModal = document.getElementById('ruleModal'); 1027 | ruleModal.classList.add('hidden'); 1028 | ruleModal.style.display = 'none'; 1029 | } 1030 | 1031 | // 删除自动切换规则 1032 | function deleteAutoProxyConfig() { 1033 | if (!editingAutoProxyId) return; 1034 | 1035 | if (confirm('确定要删除此自动切换规则吗？')) { 1036 | chrome.runtime.sendMessage({ 1037 | action: 'deleteProxyConfig', 1038 | proxyId: editingAutoProxyId 1039 | }, function(response) { 1040 | if (response.success) { 1041 | // 重新加载配置列表 1042 | loadProxyConfigs(); 1043 | 1044 | // 隐藏表单 1045 | hideAutoProxyForm(); 1046 | } else { 1047 | alert(response.error || '无法删除自动切换规则'); 1048 | } 1049 | }); 1050 | } 1051 | } 1052 | 1053 | // 显示添加规则模态框 1054 | function showAddRuleModal() { 1055 | console.log('显示添加规则模态框'); 1056 | 1057 | // 填充代理下拉框 1058 | populateProxyDropdown('ruleProxy'); 1059 | 1060 | // 清空输入 1061 | document.getElementById('rulePattern').value = ''; 1062 | 1063 | // 显示模态框 1064 | const ruleModal = document.getElementById('ruleModal'); 1065 | ruleModal.classList.remove('hidden'); 1066 | ruleModal.style.display = 'flex'; 1067 | 1068 | // 设置当前规则索引为-1（表示添加新规则） 1069 | currentRuleIndex = -1; 1070 | } 1071 | 1072 | // 重新加载代理配置而不影响界面状态 1073 | function reloadProxyConfigsQuietly() { 1074 | chrome.runtime.sendMessage({ action: 'getProxyConfigs' }, function(response) { 1075 | proxyConfigs = response.proxyConfigs; 1076 | const activeProxy = response.activeProxy; 1077 | activeProxyId = activeProxy; 1078 | 1079 | // 静默更新，不影响当前界面 1080 | console.log('静默更新代理配置完成'); 1081 | }); 1082 | } --------------------------------------------------------------------------------

切换代理

KProxy

添加代理

65 | 自动切换规则 66 | 67 |

支持的规则格式：

欢迎使用 KProxy

切换代理

添加代理

65 | 自动切换规则 66 | 删除 67 |

支持的规则格式：

欢迎使用 KProxy

导入代理配置

添加规则

65 | 自动切换规则 66 | 67 |