Merge pull request #9 from FSou1/feat/options-rework

feat(options): user-defined keywords and styles

README.md

@@ -18,6 +18,8 @@ To use Keyword Highlighter, simply click on the extension icon in the top right-
 
 Keyword Highlighter uses storage to store user settings and preferences, making it easy to access them every time the extension is used. This feature provides a more personalized and seamless experience for the user.
 
+![](/docs/chrome-web-store/Screenshot_2.png)
+
 ## Contributions
 
 If you'd like to contribute to Keyword Highlighter, please feel free to submit a pull request. We welcome any feedback or suggestions to improve the functionality of the extension.

manifest.ts

@@ -14,7 +14,6 @@ const manifest: chrome.runtime.ManifestV3 = {
     type: "module",
   },
   action: {
-    default_popup: "src/pages/popup/index.html",
     default_icon: "icon-34.png",
   },
   icons: {

package.json

@@ -17,6 +17,11 @@
   },
   "type": "module",
   "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@fontsource/roboto": "^4.5.8",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.12.3",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "react": "18.2.0",

public/manifest.json

@@ -9,26 +9,17 @@
     "type": "module"
   },
   "action": {
-    "default_popup": "src/pages/popup/index.html",
     "default_icon": "icon-34.png"
   },
   "icons": {
     "128": "icon-128.png"
   },
-  "permissions": [
-    "storage"
-  ],
+  "permissions": ["storage"],
   "content_scripts": [
     {
-      "matches": [
-        "https://www.linkedin.com/*"
-      ],
-      "js": [
-        "src/pages/content/index.js"
-      ],
-      "css": [
-        "assets/css/contentStyle16834373313.chunk.css"
-      ]
+      "matches": ["https://www.linkedin.com/*"],
+      "js": ["src/pages/content/index.js"],
+      "css": ["assets/css/contentStyle16836018082.chunk.css"]
     }
   ],
   "web_accessible_resources": [
@@ -39,9 +30,7 @@
         "icon-128.png",
         "icon-34.png"
       ],
-      "matches": [
-        "*://*/*"
-      ]
+      "matches": ["*://*/*"]
     }
   ]
-}
+}

src/pages/background/index.ts

@@ -1,5 +1,11 @@
 import reloadOnUpdate from "virtual:reload-on-update-in-background-script";
 
+chrome.action.setPopup({ popup: '' });
+
+chrome.action.onClicked.addListener(() => {
+  chrome.tabs.create({ url: 'src/pages/options/index.html' });
+});
+
 reloadOnUpdate("pages/background");
 
 /**

src/pages/content/components/App.tsx

@@ -1,31 +1,35 @@
 import { useEffect, useState } from "react";
-import { get } from "@services/storage/storageService";
-import {
-  SETTINGS_KEYWORDS,
-  OBSERVABLE_DEBOUNCE_TIME_MS,
-} from "@services/constants";
+import { OBSERVABLE_DEBOUNCE_TIME_MS } from "@services/constants";
+import { getRules } from "@src/services/storage/optionsService";
+import { IKeywordRule } from "@src/pages/options/components/KeywordRule";
 import Highlighter from "./Highlighter";
 
 export default function App() {
-  const [keywords, setKeywords] = useState("");
+  const [rules, setRules] = useState([]);
+
+  const map = (rule: IKeywordRule) => {
+    return {
+      className: rule.id,
+      keywords: rule.keywords,
+      styles: rule.cssStyles,
+    };
+  };
 
   useEffect(() => {
-    get(SETTINGS_KEYWORDS).then((result) => {
-      const keywords = result?.[SETTINGS_KEYWORDS] || null;
-      if (keywords) {
-        setKeywords(keywords);
-      }
+    getRules().then((rules) => {
+      setRules(rules.map(map));
     });
   }, []);
 
-  if (!keywords) {
-    return;
-  }
-
   return (
-    <Highlighter
-      keywords={keywords}
-      debounceTimeMs={OBSERVABLE_DEBOUNCE_TIME_MS}
-    />
+    <>
+      {rules.map((rule) => (
+        <Highlighter
+          keywords={rule.keywords}
+          highlightedClassName={rule.className}
+          debounceTimeMs={OBSERVABLE_DEBOUNCE_TIME_MS}
+        />
+      ))}
+    </>
   );
 }

src/pages/content/components/Highlighter.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { findAndWrap } from "@src/lib/findAndWrapHTMLNodes";
 import useMutationObservable, {
   DEFAULT_OPTIONS,
@@ -7,19 +7,21 @@ import useMutationObservable, {
 interface HighlighterProps {
   debounceTimeMs: number;
   keywords: string;
+  highlightedClassName: string;
 }
 
 export default function Highlighter({
   debounceTimeMs,
   keywords,
+  highlightedClassName,
 }: HighlighterProps) {
   const onMutation = useCallback(() => {
     findAndWrap(document.body, {
       findTextRegExp: new RegExp(keywords.replaceAll(",", "|"), "gi"),
       wrapWithTag: "span",
-      wrapWithClassName: "highlighted",
+      wrapWithClassName: highlightedClassName,
       wrapIf: (node: Text) => {
-        return !node.parentElement.classList.contains("highlighted");
+        return !node.parentElement.classList.contains(highlightedClassName);
       },
     });
   }, []);

src/pages/content/components/index.tsx

@@ -2,12 +2,9 @@ import { createRoot } from "react-dom/client";
 import DebugPopup from "@src/pages/content/components/DebugPopup";
 import App from "@src/pages/content/components/App";
 import { get } from "@services/storage/storageService";
-import {
-  SETTINGS_DEBUG,
-  SETTINGS_HIGHLIGHTED_STYLES,
-  SETTINGS_HIGHLIGHTED_STYLES_DEFAULT_VALUE,
-} from "@services/constants";
+import { SETTINGS_DEBUG, SETTINGS_KEYWORD_RULES } from "@services/constants";
 import refreshOnUpdate from "virtual:reload-on-update-in-view";
+import { getRules } from "@src/services/storage/optionsService";
 
 refreshOnUpdate("pages/content");
 
@@ -36,20 +33,16 @@ const initApp = () => {
   createRoot(root).render(<App />);
 };
 
-const addStyleBlock = (styles: string) => {
+const addStyleBlock = (className: string, styles: string) => {
   var sheet = document.createElement("style");
-  sheet.innerHTML = `.highlighted { ${styles} }`;
+  sheet.innerHTML = `.${className} { ${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);
+  getRules().then((styles) => {
+    for (const style of styles) {
+      addStyleBlock(style.id, style.cssStyles);
     }
   });
 };