fixed some bugs, and updated dev dashboard useffect"

package-lock.json

@@ -8,7 +8,7 @@
             "name": "ut-registration-plus",
             "version": "0.0.0",
             "dependencies": {
-                "chrome-extension-toolkit": "^0.0.21",
+                "chrome-extension-toolkit": "^0.0.22",
                 "clean-webpack-plugin": "^4.0.0",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
@@ -4686,9 +4686,9 @@
             }
         },
         "node_modules/chrome-extension-toolkit": {
-            "version": "0.0.21",
+            "version": "0.0.22",
-            "resolved": "https://registry.npmjs.org/chrome-extension-toolkit/-/chrome-extension-toolkit-0.0.21.tgz",
+            "resolved": "https://registry.npmjs.org/chrome-extension-toolkit/-/chrome-extension-toolkit-0.0.22.tgz",
-            "integrity": "sha512-ltzHEBWLNMUFkk+Q9hYP2EogLv3COFI8T136SUDBxJlc64jEnJRixV1bh7e3orYbDRBrQQ9Qh9wcNUebi21Rlg==",
+            "integrity": "sha512-LcrEnlvpHN+vkEnUMdQqtkQl0SxSLkVmRF8IDe2E+/IzgFrhQI+xHweIaQrmkJv9iaaICsbLA5LzIe9FyKfn5A==",
             "dependencies": {
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0"
@@ -20661,9 +20661,9 @@
             }
         },
         "chrome-extension-toolkit": {
-            "version": "0.0.21",
+            "version": "0.0.22",
-            "resolved": "https://registry.npmjs.org/chrome-extension-toolkit/-/chrome-extension-toolkit-0.0.21.tgz",
+            "resolved": "https://registry.npmjs.org/chrome-extension-toolkit/-/chrome-extension-toolkit-0.0.22.tgz",
-            "integrity": "sha512-ltzHEBWLNMUFkk+Q9hYP2EogLv3COFI8T136SUDBxJlc64jEnJRixV1bh7e3orYbDRBrQQ9Qh9wcNUebi21Rlg==",
+            "integrity": "sha512-LcrEnlvpHN+vkEnUMdQqtkQl0SxSLkVmRF8IDe2E+/IzgFrhQI+xHweIaQrmkJv9iaaICsbLA5LzIe9FyKfn5A==",
             "requires": {
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0"

package.json

@@ -6,14 +6,14 @@
     "homepage": "sriramhariharan.com",
     "type": "module",
     "scripts": {
-        "start": "tsx webpack/development.ts",
+        "start": "NODE_ENV=development tsx webpack/development.ts",
-        "build": "tsx webpack/production.ts",
+        "build": "NODE_ENV=production tsx webpack/production.ts",
         "release": "tsx webpack/release.ts",
         "devtools": "react-devtools",
         "lint": "eslint ./ --ext .ts,.tsx"
     },
     "dependencies": {
-        "chrome-extension-toolkit": "^0.0.21",
+        "chrome-extension-toolkit": "^0.0.22",
         "clean-webpack-plugin": "^4.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -75,4 +75,4 @@
         "webpack-build-notifier": "^2.3.0",
         "webpack-dev-server": "^4.11.1"
     }
-}
+}

src/debug/index.tsx

@@ -93,18 +93,42 @@ function DevDashboard() {
         chrome.storage.session.get(null, result => {
             setSessionStorage(result);
         });
-
-        chrome.storage.onChanged.addListener((changes, areaName) => {
-            if (areaName === 'local') {
-                setLocalStorage({ ...localStorage, ...changes });
-            } else if (areaName === 'sync') {
-                setSyncStorage({ ...syncStorage, ...changes });
-            } else if (areaName === 'session') {
-                setSessionStorage({ ...sessionStorage, ...changes });
-            }
-        });
     }, []);
 
