diff --git a/docs/README.md b/docs/README.md index 87302c62..c98ac4f9 100644 --- a/docs/README.md +++ b/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 diff --git a/lib/patchPackage.ts b/lib/patchPackage.ts index df0ede8a..08dec9bb 100644 --- a/lib/patchPackage.ts +++ b/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)) { diff --git a/lib/shadowDom.ts b/lib/shadowDom.ts new file mode 100644 index 00000000..9eff7eea --- /dev/null +++ b/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, + }; + } + } + } +} \ No newline at end of file diff --git a/lib/touchGlobalCSS.ts b/lib/touchGlobalCSS.ts new file mode 100644 index 00000000..d01db686 --- /dev/null +++ b/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()) + } + }) + } + }; +} diff --git a/src/background.ts b/src/background.ts index f88e2369..3c3949f6 100644 --- a/src/background.ts +++ b/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 }); } diff --git a/src/interface/components/themes/ThemeSelector.svelte b/src/interface/components/themes/ThemeSelector.svelte index 9d490729..33d61b27 100644 --- a/src/interface/components/themes/ThemeSelector.svelte +++ b/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); + })
handleThemeClick(theme)} > {#if isEditMode} diff --git a/src/interface/main.ts b/src/interface/main.ts index 63ec7ce1..ac5ab2e5 100644 --- a/src/interface/main.ts +++ b/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 } diff --git a/src/shadowDomUtils.ts b/src/shadowDomUtils.ts new file mode 100644 index 00000000..5ab6339e --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 90ec170a..81e28270 100644 --- a/vite.config.ts +++ b/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'),