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/pnpm-lock.yaml

@@ -8,6 +8,9 @@ dependencies:
   '@types/chrome':
     specifier: ^0.0.246
     version: 0.0.246
+  '@types/webextension-polyfill':
+    specifier: ^0.10.7
+    version: 0.10.7
   framer-motion:
     specifier: ^10.16.4
     version: 10.16.12(react-dom@18.2.0)(react@18.2.0)
@@ -26,6 +29,9 @@ dependencies:
   tinycolor2:
     specifier: ^1.6.0
     version: 1.6.0
+  webextension-polyfill:
+    specifier: ^0.10.0
+    version: 0.10.0
 
 devDependencies:
   '@types/react':
@@ -709,6 +715,10 @@ packages:
     resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==}
     dev: true
 
+  /@types/webextension-polyfill@0.10.7:
+    resolution: {integrity: sha512-10ql7A0qzBmFB+F+qAke/nP1PIonS0TXZAOMVOxEUsm+lGSW6uwVcISFNa0I4Oyj0884TZVWGGMIWeXOVSNFHw==}
+    dev: false
+
   /@typescript-eslint/eslint-plugin@6.13.1(@typescript-eslint/parser@6.13.1)(eslint@8.55.0)(typescript@5.3.2):
     resolution: {integrity: sha512-5bQDGkXaxD46bPvQt08BUz9YSaO4S0fB1LB5JHQuXTfkGPI3+UUeS387C/e9jRie5GqT8u5kFTrMvAjtX4O5kA==}
     engines: {node: ^16.0.0 || >=18.0.0}
@@ -2249,6 +2259,10 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /webextension-polyfill@0.10.0:
+    resolution: {integrity: sha512-c5s35LgVa5tFaHhrZDnr3FpQpjj1BB+RXhLTYUxGqBVN460HkbM8TBtEqdXWbpTKfzwCcjAZVF7zXCYSKtcp9g==}
+    dev: false
+
   /which@2.0.2:
     resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
     engines: {node: '>= 8'}

interface/src/hooks/ThemeManagment.tsx

@@ -1,3 +1,4 @@
+import browser from 'webextension-polyfill'
 interface ThemeList {
   themes: string[];
   selectedTheme: string;
@@ -5,7 +6,7 @@ interface ThemeList {
 
 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",

pnpm-lock.yaml

@@ -1,7 +1,7 @@
 lockfileVersion: '6.0'
 
 settings:
-  autoInstallPeers: true
+  autoInstallPeers: false
   excludeLinksFromLockfile: false
 
 dependencies:
@@ -563,10 +563,8 @@ packages:
     hasBin: true
     dev: true
 
-  /ajv-formats@2.1.1(ajv@8.12.0):
+  /ajv-formats@2.1.1:
     resolution: {integrity: sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==}
-    peerDependencies:
-      ajv: ^8.0.0
     peerDependenciesMeta:
       ajv:
         optional: true
@@ -2057,7 +2055,7 @@ packages:
     dependencies:
       '@types/json-schema': 7.0.15
       ajv: 8.12.0
-      ajv-formats: 2.1.1(ajv@8.12.0)
+      ajv-formats: 2.1.1
       ajv-keywords: 5.1.0(ajv@8.12.0)
     dev: true
 

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) {