improve million application

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

@@ -99,14 +99,19 @@ const updateBackground = async (): Promise<void> => {
 // Main function to run on page load
 const main = async (): Promise<void> => {
   await updateBackground();
-
+  
   // Listen for changes to local storage
-  window.addEventListener('storage', async (event) => {
-    if (event.key === 'selectedBackground') {
-      await updateBackground();
-    }
-  });
+  try {
+    window.addEventListener('storage', async (event) => {
+      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);