Fix the object clone issue, close #49

src/services/profile.ts

@@ -1,4 +1,5 @@
 import { Host, PacScript, SimpleProxyServer } from "@/adapters";
+import { deepClone } from "./utils";
 
 export type ProxyAuthInfo = {
   username: string;
@@ -103,7 +104,9 @@ export function onProfileUpdate(callback: (p: ProfilesStorage) => void) {
 }
 
 async function overwriteProfiles(profiles: ProfilesStorage) {
-  await Host.set(keyProfileStorage, profiles);
+  // Deep clone to remove any Proxy objects before saving
+  const clonedProfiles = deepClone(profiles);
+  await Host.set(keyProfileStorage, clonedProfiles);
   onProfileUpdateListeners.map((cb) => cb(profiles));
 }
 
@@ -115,14 +118,16 @@ async function overwriteProfiles(profiles: ProfilesStorage) {
  */
 export async function saveProfile(profile: ProxyProfile) {
   const data = await listProfiles();
-  data[profile.profileID] = profile;
+  // Deep clone the profile to remove any Proxy objects before saving
+  data[profile.profileID] = deepClone(profile);
   await overwriteProfiles(data);
 }
 
 export async function saveManyProfiles(profiles: ProxyProfile[]) {
   let data = await listProfiles();
   profiles.forEach((p) => {
-    data[p.profileID] = p;
+    // Deep clone each profile to remove any Proxy objects before saving
+    data[p.profileID] = deepClone(p);
   });
   await overwriteProfiles(data);
 }

src/services/proxy/index.ts

@@ -9,6 +9,7 @@ import {
 import { ProxySettingResultDetails } from "@/adapters";
 import { ProfileConverter } from "./profile2config";
 import { ProfileAuthProvider } from "./auth";
+import { deepClone } from "../utils";
 
 export type ProxySetting = {
   activeProfile?: ProxyProfile;
@@ -56,7 +57,8 @@ export async function setProxy(val: ProxyProfile) {
       break;
   }
 
-  await Host.set<ProxyProfile>(keyActiveProfile, val);
+  // Deep clone to remove any Proxy objects before saving
+  await Host.set<ProxyProfile>(keyActiveProfile, deepClone(val));
 }
 
 /**

src/services/utils.ts

@@ -0,0 +1,8 @@
+/**
+ * Deep clone an object to remove all Proxy objects (e.g., from Vue reactivity).
+ * This is necessary because chrome.storage and browser.storage use structured clone
+ * which cannot clone Proxy objects.
+ */
+export function deepClone<T>(obj: T): T {
+  return JSON.parse(JSON.stringify(obj));
+}