fix: custom seqta icon not displaying in most cases

manifest.json

@@ -37,6 +37,10 @@
     {
       "resources": ["src/seqta/ui/background/background.html"],
       "matches": ["*://*/*"]
+    },
+    {
+      "resources": ["*://*/*"],
+      "matches": ["*://*/*"]
     }
   ]
 }

package.json

@@ -23,8 +23,10 @@
   "license": "MIT",
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.23",
+    "@types/mime-types": "^2.1.4",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "eslint": "^8.56.0",
+    "mime-types": "^2.1.35",
     "parcel": "^2.11.0",
     "prettier": "^3.2.5",
     "process": "^0.11.10",

src/SEQTA.ts

@@ -4,7 +4,7 @@ import loading, { AppendLoadingSymbol } from './seqta/ui/Loading'
 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'
+import icon48 from './resources/icons/icon-48.png?base64'
 
 import Color from 'color'
 import MenuitemSVGKey from './seqta/content/MenuItemSVGKey.json'
@@ -39,7 +39,6 @@ export let MenuOptionsOpen = false
 let currentSelectedDate = new Date()
 let LessonInterval: any
 
-var NonSEQTAPage = false
 var IsSEQTAPage = false
 
 // This check is placed outside of the document load event due to issues with EP (https://github.com/BetterSEQTA/BetterSEQTA-Plus/issues/84)
@@ -75,10 +74,6 @@ async function init() {
       console.error(error)
     }
   }
-
-  if (!hasSEQTAText) {
-    NonSEQTAPage = true
-  }
 }
 
 function SetDisplayNone(ElementName: string) {
@@ -1952,7 +1947,7 @@ export async function loadHomePage() {
   }
 
   const icon = document.querySelector('link[rel*="icon"]')! as HTMLLinkElement
-  icon.href = browser.runtime.getURL(icon48)
+  icon.href = icon48
 
   currentSelectedDate = new Date()
 

src/declarations.d.ts

@@ -3,3 +3,28 @@ declare module '*.woff';
 declare module '*.scss';
 declare module '*.png';
 declare module '*.html';
+
+declare module "*.png?base64" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.jpg?base64" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.jpeg?base64" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.gif?base64" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.svg?base64" {
+  const value: string;
+  export default value;
+}

src/seqta/ui/colors/Manager.ts

@@ -4,14 +4,11 @@ import { lightenAndPaleColor } from './lightenAndPaleColor';
 import ColorLuminance from './ColorLuminance';
 import { settingsState } from '../../utils/listeners/SettingsState';
 
-import icon48 from '../../../resources/icons/icon-48.png';
-
 import darkLogo from '../../../resources/icons/betterseqta-light-full.png';
 import lightLogo from '../../../resources/icons/betterseqta-dark-full.png';
 
 // Helper functions
 const setCSSVar = (varName: any, value: any) => document.documentElement.style.setProperty(varName, value);
-const getChromeURL = (path: any) => browser.runtime.getURL(path);
 const applyProperties = (props: any) => Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
 
 
@@ -57,11 +54,6 @@ export function updateAllColors() {
   // Apply all the properties
   applyProperties({ ...commonProps, ...modeProps, ...dynamicProps });
 
-  // Set favicon, if storedSetting is provided
-  if (settingsState.DarkMode !== null) {
-    (document.querySelector('link[rel*=\'icon\']')! as HTMLLinkElement).href = getChromeURL(icon48);
-  }
-
   let alliframes = document.getElementsByTagName('iframe');
 
   for (let i = 0; i < alliframes.length; i++) {

vite.config.ts

@@ -1,5 +1,7 @@
-import { defineConfig } from 'vite';
+import { defineConfig, Plugin } from 'vite';
 import { join } from 'path';
+import fs from 'fs';
+import mime from 'mime-types';
 
 import manifest from './manifest.json';
 import firefoxManifest from './manifest.firefox.json';
@@ -11,8 +13,28 @@ import million from "million/compiler";
 
 const isFirefox = process.env.VITE_TARGET === 'firefox';
 
+const base64Loader = {
+  name: "base64-loader",
+  transform(_: any, id: string) {
+    const [filePath, query] = id.split("?");
+    if (query !== "base64") return null;
+
+    console.log('Converting: ', filePath);
+
+    const data = fs.readFileSync(filePath, { encoding: 'base64' });
+    const mimeType = mime.lookup(filePath);
+    const dataURL = `data:${mimeType};base64,${data}`;
+
+    // Print out first 40 chars for debugging
+    console.log('Converted: ', dataURL.slice(0, 40));
+
+    return `export default '${dataURL}';`;
+  },
+};
+
 const plugins = [
   react(),
+  base64Loader,
   million.vite({ auto: true }),
   //MillionLint.vite(), /* enable for testing and debugging performance */
   crx({