From c6650a356ed9ee3c480b5689b0eddd79eccf1bf9 Mon Sep 17 00:00:00 2001 From: sethburkart123 Date: Wed, 19 Jun 2024 18:17:57 +1000 Subject: [PATCH] fix: custom seqta icon not displaying in most cases --- manifest.json | 4 ++++ package.json | 2 ++ src/SEQTA.ts | 9 ++------- src/declarations.d.ts | 25 +++++++++++++++++++++++++ src/seqta/ui/colors/Manager.ts | 8 -------- vite.config.ts | 24 +++++++++++++++++++++++- 6 files changed, 56 insertions(+), 16 deletions(-) diff --git a/manifest.json b/manifest.json index 1a33e64f..9e00727f 100644 --- a/manifest.json +++ b/manifest.json @@ -37,6 +37,10 @@ { "resources": ["src/seqta/ui/background/background.html"], "matches": ["*://*/*"] + }, + { + "resources": ["*://*/*"], + "matches": ["*://*/*"] } ] } diff --git a/package.json b/package.json index 8eb515b4..253bf483 100644 --- a/package.json +++ b/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", diff --git a/src/SEQTA.ts b/src/SEQTA.ts index b9b2bc32..6975c475 100644 --- a/src/SEQTA.ts +++ b/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() diff --git a/src/declarations.d.ts b/src/declarations.d.ts index 7a800f22..b1be1eea 100644 --- a/src/declarations.d.ts +++ b/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; +} \ No newline at end of file diff --git a/src/seqta/ui/colors/Manager.ts b/src/seqta/ui/colors/Manager.ts index 039b55c0..4efa11b5 100644 --- a/src/seqta/ui/colors/Manager.ts +++ b/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++) { diff --git a/vite.config.ts b/vite.config.ts index a04fd623..93b04044 100644 --- a/vite.config.ts +++ b/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({