Merge pull request #83 from BetterSEQTA/vite-dev

Change build tool to parcel

.eslintrc.json

@@ -10,5 +10,22 @@
     "ecmaVersion": "latest",
     "sourceType": "module" // add this line to allow 'import' and 'export' statements
   },
-  "rules": {}
+  "rules": {
+    // allow importing ts extensions
+    "sort-imports": ["error", {
+      "ignoreCase": true,
+      "ignoreDeclarationSort": true,
+      "ignoreMemberSort": false,
+      "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
+    }],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ]
+  }
 }

.github/workflows/testing.yml

@@ -1,4 +1,4 @@
-name: NodeJS with Webpack
+name: NodeJS Testing
 
 on:
   push:
@@ -12,7 +12,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [20.x]
 
     steps:
     - uses: actions/checkout@v3
@@ -24,9 +24,5 @@ jobs:
 
     - name: Build
       run: |
-        cd interface
         npm install
-        npm run build
+        npm run build
-        cd ..
-        npm install
-        npm run build

.gitignore

@@ -2,6 +2,10 @@
 node_modules/
 package-lock.json
 bun.lockb
+pnpm-lock.yaml
+yarn.lock
+
+.parcel-cache
 
 # Build
 package.zip

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "tailwindcss": {}
+  }
+}

.prettierrc

@@ -1,4 +1,5 @@
 {
   "tabWidth": 2,
-  "useTabs": false
+  "useTabs": false,
+  "semi": false
 }

firefox/manifest.json

@@ -0,0 +1,37 @@
+{
+  "manifest_version": 2,
+  "name": "BetterSEQTA+",
+  "version": "3.2.2",
+  "description": "Make SEQTA usable and beautiful! A fork of BetterSEQTA to continue development and add WAY more features!!!",
+  "icons": {
+    "32": "../src/resources/icons/icon-32.png",
+    "48": "../src/resources/icons/icon-48.png",
+    "64": "../src/resources/icons/icon-64.png"
+  },
+  "browser_action": {
+    "browser_style": true,
+    "default_popup": "../src/interface/index.html#settings",
+    "default_icon": {
+      "32": "../src/resources/icons/icon-32.png",
+      "48": "../src/resources/icons/icon-48.png",
+      "64": "../src/resources/icons/icon-64.png"
+    }
+  },
+  "permissions": ["tabs", "notifications", "storage", "https://newsapi.org/"],
+  "background": {
+    "scripts": [
+      "../src/background.ts"
+    ]
+  },
+  "content_scripts": [
+    {
+      "matches": ["*://*/*"],
+      "js": ["../src/SEQTA.ts"],
+      "run_at": "document_start"
+    }
+  ],
+  "web_accessible_resources": [
+    "../src/*",
+    "../public/*"
+  ]
+}

interface/.eslintrc.cjs

@@ -1,26 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-  overrides: [
-    {
-      files: ['*.ts', '*.tsx'],
-      rules: {
-        '@typescript-eslint/no-explicit-any': 'off',
-      },
-    },
-  ],
-}

interface/.gitignore

@@ -1,9 +0,0 @@
-
-# Sentry Config File
-.env.sentry-build-plugin
-
-# Sentry Config File
-.env.sentry-build-plugin
-
-# Sentry Config File
-.env.sentry-build-plugin

interface/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "popup",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite build --watch",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@sentry/react": "^7.85.0",
-    "@sentry/vite-plugin": "^2.10.2",
-    "@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",
-    "webextension-polyfill": "^0.10.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "autoprefixer": "^10.4.15",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "postcss": "^8.4.29",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
-  }
-}

interface/postcss.config.js

@@ -1,9 +0,0 @@
-import tailwindcss from "tailwindcss";
-import autoprefixer from "autoprefixer";
-
-export default {
-  plugins: [
-    tailwindcss,
-    autoprefixer,
-  ],
-};

interface/tailwind.config.js

@@ -1,37 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  darkMode: "class",
-  theme: {
-    fontSize: {
-      "xs": ".65rem",
-      "sm": ".775rem",
-      "base": "0.65rem",
-      "md": "0.65rem",
-      "lg": "1rem",
-      "xl": "1.25rem",
-      "2xl": "1.5rem",
-      "3xl": "1.875rem",
-      "4xl": "2.25rem",
-      "5xl": "3rem",
-      "6xl": "4rem",
-      "7xl": "5rem",
-      "8xl": "6rem",
-      "9xl": "8rem",
-      "10xl": "10rem",
-      "11xl": "12rem",
-      "12xl": "14rem",
-      "13xl": "16rem",
-      "14xl": "18rem",
-    },
-    extend: {
-      fontFamily: {
-        "IconFamily": "IconFamily"
-      }
-    }
-  },
-  plugins: [],
-};

