refac: improve multi browser support

src/SEQTA.ts

@@ -5,42 +5,36 @@ import browser from 'webextension-polyfill'
 import { animate, spring, stagger } from 'motion'
 
 // Internal utilities and functions
-import { delay } from './seqta/utils/delay'
-import stringToHTML from './seqta/utils/stringToHTML'
-import { MessageHandler } from './seqta/utils/listeners/MessageListener'
-import { initializeSettingsState, settingsState } from './seqta/utils/listeners/SettingsState'
-import { StorageChangeHandler } from './seqta/utils/listeners/StorageChanges'
-import { eventManager } from './seqta/utils/listeners/EventManager'
+import { delay } from '@/seqta/utils/delay'
+import stringToHTML from '@/seqta/utils/stringToHTML'
+import { MessageHandler } from '@/seqta/utils/listeners/MessageListener'
+import { initializeSettingsState, settingsState } from '@/seqta/utils/listeners/SettingsState'
+import { StorageChangeHandler } from '@/seqta/utils/listeners/StorageChanges'
+import { eventManager } from '@/seqta/utils/listeners/EventManager'
 
 // UI and theme management
-import loading, { AppendLoadingSymbol } from './seqta/ui/Loading'
-import { enableCurrentTheme } from './seqta/ui/themes/enableCurrent'
-import { updateAllColors } from './seqta/ui/colors/Manager'
-import { SettingsResizer } from './seqta/ui/SettingsResizer'
-import { AddBetterSEQTAElements } from './seqta/ui/AddBetterSEQTAElements'
+import loading, { AppendLoadingSymbol } from '@/seqta/ui/Loading'
+import { enableCurrentTheme } from '@/seqta/ui/themes/enableCurrent'
+import { updateAllColors } from '@/seqta/ui/colors/Manager'
+import { SettingsResizer } from '@/seqta/ui/SettingsResizer'
+import { AddBetterSEQTAElements } from '@/seqta/ui/AddBetterSEQTAElements'
 
 // JSON content
-import MenuitemSVGKey from './seqta/content/MenuItemSVGKey.json'
-import ShortcutLinks from './seqta/content/links.json'
+import MenuitemSVGKey from '@/seqta/content/MenuItemSVGKey.json'
+import ShortcutLinks from '@/seqta/content/links.json'
 
 // Icons and fonts
-import IconFamily from './resources/fonts/IconFamily.woff'
-import LogoLight from './resources/icons/betterseqta-light-icon.png'
-import LogoLightOutline from './resources/icons/betterseqta-light-outline.png'
-import icon48 from './resources/icons/icon-48.png?base64'
-import assessmentsicon from './seqta/icons/assessmentsIcon'
-import coursesicon from './seqta/icons/coursesIcon'
+import IconFamily from '@/resources/fonts/IconFamily.woff'
+import LogoLight from '@/resources/icons/betterseqta-light-icon.png'
+import LogoLightOutline from '@/resources/icons/betterseqta-light-outline.png'
+import icon48 from '@/resources/icons/icon-48.png?base64'
+import assessmentsicon from '@/seqta/icons/assessmentsIcon'
+import coursesicon from '@/seqta/icons/coursesIcon'
 
 // Stylesheets
-import iframeCSS from './css/iframe.scss?raw'
-import injectedCSS from './css/injected.scss?inline'
-import documentLoadCSS from './css/documentload.scss?inline'
-
-declare global {
-  interface Window {
-    chrome?: any
-  }
-}
+import iframeCSS from '@/css/iframe.scss?raw'
+import injectedCSS from '@/css/injected.scss?inline'
+import documentLoadCSS from '@/css/documentload.scss?inline'
 
 let SettingsClicked = false
 export let MenuOptionsOpen = false
