Merge pull request #12 from FSou1/feature/1-websites-enabled-disabled

feat(options): choose the websites the ext is enabled/disabled on

manifest.ts

@@ -20,17 +20,14 @@ const manifest: chrome.runtime.ManifestV3 = {
     "128": "icon-128.png",
   },
   permissions: [
-    "storage"
+    "storage",
+    "scripting",
   ],
-  content_scripts: [
-    {
-      //matches: ["http://*/*", "https://*/*", "<all_urls>"],
-      matches: ["https://www.linkedin.com/*"],
-      js: ["src/pages/content/index.js"],
-      // KEY for cache invalidation
-      css: ["assets/css/contentStyle<KEY>.chunk.css"],
-    },
+  host_permissions: [
+    "http://*/*",
+    "https://*/*"
   ],
+  content_scripts: [],
   web_accessible_resources: [
     {
       resources: [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "keywords-highlighter",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "a chrome extension that highlights keywords on web pages, making it easy to find or skip information",
   "license": "MIT",
   "repository": {

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Keywords Highlighter",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "description": "a chrome extension that highlights keywords on web pages, making it easy to find or skip information",
   "options_page": "src/pages/options/index.html",
   "background": {
@@ -15,21 +15,14 @@
     "128": "icon-128.png"
   },
   "permissions": [
-    "storage"
+    "storage",
+    "scripting"
   ],
-  "content_scripts": [
-    {
-      "matches": [
-        "https://www.linkedin.com/*"
-      ],
-      "js": [
-        "src/pages/content/index.js"
-      ],
-      "css": [
-        "assets/css/contentStyle16837320447.chunk.css"
-      ]
-    }
+  "host_permissions": [
+    "http://*/*",
+    "https://*/*"
   ],
+  "content_scripts": [],
   "web_accessible_resources": [
     {
       "resources": [

src/pages/background/index.ts

@@ -1,10 +1,68 @@
 import reloadOnUpdate from "virtual:reload-on-update-in-background-script";
+import { getMatches } from '@services/storage/optionsService';
+import { EVENT_OPTIONS_SAVED } from "@src/services/constants";
 
-chrome.action.setPopup({ popup: '' });
+const CONTENT_SCRIPT_ID = "highlighter-script";
 
-chrome.action.onClicked.addListener(() => {
-  chrome.tabs.create({ url: 'src/pages/options/index.html' });
-});
+function openOptionsOnPopup() {
+  chrome.action.setPopup({ popup: '' });
+
+  chrome.action.onClicked.addListener(() => {
+    chrome.tabs.create({ url: 'src/pages/options/index.html' });
+  });
+}
+
+function injectContentScripts({ js, css }) {
+  getMatches()
+    .then(({ matches, excludeMatches }) => {
+      console.log('matches: ', matches);
+      console.log('exclude matches: ', excludeMatches);
+      chrome.scripting
+        .registerContentScripts([{
+          id: CONTENT_SCRIPT_ID,
+          js: js,
+          css: css,
+          matches: matches,
+          excludeMatches: excludeMatches,
+          persistAcrossSessions: false,
+        }])
+        .then(() => console.log("registration complete"))
+        .catch((err) => console.warn("unexpected error", err))
+    });
+}
+
+function addEventListeners() {
+  chrome.runtime.onMessage.addListener(({ type }) => {
+    if (type === EVENT_OPTIONS_SAVED) {
+      resetContentScripts()
+        .then(() => registerContentScripts());
+    }
+  });
+}
+
+function registerContentScripts() {
+  injectContentScripts({
+    js: ["/src/pages/content/index.js"],
+    css: ["/assets/css/contentStyle.css"]
+  });
+}
+
+function resetContentScripts() {
+  return chrome.scripting
+    .unregisterContentScripts({
+      ids: [CONTENT_SCRIPT_ID]
+    })
+}
+
+function init() {
+  openOptionsOnPopup();
+
+  registerContentScripts();
+
+  addEventListeners();
+}
+
+init();
 
 reloadOnUpdate("pages/background");
 

src/pages/content/components/App.tsx

@@ -16,9 +16,15 @@ export default function App() {
     };
   };
 
+  const filter = (rule: IKeywordRule) => {
+    return rule.keywords?.length;
+  };
+
   useEffect(() => {
     getRules().then((rules) => {
-      setRules(rules.map(map));
+      setRules(rules
+        .filter(filter)
+        .map(map));
     });
   }, []);
 

src/pages/content/components/index.tsx

@@ -2,7 +2,7 @@ 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_KEYWORD_RULES } from "@services/constants";
+import { SETTINGS_DEBUG } from "@services/constants";
 import refreshOnUpdate from "virtual:reload-on-update-in-view";
 import { getRules } from "@src/services/storage/optionsService";
 
@@ -34,6 +34,10 @@ const initApp = () => {
 };
 
 const addStyleBlock = (className: string, styles: string) => {
+  if (!className || !styles) {
+    return;
+  }
+
   var sheet = document.createElement("style");
   sheet.innerHTML = `.${className} { ${styles} }`;
   document.body.appendChild(sheet);

src/pages/content/index.ts

@@ -1 +1 @@
-import("./components");
+import("./components");

src/pages/content/style.scss

@@ -23,7 +23,3 @@
   font-size: 14px;
   color: white;
 }
-
-.highlighted {
-  background-color: yellow;
-}

src/pages/options/Options.tsx

@@ -9,13 +9,15 @@ import Typography from "@mui/material/Typography";
 import TextField from "@mui/material/TextField";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
-import Divider from "@mui/material/Divider";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { get, set } from "@services/storage/storageService";
 import { uid } from "@services/uidService";
 import "@pages/options/Options.css";
 import {
+  EVENT_OPTIONS_SAVED,
   SETTINGS_DEBUG,
+  SETTINGS_DISABLED_ON,
+  SETTINGS_ENABLED_ON,
   SETTINGS_KEYWORD_RULES,
   TEXT_OPTIONS,
   TEXT_OPTIONS_DISPLAY_DEBUG,
@@ -28,16 +30,25 @@ const theme = createTheme();
 
 export default function Options() {
   const [displayDebug, setDisplayDebug] = useState<boolean>(false);
+  const [enabledOn, setEnabledOn] = useState<string>();
+  const [disabledOn, setDisabledOn] = useState<string>();
   const [rules, setRules] = useState<IKeywordRule[]>([]);
 
   useEffect(() => {
     initForm();
   }, []);
 
   const initForm = () => {
-    get([SETTINGS_DEBUG, SETTINGS_KEYWORD_RULES]).then((result) => {
+    get([
+      SETTINGS_DEBUG,
+      SETTINGS_KEYWORD_RULES,
+      SETTINGS_ENABLED_ON,
+      SETTINGS_DISABLED_ON
+    ]).then((result) => {
       setDisplayDebug(result?.[SETTINGS_DEBUG] || false);
       setRules(result?.[SETTINGS_KEYWORD_RULES] || [createRule()]);
+      setEnabledOn(result?.[SETTINGS_ENABLED_ON] || null);
+      setDisabledOn(result?.[SETTINGS_DISABLED_ON] || null);
     });
   };
 
@@ -57,7 +68,6 @@ export default function Options() {
       id: uid(),
       keywords: null,
       cssStyles: null,
-      enabledOn: null,
       highlightCompleteWords: false,
     };
   };
@@ -80,8 +90,13 @@ export default function Options() {
   const handleApply = async () => {
     await set({
       [SETTINGS_DEBUG]: displayDebug,
+      [SETTINGS_ENABLED_ON]: enabledOn,
+      [SETTINGS_DISABLED_ON]: disabledOn,
       [SETTINGS_KEYWORD_RULES]: rules,
     });
+
+    chrome.runtime.sendMessage({ type: EVENT_OPTIONS_SAVED });
+
     alert(TEXT_OPTIONS_SAVED_SUCCESSFULLY);
   };
 
@@ -93,6 +108,18 @@ export default function Options() {
     setDisplayDebug(false);
   };
 
+  const handleEnabledOnChange: React.ChangeEventHandler<HTMLInputElement> = (
+    event
+  ) => {
+    setEnabledOn(event.target.value);
+  };
+
+  const handleDisabledOnChange: React.ChangeEventHandler<HTMLInputElement> = (
+    event
+  ) => {
+    setDisabledOn(event.target.value);
+  };
+
   return (
     <ThemeProvider theme={theme}>
       <CssBaseline />
@@ -123,7 +150,7 @@ export default function Options() {
             ))}
           </Grid>
 
-          <Grid container spacing={2} alignItems="center">
+          <Grid container spacing={2} sx={{ my: { xs: 2 } }} alignItems="center">
             <Grid item xs={6}>
               <Button variant="contained" onClick={handleAddRule}>
                 Add Keywords
@@ -144,6 +171,34 @@ export default function Options() {
             </Grid>
           </Grid>
 
+          <Grid container spacing={2}>
+            <Grid item xs={6}>
+              <TextField
+                id="enabledon"
+                label="Enabled on"
+                multiline
+                rows={3}
+                value={enabledOn}
+                placeholder="https://www.linkedin.com/*"
+                onChange={handleEnabledOnChange}
+                fullWidth
+              />
+            </Grid>
+
+            <Grid item xs={6}>
+              <TextField
+                id="disabledon"
+                label="Disabled on"
+                multiline
+                rows={3}
+                value={disabledOn}
+                placeholder="https://www.google.com/*"
+                onChange={handleDisabledOnChange}
+                fullWidth
+              />
+            </Grid>
+          </Grid>
+
           <Box sx={{ display: "flex", justifyContent: "center" }}>
             <Button
               variant="contained"

src/pages/options/components/KeywordRule.tsx

@@ -11,7 +11,6 @@ export interface IKeywordRule {
   id: string;
   keywords: string;
   cssStyles: string;
-  enabledOn: string;
   highlightCompleteWords: boolean;
 }
 
@@ -24,7 +23,6 @@ export default function KeywordRule(props: KeywordRuleProps) {
   const {
     keywords,
     cssStyles,
-    enabledOn,
     highlightCompleteWords,
     onRuleChange,
     onDeleteRule,
@@ -48,15 +46,6 @@ export default function KeywordRule(props: KeywordRuleProps) {
     });
   };
 
-  const handleEnabledOnChange: React.ChangeEventHandler<HTMLInputElement> = (
-    event
-  ) => {
-    onRuleChange({
-      ...props,
-      enabledOn: event.target.value,
-    });
-  };
-
   const handleHighlightCompleteWordsChange: React.ChangeEventHandler<
     HTMLInputElement
   > = (event) => {
@@ -95,7 +84,7 @@ export default function KeywordRule(props: KeywordRuleProps) {
         </IconButton>
       </Grid>
 
-      <Grid item xs={6}>
+      <Grid item xs={12}>
         <TextField
           id="cssstyles"
           label="CSS styles"
@@ -108,19 +97,6 @@ export default function KeywordRule(props: KeywordRuleProps) {
         />
       </Grid>
 
-      <Grid item xs={6}>
-        <TextField
-          id="enabledon"
-          label="Enabled on"
-          multiline
-          rows={3}
-          value={enabledOn}
-          placeholder="https://www.linkedin.com/"
-          onChange={handleEnabledOnChange}
-          fullWidth
-        />
-      </Grid>
-
       <Grid item xs={12} textAlign="left">
         <FormControlLabel
           control={

src/services/constants.tsx

@@ -1,4 +1,6 @@
 export const SETTINGS_DEBUG = "settings.debug";
+export const SETTINGS_ENABLED_ON = "settings.enabledOn";
+export const SETTINGS_DISABLED_ON = "settings.disabledOn";
 export const SETTINGS_KEYWORD_RULES = "settings.keyword_rules";
 export const OBSERVABLE_DEBOUNCE_TIME_MS = 500;
 
@@ -7,3 +9,5 @@ export const TEXT_OPTIONS = "Options";
 export const TEXT_OPTIONS_DISPLAY_DEBUG = "Display debug popup";
 export const TEXT_OPTIONS_SAVED_SUCCESSFULLY =
   "Your options have been successfully saved.";
+
+export const EVENT_OPTIONS_SAVED = "options.saved";