interface/tsconfig.json

@@ -1,24 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,    
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"]
-}

interface/vite.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vite").UserConfig;
-export default _default;

interface/vite.config.ts

@@ -1,23 +0,0 @@
-import { sentryVitePlugin } from "@sentry/vite-plugin";
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [react(), sentryVitePlugin({
-    org: "betterseqta-plus",
-    project: "betterseqtaplus-popup"
-  })],
-  build: {
-    //outDir: '../../public/popup-dist',
-    rollupOptions: {
-      output: {
-        assetFileNames: 'client/rsc/[ext]/[name][extname]',
-        chunkFileNames: 'client/rsc/[chunks]/[name].[hash].js',
-        entryFileNames: 'client/public/client.js'
-      }
-    },
-
-    sourcemap: true
-  }
-})

manifest.json

@@ -0,0 +1,42 @@
+{
+  "manifest_version": 3,
+  "name": "BetterSEQTA+",
+  "version": "3.2.2",
+  "description": "Make SEQTA usable and beautiful! A fork of BetterSEQTA to continue development and add WAY more features!!!",
+  "icons": {
+    "32": "src/resources/icons/icon-32.png",
+    "48": "src/resources/icons/icon-48.png",
+    "64": "src/resources/icons/icon-64.png"
+  },
+  "action": {
+    "browser_style": true,
+    "default_popup": "src/interface/index.html#settings",
+    "default_icon": {
+      "32": "src/resources/icons/icon-32.png",
+      "48": "src/resources/icons/icon-48.png",
+      "64": "src/resources/icons/icon-64.png"
+    }
+  },
+  "permissions": ["tabs", "notifications", "storage"],
+  "host_permissions": ["https://newsapi.org/", "*://*/*"],
+  "background": {
+    "service_worker": "src/background.ts",
+    "type": "module"
+  },
+  "content_scripts": [
+    {
+      "matches": ["*://*/*"],
+      "js": ["src/SEQTA.ts"],
+      "run_at": "document_start"
+    }
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "public/*",
+        "src/*"
+      ],
+      "matches": ["*://*/*"]
+    }
+  ]
+}

package.json

@@ -3,51 +3,72 @@
   "version": "3.2.2",
   "type": "module",
   "description": "BetterSEQTA+ is a browser extension that adds features to SEQTA.",
-  "main": "webpack.config.js",
   "scripts": {
-    "build": "webpack --config webpack.config.js --mode production && sh ./package.sh",
+    "dev": "parcel watch manifest.json --host localhost --config @parcel/config-webextension --no-hmr --no-content-hash",
-    "dev": "webpack --config webpack.config.js --watch --mode development",
+    "build": "parcel build manifest.json --config @parcel/config-webextension --no-content-hash --no-cache",
-    "eslint": "eslint --fix ."
+    "dev-firefox": "parcel watch firefox/manifest.json --host localhost --config @parcel/config-webextension --no-hmr --no-content-hash",
+    "build-firefox": "parcel build firefox/manifest.json --config @parcel/config-webextension --no-content-hash --no-cache",
+    "eslint": "eslint --fix .",
+    "package": "7z a -tzip extension.zip ./build/*"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
-    "copy-webpack-plugin": "^11.0.0",
+    "@parcel/config-webextension": "^2.11.0",
-    "css-loader": "^6.8.1",
+    "@parcel/optimizer-data-url": "^2.11.0",
-    "dompurify": "^3.0.5",
+    "@parcel/transformer-inline-string": "^2.11.0",
+    "@parcel/transformer-sass": "2.11.0",
+    "assert": "^2.0.0",
+    "browserify-zlib": "^0.2.0",
+    "crypto-browserify": "^3.12.0",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-webpack-plugin": "^4.0.1",
-    "file-loader": "^6.2.0",
+    "https-browserify": "^1.0.0",
-    "mini-css-extract-plugin": "^2.7.6",
+    "os-browserify": "^0.3.0",
-    "prettier": "3.0.2",
+    "parcel": "^2.10.3",
+    "path-browserify": "^1.0.0",
+    "prettier": "^3.2.2",
+    "process": "^0.11.10",
+    "querystring-es3": "^0.2.1",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.1.0",
     "style-loader": "^3.3.3",
-    "webextension-polyfill": "^0.10.0",
+    "tty-browserify": "^0.0.1",
-    "webpack": "^5.88.2",
+    "url": "^0.11.0",
-    "webpack-cli": "^5.1.4"
+    "util": "^0.12.3",
+    "yarn": "^1.22.21"
   },
   "dependencies": {
     "@sentry/browser": "^7.85.0",
+    "@sentry/react": "^7.88.0",
     "@sentry/webpack-plugin": "^2.10.2",
     "@types/color": "^3.0.4",
     "@types/dompurify": "^3.0.5",
     "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.18",
     "@types/sortablejs": "^1.15.7",
     "@types/webextension-polyfill": "^0.10.7",
     "autoprefixer": "^10.4.15",
     "color": "^4.2.3",
+    "dompurify": "^3.0.8",
+    "framer-motion": "^10.16.16",
     "install": "^0.13.0",
     "localforage": "^1.10.0",
     "motion": "^10.16.4",
     "npm": "^10.1.0",
     "postcss": "^8.4.29",
     "react": "^18.2.0",
+    "react-best-gradient-color-picker": "^2.3.5",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.0",
     "sortablejs": "^1.15.0",
     "tailwindcss": "^3.3.3",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "webextension-polyfill": "^0.10.0"
   }
 }

