From 723caca4172625c8839f7174d691197464eb9516 Mon Sep 17 00:00:00 2001 From: Sriram Hariharan Date: Fri, 3 Mar 2023 18:58:19 -0600 Subject: [PATCH] fixed some bugs, and updated dev dashboard useffect" --- package-lock.json | 14 ++++---- package.json | 8 ++--- src/debug/index.tsx | 44 ++++++++++++++++++------ src/views/content/content.tsx | 5 ++- src/views/styles/base.module.scss | 1 + src/views/styles/colors.module.scss | 14 ++++++++ src/views/styles/colors.module.scss.d.ts | 16 +++++++++ src/views/styles/elevation.module.scss | 0 webpack/manifest.config.ts | 9 ++--- 9 files changed, 85 insertions(+), 26 deletions(-) create mode 100644 src/views/styles/colors.module.scss.d.ts create mode 100644 src/views/styles/elevation.module.scss diff --git a/package-lock.json b/package-lock.json index b1f024fc..4b2fabbd 100644 --- a/package-lock.json +++ b/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", - "resolved": "https://registry.npmjs.org/chrome-extension-toolkit/-/chrome-extension-toolkit-0.0.21.tgz", - "integrity": "sha512-ltzHEBWLNMUFkk+Q9hYP2EogLv3COFI8T136SUDBxJlc64jEnJRixV1bh7e3orYbDRBrQQ9Qh9wcNUebi21Rlg==", + "version": "0.0.22", + "resolved": "https://registry.npmjs.org/chrome-extension-toolkit/-/chrome-extension-toolkit-0.0.22.tgz", + "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", - "resolved": "https://registry.npmjs.org/chrome-extension-toolkit/-/chrome-extension-toolkit-0.0.21.tgz", - "integrity": "sha512-ltzHEBWLNMUFkk+Q9hYP2EogLv3COFI8T136SUDBxJlc64jEnJRixV1bh7e3orYbDRBrQQ9Qh9wcNUebi21Rlg==", + "version": "0.0.22", + "resolved": "https://registry.npmjs.org/chrome-extension-toolkit/-/chrome-extension-toolkit-0.0.22.tgz", + "integrity": "sha512-LcrEnlvpHN+vkEnUMdQqtkQl0SxSLkVmRF8IDe2E+/IzgFrhQI+xHweIaQrmkJv9iaaICsbLA5LzIe9FyKfn5A==", "requires": { "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/package.json b/package.json index 510036d2..1435b782 100644 --- a/package.json +++ b/package.json @@ -6,14 +6,14 @@ "homepage": "sriramhariharan.com", "type": "module", "scripts": { - "start": "tsx webpack/development.ts", - "build": "tsx webpack/production.ts", + "start": "NODE_ENV=development tsx webpack/development.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" } -} +} \ No newline at end of file diff --git a/src/debug/index.tsx b/src/debug/index.tsx index f5ac8b53..55c762a8 100644 --- a/src/debug/index.tsx +++ b/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) => { chrome.storage[areaName].set(changes); }; diff --git a/src/views/content/content.tsx b/src/views/content/content.tsx index e0ec6d82..8ccf2e20 100644 --- a/src/views/content/content.tsx +++ b/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(, div); + render(, div); }); } diff --git a/src/views/styles/base.module.scss b/src/views/styles/base.module.scss index 561456d0..a013ea4e 100644 --- a/src/views/styles/base.module.scss +++ b/src/views/styles/base.module.scss @@ -1,2 +1,3 @@ @import './colors.module.scss'; @import './fonts.module.scss'; +@import './elevation.module.scss'; diff --git a/src/views/styles/colors.module.scss b/src/views/styles/colors.module.scss index 3d4ff755..e8632aa8 100644 --- a/src/views/styles/colors.module.scss +++ b/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; +} diff --git a/src/views/styles/colors.module.scss.d.ts b/src/views/styles/colors.module.scss.d.ts new file mode 100644 index 00000000..1d9f2070 --- /dev/null +++ b/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; diff --git a/src/views/styles/elevation.module.scss b/src/views/styles/elevation.module.scss new file mode 100644 index 00000000..e69de29b diff --git a/webpack/manifest.config.ts b/webpack/manifest.config.ts index 04a7ff2d..76521657 100644 --- a/webpack/manifest.config.ts +++ b/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,