fix animatedbk

interface/package.json

@@ -11,12 +11,14 @@
   },
   "dependencies": {
     "@types/chrome": "^0.0.246",
+    "@types/webextension-polyfill": "^0.10.7",
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-best-gradient-color-picker": "2.2.24",
     "react-dom": "^18.2.0",
     "react-router-dom": "latest",
-    "tinycolor2": "^1.6.0"
+    "tinycolor2": "^1.6.0",
+    "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

interface/src/hooks/ThemeManagment.tsx

@@ -1,11 +1,12 @@
+import browser from 'webextension-polyfill'
 interface ThemeList {
   themes: string[];
   selectedTheme: string;
 }
 
 export const downloadTheme = async (themeName: string, themeURL: string) => {
   // send message to the background script
-  const response = await chrome.runtime.sendMessage({
+  const response = await browser.runtime.sendMessage({
     type: 'currentTab',
     info: 'DownloadTheme',
     body: {
@@ -19,7 +20,7 @@ export const downloadTheme = async (themeName: string, themeURL: string) => {
 
 export const setTheme = async (themeName: string, themeURL: string) => {
   // send message to the background script
-  const response = await chrome.runtime.sendMessage({
+  const response = await browser.runtime.sendMessage({
     type: 'currentTab',
     info: 'SetTheme',
     body: {
@@ -33,7 +34,7 @@ export const setTheme = async (themeName: string, themeURL: string) => {
 
 export const listThemes = async () => {
   // send message to the background script
-  const response: ThemeList = await chrome.runtime.sendMessage({
+  const response: ThemeList = await browser.runtime.sendMessage({
     type: 'currentTab',
     info: 'ListThemes'
   });
@@ -45,14 +46,14 @@ export const listThemes = async () => {
 }
 
 export const disableTheme = async () => {
-  await chrome.runtime.sendMessage({
+  await browser.runtime.sendMessage({
     type: 'currentTab',
     info: 'DisableTheme',
   });
 };
 
 export const deleteTheme = async (themeName: string) => {
-  await chrome.runtime.sendMessage({
+  await browser.runtime.sendMessage({
     type: 'currentTab',
     info: 'DeleteTheme',
     body: {

interface/src/hooks/settingsState.ts

@@ -1,4 +1,4 @@
-/*global chrome*/
+import browser from 'webextension-polyfill'
 import { useEffect, useMemo } from "react";
 import { SettingsProps } from "../types/SettingsProps";
 import { MainConfig, SettingsState } from "../types/AppProps";
@@ -12,7 +12,8 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
     RanOnce = true;
 
     // get the current settings state
-    chrome.storage.local.get(function(result: MainConfig) {
+    // @ts-expect-error idk js/ts wizardry
+    browser.storage.local.get().then().then(function(result: MainConfig) {
       setSettingsState({
         notificationCollector: result.notificationcollector,
         lessonAlerts: result.lessonalert,
@@ -43,7 +44,7 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
     "transparencyEffects": "transparencyEffects"
   }), []);
 
-  const storageChangeListener = (changes: chrome.storage.StorageChange) => {
+  const storageChangeListener = (changes: browser.Storage.StorageChange) => {
     for (const [key, { newValue }] of Object.entries(changes)) {
       if (key === "DarkMode") {
         if (key === "DarkMode" && newValue) {
@@ -66,14 +67,14 @@ const useSettingsState = ({ settingsState, setSettingsState }: SettingsProps) =>
   };
 
   useEffect(() => {
-    chrome.storage.onChanged.addListener(storageChangeListener);
+    browser.storage.onChanged.addListener(storageChangeListener);
     return () => {
-      chrome.storage.onChanged.removeListener(storageChangeListener);
+      browser.storage.onChanged.removeListener(storageChangeListener);
     };
   });
 
   const setStorage = (key: keyof MainConfig, value: any) => {
-    chrome.storage.local.set({ [key]: value });
+    browser.storage.local.set({ [key]: value });
   }
 
   useEffect(() => {

interface/src/main.tsx

@@ -4,7 +4,8 @@ import { HashRouter, Routes, Route } from 'react-router-dom';
 import './index.css';
 import { SettingsContextProvider } from './SettingsContext.js';
 import SettingsPage from './SettingsPage.js';
-const fontURL = chrome.runtime.getURL("fonts/IconFamily.woff");
+import browser from 'webextension-polyfill'
+const fontURL = browser.runtime.getURL("fonts/IconFamily.woff");
 
 const style = document.createElement("style");
 style.setAttribute("type", "text/css");

interface/src/pages/Settings.tsx

@@ -5,6 +5,8 @@ import PickerSwatch from '../components/PickerSwatch';
 import { SettingsList } from '../types/SettingsProps';
 import { useSettingsContext } from '../SettingsContext';
 
+import browser from 'webextension-polyfill'
+
 const Settings: React.FC = () => {
   const { settingsState, setSettingsState } = useSettingsContext();
 
@@ -51,7 +53,7 @@ const Settings: React.FC = () => {
     {
       title: "Edit Sidebar Layout",
       description: "Customise the sidebar layout.",
-      modifyElement: <button onClick={() => chrome.runtime.sendMessage({ type: 'currentTab', info: 'EditSidebar' })} className='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>Edit</button>
+      modifyElement: <button onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'EditSidebar' })} className='px-4 py-1 text-[0.75rem] dark:bg-[#38373D] bg-[#DDDDDD] dark:text-white rounded-md'>Edit</button>
     },
     {
       title: "Transparency Effects",

src/SEQTA.js

@@ -311,6 +311,10 @@ async function DeleteWhatsNew() {
 }
 
 export function CreateBackground() {
+  var bkCheck = document.getElementsByClassName('bg');
+  if (bkCheck.length !== 0) {
+    return;
+  }
   // Creating and inserting 3 divs containing the background applied to the pages
   var bklocation = document.getElementById('container');
   var menu = document.getElementById('menu');
@@ -336,10 +340,10 @@ export function RemoveBackground() {
   var bk3 = document.getElementsByClassName('bg3');
 
   if (bk.length == 0 || bk2.length == 0 || bk3.length == 0) return;
-
   bk[0].remove();
   bk2[0].remove();
   bk3[0].remove();
+  console.log('it deleted???')
 }
 
 export function waitForElm(selector) {