postcss.config.cjs

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: [
-    require("tailwindcss"),
-    require("autoprefixer"),
-  ],
-};

public/interface/popup.css

@@ -1,14 +0,0 @@
-.hide {
-  opacity: 0;
-  pointer-events: none;
-}
-
-.outside-container {
-  margin: 0;
-  overflow: hidden;
-  position: absolute;
-  right: 10px;
-  top: 80px;
-  height: 590px;
-  z-index: 20;
-}

public/manifest.json

@@ -1,78 +0,0 @@
-{
-  "manifest_version": 3,
-  "name": "BetterSEQTA+",
-  "version": "3.2.2",
-  "description": "Make SEQTA usable and beautiful! A fork of BetterSEQTA to continue development and add WAY more features!!!",
-  "icons": {
-    "32": "icons/icon-32.png",
-    "48": "icons/icon-48.png",
-    "64": "icons/icon-64.png"
-  },
-  "action": {
-    "browser_style": true,
-    "default_popup": "interface/index.html#settings",
-    "default_icon": {
-      "32": "icons/icon-32.png",
-      "48": "icons/icon-48.png",
-      "64": "icons/icon-64.png"
-    }
-  },
-  "permissions": ["tabs", "notifications", "storage"],
-  "host_permissions": ["https://newsapi.org/", "*://*/*"],
-  "background": {
-    "service_worker": "background.js"
-  },
-  "content_scripts": [
-    {
-      "matches": ["*://*/*"],
-      "js": ["browser-polyfill.js", "purify.min.js", "SEQTA.js"],
-      "run_at": "document_start"
-    }
-  ],
-  "web_accessible_resources": [
-    {
-      "resources": ["icons/*"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["fonts/*"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["images/*"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["css/*"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["popup/*"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["client.js"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["index.css"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["interface/*"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["client/*"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["resources/*"],
-      "matches": ["*://*/*"]
-    },
-    {
-      "resources": ["backgrounds/*"],
-      "matches": ["*://*/*"]
-    }
-  ]
-}

src/background.ts

@@ -1,4 +1,5 @@
 import * as Sentry from "@sentry/browser";
+import browser from 'webextension-polyfill'
 
 browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
   if (telemetry.telemetry === true) {
@@ -20,7 +21,6 @@ browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
   }
 })
 
-import browser from 'webextension-polyfill'
 import { onError } from './seqta/utils/onError';
 export const openDB = () => {
   return new Promise((resolve, reject) => {

src/css/iframe.js

@@ -1 +0,0 @@
-import './iframe.scss';

src/css/iframe.scss

@@ -15,85 +15,99 @@
  * along with EvenBetterSEQTA.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-html, p, div, span {
+ body {
-  color: white !important;
+  background: transparent;
-  text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
 }
 
-body {
+.dark {
-  background-color: transparent !important;
+  p,
-}
+  div,
+  span {
+    color: white !important;
+    text-shadow: 1px 1px 2px #161616, 0 0 1em #161616;
+  }
 
-blockquote.forward > .preamble {
+  body {
-  color: rgba(255, 255, 255, 0.7) !important;
+    background-color: transparent !important;
-}
+  }
 
-blockquote.forward > .preamble > .date > .value, blockquote.forward > .preamble > .sender > .value {
+  blockquote.forward > .preamble {
-  color: rgba(255, 255, 255, 0.7) !important;
+    color: rgba(255, 255, 255, 0.7) !important;
-}
 
-blockquote.forward > .preamble > .date > .label, blockquote.forward > .preamble > .sender > .label {
+    > p,
-  color: rgba(255, 255, 255, 0.7) !important;
+    div,
-}
+    span {
+      background: transparent !important;
+    }
 
-table th {
+    > .date > .value,
-  background-color: #161616;
+    blockquote.forward > .preamble > .sender > .value {
-}
+      color: rgba(255, 255, 255, 0.7) !important;
+    }
 
-::-webkit-scrollbar {
+    > .date > .label,
-  width: 10px;
+    blockquote.forward > .preamble > .sender > .label {
-  height: 10px;
+      color: rgba(255, 255, 255, 0.7) !important;
-  transition: 1s;
+    }
-}
+  }
 
-::-webkit-scrollbar-track {
+  [bgcolor="#ffffff"] > * {
-  background-color: transparent;
+    color: black !important;
-}
+    text-shadow: none !important;
+  }
 
-::-webkit-scrollbar-thumb {
+  table th {
-  border-radius: 10rem !important;
+    background-color: #161616;
-}
+  }
 
-::-webkit-scrollbar-corner {
+  ::-webkit-scrollbar {
-  background: none;
+    width: 10px;
-}
+    height: 10px;
+    transition: 1s;
+  }
 
-.forward {
+  ::-webkit-scrollbar-track {
-  border-radius: 1rem;
+    background-color: transparent;
-}
+  }
 
-.preamble {
+  ::-webkit-scrollbar-thumb {
-  border-top-left-radius: 1rem;
+    border-radius: 10rem !important;
-  border-top-right-radius: 1rem;
+  }
-}
 
-html, p, div, span {
+  ::-webkit-scrollbar-corner {
-  color: white !important;
+    background: none;
-  background-color: #232323;
+  }
-}
-body {
-  background-color: #232323;
-}
-blockquote.forward > .preamble {
-  color: rgba(255, 255, 255, 0.7) !important;
-}
 
-blockquote.forward > .preamble > .date > .value,
+  .forward {
-blockquote.forward > .preamble > .sender > .value {
+    border-radius: 1rem;
-  color: rgba(255, 255, 255, 0.7) !important;
+  }
-}
-blockquote.forward > .preamble > .date > .label,
-blockquote.forward > .preamble > .sender > .label {
-  color: rgba(255, 255, 255, 0.7) !important;
-}
 
-#backgroundTable > * {
+  .preamble {
-  background-color: #161616;
+    border-top-left-radius: 1rem;
-  border: none;
+    border-top-right-radius: 1rem;
-}
+  }
 
-.userHTML>div>a:not(.resource) {
+  blockquote.forward > .preamble {
-	color: #06b4fc;
+    color: rgba(255, 255, 255, 0.7) !important;
-	text-decoration: underline;
+  }
-	transition: text-shadow 0.5s;
+
+  blockquote.forward > .preamble > .date > .value,
+  blockquote.forward > .preamble > .sender > .value {
+    color: rgba(255, 255, 255, 0.7) !important;
+  }
+  blockquote.forward > .preamble > .date > .label,
+  blockquote.forward > .preamble > .sender > .label {
+    color: rgba(255, 255, 255, 0.7) !important;
+  }
+
+  #backgroundTable > * {
+    background-color: #161616;
+    border: none;
+  }
+
+  .userHTML > div > a:not(.resource) {
+    color: #06b4fc;
+    text-decoration: underline;
+    transition: text-shadow 0.5s;
+  }
 }

src/css/injected.scss

@@ -1,16 +1,19 @@
 @charset "UTF-8";
-@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600");
+@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500,600');
 
-@import "./injected/popup.scss";
+@import './injected/popup.scss';
-@import "./injected/sidebar-animation.scss";
+@import './injected/sidebar-animation.scss';
-@import "./injected/theme.scss";
+@import './injected/theme.scss';
-@import "./injected/transparency.scss";
+@import './injected/transparency.scss';
 
 :root {
   background: var(--better-main) !important;
   --navy: #1a1a1a !important;
   --auto-background: var(--better-pale, var(--background-secondary)) !important;
 }
+.hidden {
+  display: none;
+}
 body,
 html {
   font-family: Rubik, sans-serif !important;
@@ -167,9 +170,6 @@ ul.magicDelete > li.deleting {
   background: transparent !important;
   color: var(--text-color) !important;
 }
-.tooltip {
-  z-index: 5 !important;
-}
 
 #menu li,
 #menu section {
@@ -200,6 +200,7 @@ ul.magicDelete > li.deleting {
 }
 #menu {
   width: 270px;
+  z-index: 19;
   background: var(--better-main) !important;
   color: var(--text-color);
   border-right: none;
@@ -321,7 +322,7 @@ ol:has(.MessageList__avatar___2wxyb svg) {
   box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.2) !important;
 }
 
-[style="--better-sub: #161616; --better-alert-highlight: #c61851; --background-primary: #ffffff; --background-secondary: #e5e7eb; --text-primary: black; --text-color: white; --betterseqta-logo: url(chrome-extension://boikofabjaholheekefimfojfncpjfib/icons/betterseqta-light-full.png); --better-main: #1a1a1a; --better-light: #333333;"] .menuShown > :last-child
+[style="--better-sub: #161616; --better-alert-highlight: #c61851; --background-primary: #ffffff; --background-secondary: #e5e7eb; --text-primary: black; --text-color: white; --better-main: #1a1a1a; --better-light: #333333;"] .menuShown > :last-child
 {
   top: 18% !important;
 }
@@ -534,6 +535,7 @@ div > ol:has(.uiFileHandlerWrapper) {
   height: 69.5px;
   box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
 }
+
 .assessmentsWrapper .message {
   display: none;
 }
@@ -681,6 +683,7 @@ div > ol:has(.uiFileHandlerWrapper) {
   left: 0;
   width: 100%;
 }
+
 #title::before {
   background-image: var(--betterseqta-logo);
   background-position: left;
@@ -1674,7 +1677,7 @@ li.MessageList__unread___3imtO {
   content: "";
   width: 14px;
   height: 12px;
-  background-image: url("../../public/icons/betterseqta-light-outline.png");
+  background-image: url("../resources/icons/betterseqta-light-outline.png");
   display: inline-block;
   background-size: 18px 18px;
   color: #fff;
@@ -2528,6 +2531,8 @@ li.MessageList__unread___3imtO {
 }
 .tooltip {
   display: inline-block;
+  background: transparent;
+  z-index: 5 !important;
   width: 28px;
   background: none;
   box-shadow: none;

src/declarations.d.ts

@@ -0,0 +1,5 @@
+declare module '*.mp4';
+declare module '*.woff';
+declare module '*.scss';
+declare module '*.png';
+declare module '*.html';

src/interface/components/Switch.tsx

@@ -11,7 +11,7 @@ export default function Switch(props: SwitchProps) {
   return (
     <div
       className="flex w-14 p-1 cursor-pointer rounded-full dark:bg-[#38373D] bg-[#DDDDDD] switch"
-      data-isOn={props.state}
+      data-ison={props.state}
       onClick={toggleSwitch}
     >
       <motion.div

src/interface/hooks/ThemeManagment.tsx

@@ -6,7 +6,7 @@ interface ThemeList {
 
 export const downloadTheme = async (themeName: string, themeURL: string) => {
   // send message to the background script
-  const response = await browser.runtime.sendMessage({
+  await browser.runtime.sendMessage({
     type: 'currentTab',
     info: 'DownloadTheme',
     body: {
@@ -14,13 +14,11 @@ export const downloadTheme = async (themeName: string, themeURL: string) => {
       themeURL: themeURL
     }
   });
-
-  console.log("Response: ", response);
 }
 
 export const setTheme = async (themeName: string, themeURL: string) => {
   // send message to the background script
-  const response = await browser.runtime.sendMessage({
+  await browser.runtime.sendMessage({
     type: 'currentTab',
     info: 'SetTheme',
     body: {
@@ -28,8 +26,6 @@ export const setTheme = async (themeName: string, themeURL: string) => {
       themeURL: themeURL
     }
   });
-
-  console.log("Response: ", response);
 }
 
 export const listThemes = async () => {
@@ -39,9 +35,6 @@ export const listThemes = async () => {
     info: 'ListThemes'
   });
 
-  // response.themes is an array of strings that are identical to the theme names that we loop over. Use this list to see which ones are downloaded and which ones need to see the download icon.
-  console.log("Response: ", response);
-
   return response;
 }
 

src/interface/index.html

@@ -2,13 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>
   <body class="">
     <div id="ExtensionPopup"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="./main.tsx"></script>
   </body>
 </html>
 

src/interface/main.tsx

@@ -5,7 +5,10 @@ import './index.css';
 import { SettingsContextProvider } from './SettingsContext.js';
 import SettingsPage from './SettingsPage.js';
 import browser from 'webextension-polyfill';
+import font from 'url:../resources/fonts/IconFamily.woff'
+
 import * as Sentry from "@sentry/react";
+
 browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
   if (telemetry.telemetry === true)
   Sentry.init({
@@ -24,14 +27,13 @@ browser.storage.local.get([ "telemetry" ]).then((telemetry) => {
     replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
   });
 })
-const fontURL = browser.runtime.getURL("fonts/IconFamily.woff");
 
 const style = document.createElement("style");
 style.setAttribute("type", "text/css");
 style.innerHTML = `
 @font-face {
   font-family: 'IconFamily';
-  src: url('${fontURL}') format('woff');
+  src: url('${font}') format('woff');
   font-weight: normal;
   font-style: normal;
 }`;

src/seqta/ui/ImageBackgrounds.ts

@@ -1,4 +1,4 @@
-import browser from 'webextension-polyfill'
+import backgroundPage from 'url:./background/background.html'
 
 export async function appendBackgroundToUI() {
   console.log('Starting appendBackgroundToUI...');
@@ -10,6 +10,6 @@ export async function appendBackgroundToUI() {
   background.id = 'background';
   background.classList.add('imageBackground');
   background.setAttribute('excludeDarkCheck', 'true');
-  background.src = browser.runtime.getURL('backgrounds/background.html');
+  background.src = backgroundPage;
   parent!.appendChild(background);
 }

src/seqta/ui/Loading.ts

@@ -54,18 +54,21 @@ export default function loading() {
       }
       .big-circle {
         margin: -88px;
+        will-change: transform;
         animation-timing-function: ease;
         animation: spin 3s linear infinite;
         -moz-animation: spin 3s linear infinite;
       }
       .small-circle {
         margin: -66px;
+        will-change: transform;
         animation-timing-function: ease;
         animation: spin 3s linear infinite;
         -moz-animation: spin 3s linear infinite;
       }
       .outer-circle {
         margin: -108px;
+        will-change: transform;
         animation-direction: alternate-reverse;
         animation: spinback 1s linear infinite;
         -moz-animation: spinback 1s linear infinite;

src/seqta/ui/background/background.html

@@ -19,14 +19,11 @@
       object-fit: cover;
     }
   </style>
-  <script type="application/javascript" src="/browser-polyfill.js"></script>
 </head>
 <body>
   <!-- Container for the media -->
-  <div id="media-container">
+  <div id="media-container"></div>
-    <!-- Will be populated dynamically -->
-  </div>
 
-  <script src="background.js"></script>
+  <script src="background.ts"></script>
 </body>
 </html>

src/seqta/ui/background/background.ts

@@ -1,23 +1,33 @@
-// Open the database
+interface Data {
-const openDB = () => {
+  blob: Blob;
+  type: 'image' | 'video';
+}
+
+interface DatabaseEventTarget extends EventTarget {
+  result: IDBDatabase;
+}
+
+interface DatabaseEvent extends Event {
+  target: DatabaseEventTarget;
+}
+
+const openDB = (): Promise<IDBDatabase> => {
   return new Promise((resolve, reject) => {
     const request = indexedDB.open('MyDatabase', 1);
 
     request.onerror = () => reject(request.error);
     request.onsuccess = () => resolve(request.result);
 
-    request.onupgradeneeded = (event) => {
+    request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
-      const db = event.target.result;
+      // @ts-expect-error
-      db.createObjectStore('backgrounds', { keyPath: 'id' });
+      event?.target?.result.createObjectStore('backgrounds', { keyPath: 'id' });
     };
   });
 };
 
-// Modified Read Data from IndexedDB
+const readData = async (): Promise<Data | null> => {
-const readData = async () => {
   const selectedBackground = localStorage.getItem('selectedBackground');
   if (!selectedBackground) {
-    console.log('No selected background in local storage.');
     return null;
   }
 
@@ -26,20 +36,20 @@ const readData = async () => {
   const store = tx.objectStore('backgrounds');
   const request = store.get(selectedBackground);
 
-  return await new Promise((resolve, reject) => {
+  return new Promise((resolve, reject) => {
-    request.onsuccess = () => resolve(request.result);
+    request.onsuccess = () => resolve(request.result as Data);
     request.onerror = () => reject(request.error);
   });
 };
 
-const updateBackground = async () => {
+const updateBackground = async (): Promise<void> => {
   try {
     const data = await readData();
     if (!data) {
       console.log('No data found in IndexedDB.');
 
       const container = document.getElementById('media-container');
-      const currentMedia = container.querySelector('.current-media');
+      const currentMedia = container?.querySelector('.current-media');
       if (currentMedia) {
         currentMedia.remove();
       }
@@ -64,19 +74,19 @@ const updateBackground = async () => {
     }
 
     // Mark the old element for removal
-    const oldElement = container.querySelector('.current-media');
+    const oldElement = container?.querySelector('.current-media');
     if (oldElement) {
       oldElement.classList.remove('current-media');
       oldElement.classList.add('old-media');
     }
 
     // Add the new element and mark it as current
-    newElement.classList.add('current-media');
+    newElement?.classList.add('current-media');
-    container.appendChild(newElement);
+    container?.appendChild(newElement as Node);
 
     // Delay removal of old element
     setTimeout(() => {
-      const oldMedia = container.querySelector('.old-media');
+      const oldMedia = container?.querySelector('.old-media');
       if (oldMedia) {
         oldMedia.remove();
       }
@@ -87,13 +97,12 @@ const updateBackground = async () => {
 };
 
 // Main function to run on page load
-const main = async () => {
+const main = async (): Promise<void> => {
-  await updateBackground();  // Initial background update
+  await updateBackground();
 
   // Listen for changes to local storage
   window.addEventListener('storage', async (event) => {
     if (event.key === 'selectedBackground') {
-      await updateBackground();  // Update background if 'selectedBackground' changes
     }
   });
 };

src/seqta/ui/colors/Manager.ts

@@ -1,9 +1,12 @@
 import browser from 'webextension-polyfill'
-import { GetThresholdOfColor, GetCSSElement } from '../../../SEQTA';
+import { GetThresholdOfColor } from '../../../SEQTA';
 import { lightenAndPaleColor } from './lightenAndPaleColor';
 import ColorLuminance from './ColorLuminance';
 import { SettingsState } from '../../../types/storage';
 
+import darkLogo from 'url:../../../resources/icons/betterseqta-light-full.png';
+import lightLogo from 'url:../../../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);
@@ -36,10 +39,10 @@ export function updateAllColors(storedSetting: any, newColor = null) {
   let modeProps = {};
   if (DarkMode !== null) {
     modeProps = DarkMode ? {
-      '--betterseqta-logo': `url(${getChromeURL('icons/betterseqta-light-full.png')})`
+      '--betterseqta-logo': `url(${darkLogo})`
     } : {
       '--better-pale': lightenAndPaleColor(selectedColor),
-      '--betterseqta-logo': `url(${getChromeURL('icons/betterseqta-dark-full.png')})`
+      '--betterseqta-logo': `url(${lightLogo})`
     };
 
     if (DarkMode) {
@@ -67,7 +70,6 @@ export function updateAllColors(storedSetting: any, newColor = null) {
   }
 
   let alliframes = document.getElementsByTagName('iframe');
-  let fileref = GetCSSElement('css/iframe.css');
 
   for (let i = 0; i < alliframes.length; i++) {
     const element = alliframes[i];
@@ -76,11 +78,11 @@ export function updateAllColors(storedSetting: any, newColor = null) {
       continue;
     }
     
-    (element.contentDocument!.documentElement.childNodes[1] as HTMLIFrameElement).style.color =
+    if (DarkMode) {
-      DarkMode ? 'white' : 'black';
+      element.contentDocument?.body.classList.add('dark');
-    element.contentDocument!.documentElement.firstChild!.appendChild(
+    } else {
-      fileref,
+      element.contentDocument?.body.classList.remove('dark');
-    );
+    }
   }
 }
 

src/seqta/utils/GetPrefs.ts

@@ -1,6 +0,0 @@
-const GetPrefs = await fetch(`${location.origin}/seqta/student/load/prefs?`, {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ asArray: true, request: 'userPrefs' })
-  })
-  export const response = await GetPrefs.json()

src/seqta/utils/StorageListener.ts

@@ -45,7 +45,6 @@ export default class StorageListener {
 
       case 'DarkMode':
         this.darkMode = changes.DarkMode.newValue;
-        console.log(this.darkMode);
         break;
 
       case 'customshortcuts':

tailwind.config.js

@@ -1,20 +1,35 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
-    './index.html',
+    "./src/**/*.{js,ts,jsx,tsx,html}",
-    './src/**/*.{js,ts,jsx,tsx}',
   ],
-  darkMode: 'class',
+  darkMode: "class",
   theme: {
     fontSize: {
-      'xs': '.65rem',
+      "xs": ".65rem",
-      'sm': '.775rem',
+      "sm": ".775rem",
-      'base': '0.65rem',
+      "base": "0.65rem",
-      'md': '0.65rem',
+      "md": "0.65rem",
-      'lg': '1rem',
+      "lg": "1rem",
-      'xl': '1.25rem',
+      "xl": "1.25rem",
-      '2xl': '1.5rem',
+      "2xl": "1.5rem",
-      '3xl': '1.875rem',
+      "3xl": "1.875rem",
+      "4xl": "2.25rem",
+      "5xl": "3rem",
+      "6xl": "4rem",
+      "7xl": "5rem",
+      "8xl": "6rem",
+      "9xl": "8rem",
+      "10xl": "10rem",
+      "11xl": "12rem",
+      "12xl": "14rem",
+      "13xl": "16rem",
+      "14xl": "18rem",
+    },
+    extend: {
+      fontFamily: {
+        "IconFamily": "IconFamily"
+      }
     }
   },
   plugins: [],

webpack.config.js

@@ -1,87 +0,0 @@
-import path from 'path';
-import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import CopyWebpackPlugin from 'copy-webpack-plugin';
-import ESLintPlugin from 'eslint-webpack-plugin';
-import { sentryWebpackPlugin } from '@sentry/webpack-plugin';
-
-
-export default {
-  target: 'web',
-  node: {
-    __dirname: true
-  },
-  performance: {
-    hints: false,
-    maxEntrypointSize: 512000,
-    maxAssetSize: 512000,
-  },
-  devtool: 'source-map',
-  entry: {
-    SEQTA: './src/SEQTA.ts',
-    background: './src/background.ts',
-    'css/documentload': './src/css/documentload.scss',
-    'css/iframe': './src/css/iframe.scss',
-    'css/injected': './src/css/injected.scss',
-  },
-  output: {
-    filename: (pathData) => {
-      const name = pathData.chunk.name.replace('css-', '');
-      return name.includes('css') ? `css/${name}.js` : `${name}.js`;
-    },
-    // eslint-disable-next-line no-undef
-    path: path.resolve('build'),
-    publicPath: '',
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(css|scss)$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          {
-            loader: 'css-loader',
-            options: {
-              importLoaders: 2
-            }
-          },
-          'sass-loader'
-        ]
-      },
-      {
-        test: /\.(png|svg|jpg|jpeg|gif)$/i,
-        type: 'asset/resource',
-        generator: {
-          filename: 'src/[path][name][ext]',
-        },
-      },
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      }
-    ],
-  },
-  resolve: {
-    extensions: ['.tsx', '.ts', '.js'],
-  },
-  plugins: [
-    new ESLintPlugin(),
-    new MiniCssExtractPlugin({
-      filename: '[name].css' 
-    }),
-    new CopyWebpackPlugin({
-      patterns: [
-        { from: 'public', to: '.' },
-        { from: 'src/css/preview', to: 'css/preview' },
-        { from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js' },
-        { from: 'interface/dist/client', to: 'client' },
-        { from: 'interface/dist/index.html', to: 'interface/index.html' }
-      ],
-    }),
-    sentryWebpackPlugin({
-      authToken: process.env.SENTRY_AUTH_TOKEN,
-      org: "betterseqta-plus",
-      project: "betterseqtaplus-main",
-    }),
-  ],
-};