+    // listen for changes to the chrome storage to update the local storage state displayed in the dashboard
+    useEffect(() => {
+        const onChanged = (changes: chrome.storage.StorageChange, areaName: chrome.storage.AreaName) => {
+            let copy = {};
+            if (areaName === 'local') {
+                copy = { ...localStorage };
+            } else if (areaName === 'sync') {
+                copy = { ...syncStorage };
+            } else if (areaName === 'session') {
+                copy = { ...sessionStorage };
+            }
+
+            Object.keys(changes).forEach(key => {
+                copy[key] = changes[key].newValue;
+            });
+
+            if (areaName === 'local') {
+                setLocalStorage(copy);
+            }
+            if (areaName === 'sync') {
+                setSyncStorage(copy);
+            }
+            if (areaName === 'session') {
+                setSessionStorage(copy);
+            }
+        };
+
+        chrome.storage.onChanged.addListener(onChanged);
+
+        return () => {
+            chrome.storage.onChanged.removeListener(onChanged);
+        };
+    }, [localStorage, syncStorage, sessionStorage]);
+
     const handleEditStorage = (areaName: string) => (changes: Record<string, any>) => {
         chrome.storage[areaName].set(changes);
     };

src/views/content/content.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { render } from 'react-dom';
 import { ContextInvalidated, createShadowDOM, onContextInvalidated } from 'chrome-extension-toolkit';
 import ContentMain from './ContentMain';
+import colors from '../styles/colors.module.scss';
+
+console.log('colors:', colors);
 
 injectReact();
 
@@ -16,6 +19,6 @@ if (process.env.NODE_ENV === 'development') {
         const div = document.createElement('div');
         div.id = 'context-invalidated-container';
         document.body.appendChild(div);
-        render(<ContextInvalidated color='black' backgroundColor='#f8971f' />, div);
+        render(<ContextInvalidated color={colors.$CHARCOAL} backgroundColor={colors.$BURNT_ORANGE} />, div);
     });
 }

src/views/styles/base.module.scss

@@ -1,2 +1,3 @@
 @import './colors.module.scss';
 @import './fonts.module.scss';
+@import './elevation.module.scss';

src/views/styles/colors.module.scss

@@ -9,3 +9,17 @@ $TURQUOISE: #00a9b7;
 $BLUEBONNET: #005f86;
 $SHADE: #9cadb7;
 $LIMESTONE: #d6d2c4;
+
+:export {
+    $BURNT_ORANGE: $BURNT_ORANGE;
+    $CHARCOAL: $CHARCOAL;
+    $WHITE: $WHITE;
+    $TANGERINE: $TANGERINE;
+    $SUNSHINE: $SUNSHINE;
+    $CACTUS: $CACTUS;
+    $TURTLE_POND: $TURTLE_POND;
+    $TURQUOISE: $TURQUOISE;
+    $BLUEBONNET: $BLUEBONNET;
+    $SHADE: $SHADE;
+    $LIMESTONE: $LIMESTONE;
+}

src/views/styles/colors.module.scss.d.ts

@@ -0,0 +1,16 @@
+export interface ISassColors {
+    $BURNT_ORANGE: string;
+    $CHARCOAL: string;
+    $WHITE: string;
+    $TANGERINE: string;
+    $SUNSHINE: string;
+    $CACTUS: string;
+    $TURTLE_POND: string;
+    $TURQUOISE: string;
+    $BLUEBONNET: string;
+    $SHADE: string;
+    $LIMESTONE: string;
+}
+
+declare const colors: ISassColors;
+export default colors;

webpack/manifest.config.ts

@@ -10,10 +10,6 @@ const HOST_PERMISSIONS: string[] = [
     '*://*.login.utexas.edu/login/*',
 ];
 
-if (process.env.NODE_ENV === 'development') {
-    HOST_PERMISSIONS.push('http://localhost:9090/*');
-}
-
 /**
  * Creates a chrome extension manifest from the given version, mode, and
  * @param mode the build mode (development or production)
@@ -22,6 +18,11 @@ if (process.env.NODE_ENV === 'development') {
  */
 export function getManifest(mode: Environment, version: string): chrome.runtime.ManifestV3 {
     let name = mode === 'development' ? `${NAME} (dev)` : NAME;
+
+    if (mode === 'development') {
+        HOST_PERMISSIONS.push('http://localhost:9090/*');
+    }
+
     const manifest = {
         name,
         short_name: SHORT_NAME,