fix: crxjs plugin issues

src/background.ts

@@ -154,53 +154,10 @@ function SetStorageValue(object: any) {
   }
 }
 
-async function UpdateCurrentValues() {
-  try {
-    const items = await browser.storage.local.get();
-    const CurrentValues = items;
-
-    const NewValue = Object.assign({}, DefaultValues, CurrentValues);
-
-    function CheckInnerElement(element: any) {
-      for (let i in element) {
-        if (typeof element[i] === 'object') {
-          // @ts-expect-error
-          if (!Array.isArray(DefaultValues[i])) {
-            // @ts-expect-error
-            NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
-          } else {
-            // @ts-expect-error
-            const length = DefaultValues[i].length;
-            // @ts-expect-error
-            NewValue[i] = Object.assign({}, DefaultValues[i], CurrentValues[i]);
-            let NewArray = [];
-            for (let j = 0; j < length; j++) {
-              NewArray.push(NewValue[i][j]);
-            }
-            NewValue[i] = NewArray;
-          }
-        }
-      }
-    }
-
-    CheckInnerElement(DefaultValues);
-
-    if (items['customshortcuts']) {
-      NewValue['customshortcuts'] = items['customshortcuts'];
-    }
-
-    SetStorageValue(NewValue);
-    console.log('[BetterSEQTA+] Values updated successfully');
-  } catch (error) {
-    console.error('[BetterSEQTA+] Error updating values:', error);
-  }
-}
-
 browser.runtime.onInstalled.addListener(function (event) {
   browser.storage.local.remove(['justupdated']);
   browser.storage.local.remove(['data']);
 
-  UpdateCurrentValues();
   if ( event.reason == 'install', event.reason == 'update' ) {
     browser.storage.local.set({ justupdated: true });
   }

src/interface/components/themes/ThemeSelector.svelte

@@ -75,6 +75,7 @@
         await InstallTheme(result);
         await fetchThemes();
       } catch (error) {
+        console.error('Error parsing file:', error);
         alert('Error parsing file. Please upload a valid JSON theme file.');
       }
       tempTheme = null;
@@ -95,6 +96,11 @@
   onDestroy(() => {
     themeUpdates.removeListener(fetchThemes);
   })
+
+  $effect(() => {
+    if (!themes) return;
+    console.log(themes.selectedTheme);
+  })
 </script>
 
 <div
@@ -125,7 +131,7 @@
     {#if themes}
       {#each themes.themes as theme (theme.id)}
         <button
-          class="relative group w-full aspect-theme flex justify-center items-center rounded-xl transition ring-3 dark:ring-white ring-zinc-300 {theme.id === themes.selectedTheme ? 'dark:ring-2 ring-4' : 'ring-0'}"
+          class="relative group w-full aspect-theme flex justify-center items-center rounded-xl transition outline-2 outline-zinc-300 dark:outline-white {theme.id === themes.selectedTheme ? 'outline-4' : 'outline-0'}"
           onclick={() => handleThemeClick(theme)}
         >
           {#if isEditMode}

src/interface/main.ts

@@ -1,6 +1,7 @@
-import styles from "./index.css?inline"
+//import styles from "./index.css?inline"
 import { mount } from "svelte"
 import type { ComponentType } from "svelte"
+import './index.css'
 
 export default function renderSvelte(
   Component: ComponentType | any,
@@ -15,10 +16,5 @@ export default function renderSvelte(
     },
   })
 
-  const style = document.createElement("style")
-  style.setAttribute("type", "text/css")
-  style.innerHTML = styles
-  mountPoint.appendChild(style)
-  
   return app
 }

src/shadowDomUtils.ts

@@ -0,0 +1,59 @@
+const sheetsMap = new Map();
+export function updateStyle(id: string, content: string) {
+  let style = sheetsMap.get(id);
+  {
+    if (style && !(style instanceof HTMLStyleElement)) {
+      removeStyle(id);
+      style = undefined;
+    }
+    if (!style) {
+      style = document.createElement('style');
+      style.setAttribute('type', 'text/css');
+      style.innerHTML = content;
+      if (window.location.href.includes('chrome-extension://')) {
+        document.head.appendChild(style);
+      } else {
+        const root = document.getElementById('ExtensionPopup');
+
+        // if no root try again in a second
+        if (!root) {
+          setTimeout(() => updateStyle(id, content), 1000);
+          return;
+        }
+        const shadowEl = root?.shadowRoot;
+        shadowEl?.appendChild(style);
+      }
+    } else {
+      style.innerHTML = content;
+    }
+  }
+  sheetsMap.set(id, style);
+}
+
+export function removeStyle(id: string) {
+  const style = sheetsMap.get(id);
+  if (style) {
+    if (window.location.href.includes('chrome-extension://')) {
+      if (style instanceof CSSStyleSheet) {
+        (document as any).adoptedStyleSheets = (
+          document as any
+        ).adoptedStyleSheets.filter((s: any) => s !== style);
+      } else {
+        document.head.removeChild(style);
+      }
+    } else {
+      const root = document.getElementById('ExtensionPopup');
+      const shadowEl: any = root?.shadowRoot;
+      if (style instanceof CSSStyleSheet) {
+        if (shadowEl) {
+          shadowEl.adoptedStyleSheets = shadowEl.adoptedStyleSheets.filter(
+            (s: any) => s !== style,
+          );
+        }
+      } else if (shadowEl) {
+        shadowEl.removeChild(style);
+      }
+    }
+    sheetsMap.delete(id);
+  }
+}