From bc4924f22aff4517f6550ff26d3e2aa207e69cda Mon Sep 17 00:00:00 2001
From: Marvin Alexander Krebber <marvinkrebber@yahoo.de>
Date: Wed, 8 Jan 2025 22:24:55 +0100
Subject: [PATCH] fixed Storage, fixed changed datatyype, fixed deep object,
 fixed toRaw

---
 src/composables/useBrowserStorage.ts | 39 +++++++++++++++++-----------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/composables/useBrowserStorage.ts b/src/composables/useBrowserStorage.ts
index 1a05b13..039a66d 100644
--- a/src/composables/useBrowserStorage.ts
+++ b/src/composables/useBrowserStorage.ts
@@ -1,37 +1,46 @@
-import { ref, watch } from 'vue'
-
+import { ref, watch } from "vue"
 export function useBrowserSyncStorage<T>(key: string, defaultValue: T) {
   const data = ref<T>(defaultValue)
-
   // Initialize storage with the value from chrome.storage.sync
   chrome.storage.sync.get(key, (result) => {
-    if (result[key] !== undefined) {
+    if (
+      result?.[key] != undefined &&
+      typeof result[key] === typeof defaultValue
+    ) {
       data.value = result[key]
     }
   })
 
   // Watch for changes in the storage and update chrome.storage.sync
-  watch(data, (newValue) => {
-    chrome.storage.sync.set({ [key]: newValue })
-  })
-
+  watch(
+    data,
+    (newValue) => {
+      chrome.storage.sync.set({ [key]: toRaw(newValue) })
+    },
+    { deep: true },
+  )
   return data
 }
 
 export function useBrowserLocalStorage<T>(key: string, defaultValue: T) {
   const data = ref<T>(defaultValue)
-
   // Initialize storage with the value from chrome.storage.local
   chrome.storage.local.get(key, (result) => {
-    if (result[key] !== undefined) {
+    if (
+      result?.[key] != undefined &&
+      typeof result[key] === typeof defaultValue
+    ) {
       data.value = result[key]
     }
   })
 
-  // Watch for changes in the storage and update chrome.storage.sync
-  watch(data, (newValue) => {
-    chrome.storage.local.set({ [key]: newValue })
-  })
-
+  // Watch for changes in the storage and update chrome.storage.local
+  watch(
+    data,
+    (newValue) => {
+      chrome.storage.local.set({ [key]: toRaw(newValue) })
+    },
+    { deep: true },
+  )
   return data
 }