Optimize the code and simplify the logic

package.json

@@ -1,7 +1,7 @@
 {
   "name": "proxyverse",
   "private": true,
-  "version": "0.9.0",
+  "version": "0.9.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/background.ts

@@ -10,4 +10,5 @@ async function initIndicator() {
 }
 
 
-initIndicator().catch(console.error)
+initIndicator().catch(console.error)
+chrome.proxy.onProxyError.addListener(console.warn)

src/components/ProfileConfig.vue

@@ -151,7 +151,7 @@ const loadProfile = async (profileID: string) => {
 
   profileFirstLoaded = true
   Object.assign(profileConfig, profile)
-  if (profileConfig.proxyRules.ftp || profileConfig.proxyRules.http || profileConfig.proxyRules.https) {
+  if (profileConfig.proxyType == 'proxy' && (profileConfig.proxyRules.ftp || profileConfig.proxyRules.http || profileConfig.proxyRules.https)) {
     showAdvanceConfig.value = true
   }
 }
@@ -168,7 +168,7 @@ onMounted(() => {
         <a-color-picker v-model="profileConfig.color" disabledAlpha showPreset format="hex" />
         <a-typography-text editable :defaultEditing="newProfileMode" v-model:editText="profileConfig.profileName">{{
           profileConfig.profileName
-          }}</a-typography-text>
+        }}</a-typography-text>
       </a-space>
     </template>
     <template #extra>

src/models/indicator.ts

@@ -1,18 +1,22 @@
+import { SystemProfile } from "./profile";
 import { ProxySetting } from "./proxy";
 
 export async function setIndicator(proxy: ProxySetting) {
   const curMode = proxy.setting.value?.mode
+  let profile = proxy.activeProfile
 
+  // overide profile
   switch (curMode) {
     case 'system':
-      return await setBadge('', '#000000')
-
+      profile = SystemProfile.SYSTEM
+      break
     case 'direct':
-      return await setBadge('DIRECT', '#7ad39e')
+      profile = SystemProfile.DIRECT
+      break
   }
 
-  if (proxy.activeProfile) {
-    await setBadge(proxy.activeProfile.profileName, proxy.activeProfile.color)
+  if (profile) {
+    await setBadge(profile.profileName, profile.color)
   }
 }
 

src/models/profile.ts

@@ -9,7 +9,13 @@ export type ProxyServer = (chrome.proxy.ProxyServer & {
   scheme: 'direct' | 'http' | 'https' | 'socks4' | 'socks5'
 })
 
-type ProxyConfigSimple = {
+type ProxyConfigMeta = {
+  profileID: string,
+  color: string,
+  profileName: string,
+}
+
+export type ProxyConfigSimple = ProxyConfigMeta & {
   proxyType: 'proxy' | 'pac',
   proxyRules: {
     default: ProxyServer,
@@ -21,12 +27,27 @@ type ProxyConfigSimple = {
   pacScript: chrome.proxy.PacScript
 }
 
-export type ProfileConfig = {
-  profileID: string,
-  color: string,
-  profileName: string,
+export type ProxyConfigPreset = ProxyConfigMeta & {
+  proxyType: 'system' | 'direct'
+}
+
+export type ProfileConfig = ProxyConfigSimple | ProxyConfigPreset
+
 
-} & (ProxyConfigSimple)
+export const SystemProfile: Record<string, ProfileConfig> = {
+  DIRECT: {
+    profileID: '367DEDBC-6750-4454-8321-4E4B088E20B1',
+    color: '#7ad39e',
+    profileName: 'DIRECT',
+    proxyType: 'direct'
+  },
+  SYSTEM: {
+    profileID: '4FDEF36F-F389-4AF3-9BBC-B2E01B3B09E6',
+    color: '#0000',
+    profileName: '', // no name needed for `system`
+    proxyType: 'system'
+  },
+}
 
 
 const keyProfileStorage = 'profiles'

src/models/proxy/index.ts

@@ -1,8 +1,6 @@
-import { ProfileConfig } from "../profile"
+import { ProfileConfig, SystemProfile } from "../profile"
 import { get, set } from "../store"
-import { SimpleProxyValue, genSimpleProxyCfg } from "./proxyRules"
-
-export type ProxyValue = SimpleProxyValue
+import { genSimpleProxyCfg } from "./proxyRules"
 
 export type ProxySetting = {
   activeProfile?: ProfileConfig
@@ -20,6 +18,15 @@ async function wrapProxySetting(setting: chrome.types.ChromeSettingGetResultDeta
     ret.activeProfile = await get<ProfileConfig>(keyActiveProfile) || undefined
   }
 
+  switch (setting.value?.mode) {
+    case 'system':
+      ret.activeProfile = SystemProfile.SYSTEM
+      break
+    case 'direct':
+      ret.activeProfile = SystemProfile.DIRECT
+      break
+  }
+
   return ret
 }
 
@@ -35,30 +42,30 @@ export function onCurrentProxySettingChanged(cb: (setting: ProxySetting) => void
   })
 }
 
-export async function setProxy(val: ProxyValue) {
-  switch (val) {
+export async function setProxy(val: ProfileConfig) {
+  switch (val.proxyType) {
     case 'system':
-    case 'direct':
-      await defaultSetProxy(genSimpleProxyCfg(val), val)
-      return
-  }
+      await defaultClearProxy()
+      break
 
-  switch (val.proxyType) {
+    case 'direct':
     case 'proxy':
     case 'pac':
-      await defaultSetProxy(genSimpleProxyCfg(val), val)
-      return
+      await defaultSetProxy(genSimpleProxyCfg(val))
+      break
   }
+
+  await set<ProfileConfig>(keyActiveProfile, val)
 }
 
 
-async function defaultSetProxy(cfg: chrome.proxy.ProxyConfig, meta: ProxyValue) {
+async function defaultSetProxy(cfg: chrome.proxy.ProxyConfig) {
   await chrome.proxy.settings.set({
     value: cfg,
     scope: "regular",
   })
+}
 
-  if (typeof meta != 'string' && meta.profileID) {
-    await set<ProfileConfig>(keyActiveProfile, meta)
-  }
+async function defaultClearProxy() {
+  await chrome.proxy.settings.clear({ scope: 'regular' })
 }

src/models/proxy/proxyRules.ts

@@ -1,29 +1,27 @@
 import { generate as generateJS } from 'escodegen'
 import { Program, FunctionDeclaration, Identifier, Statement, Literal, ReturnStatement, Expression, IfStatement, CallExpression, MemberExpression } from 'estree'
 import { IPv4, IPv6, isValidCIDR, parseCIDR } from "ipaddr.js";
-import { ProfileConfig, ProxyServer } from "../profile";
+import { ProxyConfigPreset, ProxyConfigSimple, ProxyServer } from "../profile";
 
-export type SimpleProxyValue = ProfileConfig | 'direct' | 'system'
 
-export function genSimpleProxyCfg(val: SimpleProxyValue): chrome.proxy.ProxyConfig {
-  switch (val) {
+export function genSimpleProxyCfg(val: ProxyConfigSimple | ProxyConfigPreset): chrome.proxy.ProxyConfig {
+  switch (val.proxyType) {
     case 'direct':
     case 'system':
-      return { mode: val }
-  }
+      return { mode: val.proxyType }
+
+    case 'pac':
+      return {
+        mode: 'pac_script',
+        pacScript: val.pacScript
+      }
 
-  switch (val.proxyType) {
     case 'proxy':
       if (containsDirectRules(val)) {
         // @ts-ignore
         return genComplexRuleForProfile(val)
       }
       return genFixServerRuleForProfile(val)
-    case 'pac':
-      return {
-        mode: 'pac_script',
-        pacScript: val.pacScript
-      }
   }
 
   // this case should never be happen
@@ -33,7 +31,7 @@ export function genSimpleProxyCfg(val: SimpleProxyValue): chrome.proxy.ProxyConf
 
 
 
-function genFixServerRuleForProfile(val: ProfileConfig): chrome.proxy.ProxyConfig {
+function genFixServerRuleForProfile(val: ProxyConfigSimple): chrome.proxy.ProxyConfig {
   const rules = val.proxyRules
   const ret: chrome.proxy.ProxyConfig & { rules: chrome.proxy.ProxyRules } = {
     mode: "fixed_servers",
@@ -57,7 +55,7 @@ function genFixServerRuleForProfile(val: ProfileConfig): chrome.proxy.ProxyConfi
   return ret
 }
 
-function containsDirectRules(val: ProfileConfig): boolean {
+function containsDirectRules(val: ProxyConfigSimple): boolean {
   return [
     val.proxyRules.default.scheme,
     val.proxyRules.ftp?.scheme,
@@ -66,7 +64,7 @@ function containsDirectRules(val: ProfileConfig): boolean {
   ].includes("direct")
 }
 
-function allDirectRules(val: ProfileConfig): boolean {
+function allDirectRules(val: ProxyConfigSimple): boolean {
   return [
     val.proxyRules.default.scheme,
     val.proxyRules.ftp?.scheme,
@@ -76,7 +74,7 @@ function allDirectRules(val: ProfileConfig): boolean {
 }
 
 
-function genComplexRuleForProfile(val: ProfileConfig & { proxyType: 'proxy' }): chrome.proxy.ProxyConfig {
+function genComplexRuleForProfile(val: ProxyConfigSimple & { proxyType: 'proxy' }): chrome.proxy.ProxyConfig {
   if (allDirectRules(val)) {
     return {
       mode: 'direct'
@@ -92,7 +90,7 @@ function genComplexRuleForProfile(val: ProfileConfig & { proxyType: 'proxy' }):
 }
 
 
-class SimplePacScriptForProfile<T extends ProfileConfig & { proxyType: 'proxy' }> {
+class SimplePacScriptForProfile<T extends ProxyConfigSimple & { proxyType: 'proxy' }> {
   private newIdentifier(name: string): Identifier {
     return {
       type: "Identifier",

src/pages/PopupPage.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { type RouteLocationRaw, useRouter } from 'vue-router';
 import ThemeSwitcher from '../components/controls/ThemeSwitcher.vue';
-import { ProfilesStorage, listProfiles } from '../models/profile';
+import { ProfilesStorage, listProfiles, SystemProfile, ProfileConfig } from '../models/profile';
 import { onMounted, ref, toRaw } from 'vue';
-import { type ProxyValue, setProxy, getCurrentProxySetting } from '../models/proxy';
+import { setProxy, getCurrentProxySetting } from '../models/proxy';
 import { Message } from '@arco-design/web-vue';
 import { transify } from '../models/i18n';
 
@@ -14,14 +14,6 @@ const selectedKeys = defineModel<string[]>()
 onMounted(async () => {
   profiles.value = await listProfiles();
   const proxy = await getCurrentProxySetting()
-  const curMode = proxy.setting.value?.mode
-  switch (curMode) {
-    case 'system':
-    case 'direct':
-      selectedKeys.value = [curMode]
-      return
-  }
-
   const profileID = proxy.activeProfile?.profileID
   if (profileID) {
     selectedKeys.value = [profileID]
@@ -35,7 +27,7 @@ const jumpTo = (to: RouteLocationRaw) => {
 }
 
 // actions
-const setProxyByProfile = async (val: ProxyValue) => {
+const setProxyByProfile = async (val: ProfileConfig) => {
   try {
     console.log(toRaw(val))
     await setProxy(toRaw(val))
@@ -57,13 +49,15 @@ const setProxyByProfile = async (val: ProxyValue) => {
     </a-layout-header>
     <a-layout-content class="profiles">
       <a-menu :selected-keys="selectedKeys">
-        <a-menu-item key="direct" @click.prevent="() => setProxyByProfile('direct')"
-          style="--indicator-color: rgb(var(--success-3))">
+        <a-menu-item :key="SystemProfile.DIRECT.profileID"
+          @click.prevent="() => setProxyByProfile(SystemProfile.DIRECT)"
+          :style="{ '--indicator-color': SystemProfile.DIRECT.color }">
           <template #icon><icon-swap /></template>
           {{ $t("mode_direct") }}
         </a-menu-item>
-        <a-menu-item key="system" @click.prevent="() => setProxyByProfile('system')"
-          style="--indicator-color: var(--color-border-4)">
+        <a-menu-item :key="SystemProfile.SYSTEM.profileID"
+          @click.prevent="() => setProxyByProfile(SystemProfile.SYSTEM)"
+          :style="{ '--indicator-color': SystemProfile.SYSTEM.color }">
           <template #icon><icon-desktop /></template>
           {{ $t("mode_system") }}
         </a-menu-item>

tests/models/proxy/proxyRules.test.ts

@@ -1,10 +1,10 @@
 import { describe, expect, test } from '@jest/globals';
 import { genSimpleProxyCfg } from "@/models/proxy/proxyRules.ts"
-import { ProfileConfig } from '@/models/profile';
+import { ProfileConfig, SystemProfile } from '@/models/profile';
 
 describe('testing genSimpleProxyCfg for direct and system', () => {
   test('proxy config mode', () => {
-    const cfg = genSimpleProxyCfg('direct')
+    const cfg = genSimpleProxyCfg(SystemProfile.DIRECT)
     expect(cfg.mode).toBe('direct');
   });
 });