improve million application

manifest.json

@@ -28,14 +28,5 @@
       "js": ["src/SEQTA.ts"],
       "run_at": "document_start"
     }
-  ],
-  "web_accessible_resources": [
-    {
-      "resources": [
-        "public/*",
-        "src/*"
-      ],
-      "matches": ["*://*/*"]
-    }
   ]
 }

package.json

@@ -7,7 +7,6 @@
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
-    
     "package": "rimraf ./dist/*.map && 7z a -tzip extension.zip ./dist/*"
   },
   "targets": {

src/SEQTA.ts

@@ -22,7 +22,7 @@ import browser from 'webextension-polyfill'
 import coursesicon from './seqta/icons/coursesIcon'
 import { delay } from "./seqta/utils/delay"
 import { enableCurrentTheme } from './seqta/ui/Themes'
-import iframeCSSURL from "./css/iframe.scss?raw"
+import iframeCSS from "./css/iframe.scss?raw"
 import { onError } from './seqta/utils/onError'
 import stringToHTML from './seqta/utils/stringToHTML'
 import { updateAllColors } from './seqta/ui/colors/Manager'
@@ -30,6 +30,7 @@ import { updateBgDurations } from './seqta/ui/Animation'
 import { SettingsResizer } from "./seqta/ui/SettingsResizer";
 import documentLoadCSS from './css/documentload.scss?inline'
 import injectedCSS from './css/injected.scss?inline'
+import popup from './interface/index.html?url'
 
 declare global {
   interface Window {
@@ -44,7 +45,6 @@ let UserInitalCode = ''
 let currentSelectedDate = new Date()
 let LessonInterval: any
 export let DarkMode: boolean
-let iframeCSS: string
 
 var MenuItemMutation = false
 var NonSEQTAPage = false
@@ -430,10 +430,6 @@ function removeThemeTagsFromNotices () {
 }
 
 async function updateIframesWithDarkMode(): Promise<void> {
-  if (iframeCSS === undefined) {
-    //iframeCSS = await (await fetch(iframeCSSURL)).text()
-    iframeCSS = iframeCSSURL
-  }
 
   // Load the CSS file to overwrite iFrame default CSS
   const cssLink = document.createElement('style')
@@ -913,7 +909,7 @@ function addExtensionSettings() {
   document.body.appendChild(extensionPopup)
 
   const extensionIframe: HTMLIFrameElement = document.createElement('iframe')
-  extensionIframe.src = `${browser.runtime.getURL('src/interface/index.html')}#settings/embedded`
+  extensionIframe.src = `${browser.runtime.getURL(popup)}#settings/embedded`
   extensionIframe.id = 'ExtensionIframe'
   extensionIframe.setAttribute('allowTransparency', 'true')
   extensionIframe.setAttribute('excludeDarkCheck', 'true')

src/interface/SettingsPage.tsx

@@ -2,12 +2,12 @@ import TabbedContainer from './components/TabbedContainer';
 import Settings from './pages/Settings';
 import logo from './assets/betterseqta-dark-full.png';
 import logoDark from './assets/betterseqta-light-full.png';
+import { SettingsContextProvider } from './SettingsContext';
 import Shortcuts from './pages/Shortcuts';
 import Picker from './components/Picker';
 import Themes from './pages/Themes';
 
 import browser from 'webextension-polyfill';
-import { memo } from 'react';
 
 interface SettingsPage {
   standalone: boolean;
@@ -30,16 +30,18 @@ const SettingsPage = ({ standalone }: SettingsPage) => {
   ];  
 
   return (
-    <div className={`flex flex-col w-[384px] shadow-2xl gap-2 bg-white ${ standalone ? '' : 'rounded-xl' } ${ standalone ? 'h-[600px]' : 'h-[100vh]' } overflow-clip dark:bg-zinc-800 dark:text-white`}>
+    <SettingsContextProvider>
-      <div className="grid border-b border-b-zinc-200/40 place-items-center">
+      <div className={`flex flex-col w-[384px] shadow-2xl gap-2 bg-white ${ standalone ? '' : 'rounded-xl' } ${ standalone ? 'h-[600px]' : 'h-[100vh]' } overflow-clip dark:bg-zinc-800 dark:text-white`}>
-        <img src={logo} className="w-4/5 dark:hidden" />
+        <div className="grid border-b border-b-zinc-200/40 place-items-center">
-        <img src={logoDark} className="hidden w-4/5 dark:block" />
+          <img src={logo} className="w-4/5 dark:hidden" />
-        <button onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' })} className="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700"></button>
+          <img src={logoDark} className="hidden w-4/5 dark:block" />
+          <button onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenChangelog' })} className="absolute w-8 h-8 text-lg rounded-xl font-IconFamily top-1 right-1 bg-zinc-100 dark:bg-zinc-700"></button>
+        </div>
+        <Picker />
+        <TabbedContainer tabs={tabs} />
       </div>
-      <Picker />
+    </SettingsContextProvider>
-      <TabbedContainer tabs={tabs} />
-    </div>
   );
 };
 
-export default memo(SettingsPage);
+export default SettingsPage;

src/interface/main.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { HashRouter, Routes, Route } from 'react-router-dom';
 import './index.css';
-import { SettingsContextProvider } from './SettingsContext.js';
 import SettingsPage from './SettingsPage.js';
 import browser from 'webextension-polyfill';
 import font from '../resources/fonts/IconFamily.woff'
@@ -36,13 +35,11 @@ const root = ReactDOM.createRoot(document.getElementById('ExtensionPopup')!);
 
 root.render(
   <React.StrictMode>
-    <SettingsContextProvider>
       <HashRouter>
         <Routes>
           <Route path="/settings" element={<SettingsPage standalone={true} />} />
           <Route path="/settings/embedded" element={<SettingsPage standalone={false} />} />
         </Routes>
       </HashRouter>
-    </SettingsContextProvider>
   </React.StrictMode>,
 );

src/interface/pages/Shortcuts.tsx

@@ -16,7 +16,7 @@ function formatUrl (inputUrl: string) {
   }
 }
 
-export default function Shortcuts() {
+function Shortcuts() {
   const { settingsState, setSettingsState } = useSettingsContext();
 
   const switchChange = (shortcutName: string, isOn: boolean): void => {
@@ -153,3 +153,5 @@ export default function Shortcuts() {
     </div>
   );
 }
+
+export default Shortcuts;

src/seqta/ui/ImageBackgrounds.ts

@@ -1,5 +1,6 @@
 import browser from 'webextension-polyfill';
 import { SettingsState } from '../../types/storage';
+import backgroundURL from './background/background.html?url'
 
 export async function appendBackgroundToUI() {
   const settings = await browser.storage.local.get() as SettingsState;
@@ -13,6 +14,6 @@ export async function appendBackgroundToUI() {
   background.id = 'background';
   background.classList.add('imageBackground');
   background.setAttribute('excludeDarkCheck', 'true');
-  background.src = browser.runtime.getURL('src/seqta/ui/background/background.html');
+  background.src = browser.runtime.getURL(backgroundURL);
   parent!.appendChild(background);
 }

src/seqta/ui/background/background.html

@@ -24,6 +24,6 @@
   <!-- Container for the media -->
   <div id="media-container"></div>
   
-  <script src="./background.ts"></script>
+  <script type="module" src="./background.ts"></script>
 </body>
 </html>

src/seqta/ui/background/background.ts

@@ -101,12 +101,17 @@ const main = async (): Promise<void> => {
   await updateBackground();
   
   // Listen for changes to local storage
-  window.addEventListener('storage', async (event) => {
+  try {
-    if (event.key === 'selectedBackground') {
+    window.addEventListener('storage', async (event) => {
-      await updateBackground();
+      if (event.key === 'selectedBackground') {
-    }
+        await updateBackground();
-  });
+      }
+    });
+  } catch (error) {
+    console.log('An error occurred:', error);
+  }
 };
 
+main()
 // Run the main function when the document is ready
-document.addEventListener('DOMContentLoaded', main);
+//document.addEventListener('DOMContentLoaded', main);

vite.config.ts

@@ -8,7 +8,12 @@ import { sentryVitePlugin } from "@sentry/vite-plugin";
 export default defineConfig({
   plugins: [
     react(),
-    million.vite({}),
+    million.vite({
+      auto: {
+        threshold: 0.005, // default: 0.1,
+        skip: [], // default []
+      }      
+    }),
     crx({ manifest }),
     sentryVitePlugin({
       org: process.env.SENTRY_ORG,