diff --git a/interface/index.html b/interface/index.html index b4b12537..2f1b4e8e 100644 --- a/interface/index.html +++ b/interface/index.html @@ -11,3 +11,4 @@ + diff --git a/interface/package.json b/interface/package.json index 7a7f2365..381e2b97 100644 --- a/interface/package.json +++ b/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", diff --git a/interface/pnpm-lock.yaml b/interface/pnpm-lock.yaml index 8a595000..7718c35e 100644 --- a/interface/pnpm-lock.yaml +++ b/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'} diff --git a/interface/src/hooks/ThemeManagment.tsx b/interface/src/hooks/ThemeManagment.tsx index 5bd45538..51c8bf5f 100644 --- a/interface/src/hooks/ThemeManagment.tsx +++ b/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: { diff --git a/interface/src/hooks/settingsState.ts b/interface/src/hooks/settingsState.ts index 2c5f6ffd..1bbdf309 100644 --- a/interface/src/hooks/settingsState.ts +++ b/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(() => { diff --git a/interface/src/main.tsx b/interface/src/main.tsx index 39082ae5..04114747 100644 --- a/interface/src/main.tsx +++ b/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"); diff --git a/interface/src/pages/Settings.tsx b/interface/src/pages/Settings.tsx index 13689a2d..fa6840f6 100644 --- a/interface/src/pages/Settings.tsx +++ b/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: + modifyElement: }, { title: "Transparency Effects", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d66654ef..2bac5a4a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,7 +1,7 @@ lockfileVersion: '6.0' settings: - autoInstallPeers: true + autoInstallPeers: false excludeLinksFromLockfile: false dependencies: @@ -570,10 +570,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 @@ -2064,7 +2062,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 diff --git a/public/backgrounds/background.html b/public/backgrounds/background.html index b7fd1faf..e6561a62 100644 --- a/public/backgrounds/background.html +++ b/public/backgrounds/background.html @@ -19,6 +19,7 @@ object-fit: cover; } + diff --git a/public/manifest.json b/public/manifest.json index e2b61f59..f823b0fb 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -76,4 +76,4 @@ "matches": ["*://*/*"] } ] -} +} \ No newline at end of file diff --git a/src/SEQTA.js b/src/SEQTA.js index d2559055..2016891b 100644 --- a/src/SEQTA.js +++ b/src/SEQTA.js @@ -1,5 +1,5 @@ /* eslint-disable no-inner-declarations */ -import browser from 'webextension-polyfill' +import browser from 'webextension-polyfill'; import { animate, spring, stagger } from 'motion'; import Color from 'color'; import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js'; @@ -220,7 +220,7 @@ function OpenWhatsNewPopup() { - + @@ -287,6 +287,7 @@ async function finishLoad() { console.log(err); } + const result = browser.storage.local.get(['justupdated']); function open (result) { if (result.justupdated && !document.getElementById('whatsnewbk')) { @@ -310,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'); @@ -335,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) { @@ -371,7 +376,6 @@ async function RunColourCheck(element) { element.contentDocument.documentElement.childNodes[1].style.color = 'white'; } } - export function GetCSSElement (file) { const cssFile = browser.runtime.getURL(file) const fileref = document.createElement('link') @@ -2202,6 +2206,7 @@ export function RemoveShortcutDiv(elements) { function AddCustomShortcutsToPage() { const result = browser.storage.local.get(['customshortcuts']) function open (result) { + var customshortcuts = Object.values(result)[0]; if (customshortcuts.length > 0) { document.getElementsByClassName('shortcut-container')[0].style.display = @@ -2324,6 +2329,7 @@ function SendHomePage() { // Adds the shortcuts to the shortcut container const result = browser.storage.local.get(['shortcuts']) function open (result) { + const shortcuts = Object.values(result)[0]; addShortcuts(shortcuts); } diff --git a/src/background.js b/src/background.js index 4a3d41c6..34372d13 100644 --- a/src/background.js +++ b/src/background.js @@ -1,3 +1,4 @@ + import browser from 'webextension-polyfill' import { onError } from './seqta/utils/onError.js'; export const openDB = () => { diff --git a/src/css/injected.scss b/src/css/injected.scss index cca22770..124891e8 100644 --- a/src/css/injected.scss +++ b/src/css/injected.scss @@ -426,7 +426,7 @@ td.colourBar { /* Provides space for the icon */ } #toolbar span:has(.search)::before { - content: ""; + content: "\eca5"; /* Unicode for the search icon */ position: absolute; left: 8px; @@ -1879,7 +1879,7 @@ body { align-items: center; } [data-label="inbox"] > .LabelList__name___-CHgq::before { - content: ""; + content: "\eb70"; /* Unicode for the search icon */ color: currentColor; font-size: 16px; @@ -1889,7 +1889,7 @@ body { pointer-events: none; } [data-label="outbox"] > .LabelList__name___-CHgq::before { - content: ""; + content: "\eca6"; /* Unicode for the search icon */ color: currentColor; font-size: 16px; @@ -1899,7 +1899,7 @@ body { pointer-events: none; } [data-label="starred"] > .LabelList__name___-CHgq::before { - content: ""; + content: "\ece8"; color: currentColor; font-size: 16px; margin-right: 8px; @@ -1908,7 +1908,7 @@ body { pointer-events: none; } [data-label="trash"] > .LabelList__name___-CHgq::before { - content: ""; + content: "\ed2c"; /* Unicode for the search icon */ color: currentColor; font-size: 16px; @@ -2739,7 +2739,7 @@ body:has(.outside-container:not(.hide)) #AddedSettings.tooltip:hover > .tooltipt cursor: pointer; } #whatsnewclosebutton::before { - content: ""; + content: "\ed8a"; color: currentColor; font-size: 24px; font-family: "IconFamily";