fix: crxjs plugin issues

docs/README.md

@@ -43,7 +43,7 @@ If you need help with BetterSEQTA+, you can:
 
 - [Open an Issue](https://github.com/SeqtaLearning/betterseqta-plus/issues) - Report bugs or request features
 - [Join the Discord](https://discord.gg/YzmbnCDkat) - Chat with the community
-- [Email the Maintainers](mailto:betterseqta@example.com) - Contact the maintainers directly
+- [Email the Maintainers](mailto:betterseqta.plus@gmail.com) - Contact the maintainers directly
 
 ## Contributing to the Documentation
 

lib/patchPackage.ts

@@ -34,7 +34,6 @@ export function updateManifestPlugin(): PluginOption {
           }
 
           fs.watchFile(manifestPath, () => {
-            console.log('** watchFile **');
             try {
               const manifestContents = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
               if (manifestContents.web_accessible_resources?.some((resource: any) => resource.use_dynamic_url)) {

lib/shadowDom.ts

@@ -0,0 +1,27 @@
+import { Plugin } from "vite";
+
+export default function shadowDom(): Plugin {
+  return {
+    name: 'merge-css-shadow-dom',
+    enforce: 'post',
+    apply: 'serve',
+    transform(src, id) {
+      if (/\.(css).*$/.test(id)) {
+        const fn =
+          "import { updateStyle, removeStyle } from '@/shadowDomUtils.ts';\n";
+        let updatedSrc = fn + src;
+        updatedSrc = updatedSrc.replace(
+          '__vite__updateStyle(',
+          'updateStyle(',
+        );
+        updatedSrc = updatedSrc.replace(
+          '__vite__removeStyle(',
+          'removeStyle(',
+        );
+        return {
+          code: updatedSrc,
+        };
+      }
+    }
+  }
+}

lib/touchGlobalCSS.ts

@@ -0,0 +1,17 @@
+import fs from 'fs';
+
+export default function touchGlobalCSSPlugin() {
+  return {
+    name: 'touch-global-css',
+    handleHotUpdate({ modules }) {
+      // log all of the staticImportedUrls
+      const importers = modules[0]._clientModule.importers
+      importers.forEach((importer) => {
+        if (importer.file.includes('.css')) {
+          console.log("touching", importer.file)
+          fs.utimesSync(importer.file, new Date(), new Date())
+        }
+      })
+    }
+  };
+}

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);
+  }
+}

vite.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from 'vite';
-import { join, resolve } from 'path';
+import path, { join, resolve } from 'path';
-
+import fs from 'fs';
 import { updateManifestPlugin } from './lib/patchPackage';
 import { base64Loader } from './lib/base64loader';
 import type { BuildTarget } from './lib/types';
@@ -19,7 +19,8 @@ import { firefox } from './src/manifests/firefox';
 import { opera } from './src/manifests/opera';
 import { safari } from './src/manifests/safari';
 import { crx } from '@crxjs/vite-plugin';
-
+import shadowDom from './lib/shadowDom';
+import touchGlobalCSSPlugin from './lib/touchGlobalCSS';
 const targets: BuildTarget[] = [
   chrome, brave, edge, firefox, opera, safari
 ]
@@ -41,6 +42,8 @@ export default defineConfig(({ command }) => ({
       browser: mode.toLowerCase() === "firefox" ? "firefox" : "chrome"
     }),
     updateManifestPlugin(),
+    shadowDom(),
+    touchGlobalCSSPlugin(),
     ...(command === 'build' ? [ClosePlugin()] : [])
   ],
   root: resolve(__dirname, './src'),