@@ -66,7 +60,7 @@ async function init() {
 
     const icon = document.querySelector('link[rel*="icon"]')! as HTMLLinkElement
     icon.href = icon48
-    
+
     try {
       // wait until settingsState has been loaded from storage
       await initializeSettingsState();
@@ -975,7 +969,7 @@ export function addExtensionSettings() {
   if (extensionContainer) extensionContainer.appendChild(extensionPopup)
 
   const extensionIframe: HTMLIFrameElement = document.createElement('iframe')
-  extensionIframe.src = `${browser.runtime.getURL('src/interface/index.html')}#settings/embedded`
+  extensionIframe.src = `${browser.runtime.getURL('interface/index.html')}#settings/embedded`
   extensionIframe.id = 'ExtensionIframe'
   extensionIframe.setAttribute('allowTransparency', 'true')
   extensionIframe.setAttribute('excludeDarkCheck', 'true')

src/interface/components/ThemeSelector.tsx

@@ -245,13 +245,14 @@ const ThemeSelector: ForwardRefExoticComponent<Omit<ThemeSelectorProps, "ref"> &
           className="w-full h-[1px] my-2 bg-zinc-100 dark:bg-zinc-600"
         ></div>}
 
-        <button
-          onClick={() => browser.tabs.create({ url: browser.runtime.getURL('src/interface/index.html#store')})}
+        <a
+          href={browser.runtime.getURL('interface/index.html#store')}
+          target="_blank"
           className="flex items-center justify-center w-full transition aspect-theme rounded-xl bg-zinc-100 dark:bg-zinc-900 dark:text-white"
         >
           <span className="text-xl font-IconFamily">{'\uecc5'}</span>
           <span className="ml-2">Theme Store</span>
-        </button>
+        </a>
 
         <button
           onClick={() => browser.runtime.sendMessage({ type: 'currentTab', info: 'OpenThemeCreator' })}

src/interface/index.css

@@ -14,4 +14,8 @@
 
 ::-webkit-scrollbar {
   display: none;
+}
+
+button, a {
+  @apply text-[0.875rem];
 }

src/manifests/brave.ts

@@ -0,0 +1,4 @@
+import { createManifest } from '../../lib/createManifest'
+import baseManifest from './manifest.json'
+
+export const brave = createManifest(baseManifest, 'brave')

src/manifests/chrome.ts

@@ -0,0 +1,4 @@
+import { createManifest } from '../../lib/createManifest'
+import baseManifest from './manifest.json'
+
+export const chrome = createManifest(baseManifest, 'chrome')

src/manifests/edge.ts

@@ -0,0 +1,4 @@
+import { createManifest } from '../../lib/createManifest'
+import baseManifest from './manifest.json'
+
+export const edge = createManifest(baseManifest, 'edge')

src/manifests/firefox.ts

@@ -0,0 +1,20 @@
+import { createManifest } from '../../lib/createManifest'
+import baseManifest from './manifest.json'
+import pkg from '../../package.json'
+
+const updatedFirefoxManifest = {
+  ...baseManifest,
+  background: {
+    scripts: [baseManifest.background.service_worker],
+  },
+  action: {
+    "default_popup": "interface/index.html#settings",
+  },
+  browser_specific_settings: {
+    gecko: {
+      id: pkg.author.email,
+    },
+  }
+}
+
+export const firefox = createManifest(updatedFirefoxManifest, 'firefox')

src/manifests/manifest.json

@@ -0,0 +1,46 @@
+{
+  "manifest_version": 3,
+  "name": "BetterSEQTA+",
+  "version": "3.3.1",
+  "description": "Enhance SEQTA Learn's usability and aesthetics! A fork of BetterSEQTA to continue development add add heaps more features!",
+  "icons": {
+    "32": "resources/icons/icon-32.png",
+    "48": "resources/icons/icon-48.png",
+    "64": "resources/icons/icon-64.png"
+  },
+  "action": {
+    "browser_style": true,
+    "default_popup": "interface/index.html#settings",
+    "default_icon": {
+      "32": "resources/icons/icon-32.png",
+      "48": "resources/icons/icon-48.png",
+      "64": "resources/icons/icon-64.png"
+    }
+  },
+  "permissions": ["tabs", "notifications", "storage"],
+  "host_permissions": ["https://newsapi.org/", "*://*/*"],
+  "background": {
+    "service_worker": "background.ts"
+  },
+  "content_scripts": [
+    {
+      "matches": ["*://*/*"],
+      "js": ["SEQTA.ts"],
+      "run_at": "document_start"
+    }
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": ["interface/index.html"],
+      "matches": ["*://*/*"]
+    },
+    {
+      "resources": ["seqta/ui/background/background.html"],
+      "matches": ["*://*/*"]
+    },
+    {
+      "resources": ["*://*/*"],
+      "matches": ["*://*/*"]
+    }
+  ]
+}

src/manifests/opera.ts

@@ -0,0 +1,4 @@
+import { createManifest } from '../../lib/createManifest'
+import baseManifest from './manifest.json'
+
+export const opera = createManifest(baseManifest, 'opera')

src/manifests/safari.ts

@@ -0,0 +1,16 @@
+import { createManifest } from '../../lib/createManifest'
+import baseManifest from './manifest.json'
+
+const updatedSafariManifest = {
+  ...baseManifest,
+  browser_specific_settings: {
+    safari: {
+      strict_min_version: '15.4',
+      strict_max_version: '*',
+    },
+    // ^^^ https://developer.apple.com/documentation/safariservices/safari_web_extensions/optimizing_your_web_extension_for_safari#3743239
+    //     https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings#safari_properties
+  },
+}
+
+export const safari = createManifest(updatedSafariManifest, 'safari')

src/seqta/ui/ImageBackgrounds.ts

@@ -8,6 +8,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('seqta/ui/background/background.html');
   parent!.appendChild(background);
 }

src/seqta/ui/ThemeCreator.ts

@@ -11,7 +11,7 @@ export function OpenThemeCreator( themeID: string = '' ) {
   const width = '310px';
 
   const themeCreatorIframe: HTMLIFrameElement = document.createElement('iframe');
-  themeCreatorIframe.src = `${browser.runtime.getURL('src/interface/index.html')}${ themeID != '' ? `?themeID=${themeID}` : '' }#themeCreator`;
+  themeCreatorIframe.src = `${browser.runtime.getURL('interface/index.html')}${ themeID != '' ? `?themeID=${themeID}` : '' }#themeCreator`;
   themeCreatorIframe.id = 'themeCreatorIframe';
   themeCreatorIframe.setAttribute('allowTransparency', 'true');
   themeCreatorIframe.setAttribute('excludeDarkCheck', 'true');

src/seqta/utils/listeners/SettingsState.ts

@@ -93,7 +93,7 @@ class StorageManager {
   /**
    * Register a listener for a setting.
    * @param prop The setting to listen to.
-   * @param listener The listener to call when the setting changes.
+   * @param listener The listener to call when the setting changes -> takes two arguments, (newValue, oldValue)
    */
   public register(prop: keyof SettingsState, listener: ChangeListener): void {
     if (!this.listeners[prop]) {

src/seqta/utils/listeners/StorageChanges.ts

@@ -36,7 +36,8 @@ export class StorageChangeHandler {
     updateAllColors();
   }
 
-  private handleOnOffChange() {
+  private handleOnOffChange(newValue: boolean) {
+    if (newValue) return;
     browser.runtime.sendMessage({ type: 'reloadTabs' });
   }