diff --git a/public/manifest.json b/public/manifest.json index 63a6abb..e297616 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -27,7 +27,7 @@ "src/pages/content/index.js" ], "css": [ - "assets/css/contentStyle16833527642.chunk.css" + "assets/css/contentStyle16834342064.chunk.css" ] } ], diff --git a/src/pages/content/components/index.tsx b/src/pages/content/components/index.tsx index 1a47c2c..b281ab4 100644 --- a/src/pages/content/components/index.tsx +++ b/src/pages/content/components/index.tsx @@ -1,9 +1,13 @@ import { createRoot } from "react-dom/client"; import DebugPopup from "@src/pages/content/components/DebugPopup"; import App from "@src/pages/content/components/App"; -import refreshOnUpdate from "virtual:reload-on-update-in-view"; import { get } from "@services/storage/storageService"; -import { SETTINGS_DEBUG } from "@services/constants"; +import { + SETTINGS_DEBUG, + SETTINGS_HIGHLIGHTED_STYLES, + SETTINGS_HIGHLIGHTED_STYLES_DEFAULT_VALUE, +} from "@services/constants"; +import refreshOnUpdate from "virtual:reload-on-update-in-view"; refreshOnUpdate("pages/content"); @@ -32,7 +36,26 @@ const initApp = () => { createRoot(root).render(); }; +const addStyleBlock = (styles: string) => { + var sheet = document.createElement("style"); + sheet.innerHTML = `.highlighted { ${styles} }`; + document.body.appendChild(sheet); +}; + +const initStyles = () => { + const key = SETTINGS_HIGHLIGHTED_STYLES, + defaultValue = SETTINGS_HIGHLIGHTED_STYLES_DEFAULT_VALUE; + + get(key).then((result) => { + const highlightedStyles = result?.[key] || defaultValue; + if (highlightedStyles) { + addStyleBlock(highlightedStyles); + } + }); +}; + function init() { + initStyles(); initApp(); initDebug(); } diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx index a637765..f3e85b8 100644 --- a/src/pages/popup/Popup.tsx +++ b/src/pages/popup/Popup.tsx @@ -1,11 +1,19 @@ import { ChangeEvent } from "react"; import "@pages/popup/Popup.css"; -import { SETTINGS_DEBUG, SETTINGS_KEYWORDS } from "@services/constants"; +import { + SETTINGS_DEBUG, + SETTINGS_KEYWORDS, + SETTINGS_HIGHLIGHTED_STYLES, + SETTINGS_HIGHLIGHTED_STYLES_DEFAULT_VALUE, +} from "@services/constants"; import useSettingsHook from "./hooks/useSettingsHook"; const Popup = () => { const [debug, setDebug] = useSettingsHook(SETTINGS_DEBUG); const [keywords, setKeywords] = useSettingsHook(SETTINGS_KEYWORDS); + const [highlightedStyles, setHighlightedStyles] = useSettingsHook( + SETTINGS_HIGHLIGHTED_STYLES + ); const handleDebugChange = (e: ChangeEvent) => { setDebug(e.target.checked); @@ -15,6 +23,12 @@ const Popup = () => { setKeywords(e.target.value); }; + const handleHighlightedStylesChange = ( + e: ChangeEvent + ) => { + setHighlightedStyles(e.target.value); + }; + return (
@@ -49,6 +63,21 @@ const Popup = () => { onChange={handleKeywordsChange} />
+ +
+
+ +
+