added options popup to disable extension more easily

Robert01101101 · Nov 11, 2024 · c5e4e7c · c5e4e7c
1 parent dc51772
commit c5e4e7c
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 7 deletions.
diff --git a/source/content.js b/source/content.js
@@ -1,27 +1,41 @@
-console.log(chrome.runtime.getManifest().name, ': 💈 Content script loaded');
-
 async function init() {
     // Function to hide job items that contain 'Applied'
     function hideJobItems() {
         const jobItems = document.querySelectorAll('.jobs-search-results__list-item');
         var jobsHidden = 0;
         jobItems.forEach(item => {
-            // Check if the item contains a child element with the text 'Applied'
             const appliedElement = Array.from(item.querySelectorAll('li')).find(li => li.textContent.trim() === 'Applied');
             if (appliedElement) {
                 jobsHidden++;
                 item.style.display = 'none'; // Hide the job item
-                //console.log('hide-applied-jobs-linkedin - Hiding job item:', item); // Log each item being hidden
             }
         });
         console.log(chrome.runtime.getManifest().name, `: Found and hid ${jobsHidden} jobs already applied to.`); 
     }
 
-    // Initial call to hide job items
-    hideJobItems();
+    // Function to check the toggle state
+    function checkToggle(callback) {
+        chrome.storage.sync.get(['hideJobs'], (result) => {
+            const toggleState = result.hideJobs !== undefined ? result.hideJobs : true; // Default to true if not set
+            callback(toggleState);
+        });
+    }
+
+    // Check the toggle state and hide job items if enabled
+    checkToggle((state) => {
+        if (state) {
+            hideJobItems(); // Initial call to hide job items if toggle is on
+        }
+    });
 
     // Set up a MutationObserver to watch for changes in the job listings
-    const observer = new MutationObserver(hideJobItems);
+    const observer = new MutationObserver(() => {
+        checkToggle((state) => {
+            if (state) {
+                hideJobItems();
+            }
+        });
+    });
     observer.observe(document.body, { childList: true, subtree: true });
 }
 

diff --git a/source/manifest.json b/source/manifest.json
@@ -23,6 +23,17 @@
 			"run_at": "document_end"
 		}
 	],
+	"action": {
+        "default_popup": "options.html",
+        "default_icon": "icon.png"
+    },
+	"permissions": [
+		"storage"
+	],
+	"options_ui": {
+		"page": "options.html",
+		"open_in_tab": false
+	},
 	"background": {
 		"service_worker": "background.js",
 		"type": "module",

diff --git a/source/options.html b/source/options.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<head>
+    <title>Toggle Extension</title>
+    <style>
+        body {
+            width: 200px;
+            padding: 10px;
+            font-family: Arial, sans-serif;
+        }
+        #toggle {
+            display: flex;
+            align-items: center;
+        }
+        #toggle input {
+            margin-right: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h3>Hide Applied Jobs</h3>
+    <div id="toggle">
+        <input type="checkbox" id="jobToggle" checked>
+        <label for="jobToggle">Enabled</label>
+    </div>
+    <div id="status"></div>
+    <button id="save">Save</button>
+    <script src="options.js"></script>
+</body>
+</html>
diff --git a/source/options.js b/source/options.js
@@ -0,0 +1,30 @@
+// Saves options to chrome.storage
+const saveOptions = () => {
+    const hideJobsChecked = document.getElementById('jobToggle').checked;
+
+    chrome.storage.sync.set(
+      { hideJobs: hideJobsChecked },
+      () => {
+        // Update status to let user know options were saved.
+        const status = document.getElementById('status');
+        status.textContent = 'Options saved.';
+        setTimeout(() => {
+          status.textContent = '';
+        }, 750);
+      }
+    );
+  };
+
+  // Restores select box and checkbox state using the preferences
+  // stored in chrome.storage.
+  const restoreOptions = () => {
+    chrome.storage.sync.get(
+      { hideJobs: true},
+      (items) => {
+        document.getElementById('jobToggle').checked = items.hideJobs;
+      }
+    );
+  };
+
+  document.addEventListener('DOMContentLoaded', restoreOptions);
+  document.getElementById('save').addEventListener('click', saveOptions);