DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed some bugs, and updated dev dashboard useffect"

Browse Source
This commit is contained in:
Sriram Hariharan
2023-03-03 18:58:19 -06:00
parent 57d704b759
commit 723caca417
9 changed files with 85 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@@ -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"

8
package.json
View File

@@ -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"
}
}
}

44
src/debug/index.tsx
View File

@@ -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);
};

5
src/views/content/content.tsx
View File

@@ -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);
});
}

1
src/views/styles/base.module.scss
View File

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

14
src/views/styles/colors.module.scss
View File

@@ -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;
}

16
src/views/styles/colors.module.scss.d.ts vendored Normal file
View File

@@ -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;

0
src/views/styles/elevation.module.scss Normal file
View File

9
webpack/manifest.config.ts
View File

@@ -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,