fix animatedbk

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",