feat: add toggle to disable and enable filtering, also increase popup…

… width
r-erd · Apr 23, 2023 · e9a737b · e9a737b
1 parent d4df3a0
commit e9a737b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 28 deletions.
diff --git a/background.js b/background.js
@@ -4,7 +4,7 @@ chrome.runtime.onInstalled.addListener(() => {
     chrome.storage.local.get(['options'], function (result) {
         if (typeof (result) == "undefined") {
             console.log("initialized options")
-            chrome.storage.local.set({ options: [false, false, false, false] });
+            chrome.storage.local.set({ options: [false, false, false, false, false] });
         }
     });
     chrome.storage.local.get(['keywords'], function (result) {

diff --git a/content.js b/content.js
@@ -1,6 +1,7 @@
 // Remove articles when the page loads
 console.debug("injected content.js mydealz_enhance");
 let forbiddenWords = []
+let filterEnabled = true
 
 chrome.runtime.sendMessage({ action: 'getKeywords' }, (keywords) => {
     console.debug("sent initial getKeywords");
@@ -9,28 +10,20 @@ chrome.runtime.sendMessage({ action: 'getKeywords' }, (keywords) => {
     console.debug("removed images on pageload")
 });
 
+let userFilterEnable = false
 chrome.runtime.sendMessage({ action: 'getOptions' }, (options) => {
     console.debug("sent initial getOptions");
     console.log(options)
     hideImages(options[0])
     hideUserHtml(options[1])
     hideCategories(options[2])
     enableGreyscale(options[3])
+    enableFiltering(options[4])
     console.debug("set options on pageload")
 
 });
 
 
-filterEnabled = true
-try {
-    // add hint that the threadList is filtered
-    const filteredHint = '<li class="subNavMenu-item--separator cept-sort-tab test-tablink-discussed"><span class="filtered-hint">🐊 Filtered</span></li>';
-    document.querySelectorAll(".subNavMenu-list").forEach(ul => ul.insertAdjacentHTML('beforeend', filteredHint));
-} catch {
-    filterEnabled = false
-}
-
-
 function hideImages(input) {
     const main = document.querySelector('main');
 
@@ -79,6 +72,23 @@ function enableGreyscale(input) {
     }
 }
 
+function enableFiltering(input) {
+    userFilterEnable = input
+
+    if (userFilterEnable) {
+        try {
+            // add hint that the threadList is filtered
+            let inner = '🐊 Filtered'
+            let child = '<a style="height: 30px;" <span class="filtered-hint">' + inner + ' </span></a>'
+            let filteredHint = '<li style="height: 3.25062em; display: flex; align-items: center;" class="subNavMenu-item--separator cept-sort-tab">' + child + '</li>';
+
+            document.querySelectorAll(".subNavMenu-list").forEach(ul => ul.insertAdjacentHTML('beforeend', filteredHint));
+        } catch {
+            filterEnabled = false
+        }
+    }
+}
+
 chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 
     if (request.type === "KEYWORDS_RECEIVED") {
@@ -98,7 +108,7 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
 });
 
 function removeArticles() {
-    if (filterEnabled) {
+    if (filterEnabled && userFilterEnable) {
         let articles = document.querySelectorAll('article')
         for (let article of articles) {
             // Check if article is a valid DOM element

diff --git a/popup.html b/popup.html
@@ -6,7 +6,7 @@
   <title>mydealz enhance</title>
   <style>
     .container {
-      min-height: 150px;
+      min-height: 130px;
       border-radius: 10px;
       padding: 10px;
       border: 3px solid green;
@@ -18,7 +18,7 @@
       margin-top: 0;
       margin-bottom: 0px;
       text-align: right;
-      margin-left: 100px;
+      margin-left: 300px;
     }
 
     .tooltip {
@@ -51,7 +51,7 @@
     }
 
     body {
-      min-width: 300px;
+      min-width: 500px;
       min-height: 150px;
       overflow-x: hidden;
     }
@@ -126,17 +126,12 @@
         can
         click it to remove it from the list.
         </span>
-        </div>
+    </div>
         <label>
       <input class="checkbox" type="checkbox" id="hide-images-checkbox">
       Hide Images
       </label>
-<!--      <br>
-      <label>
-      <input class="checkbox" type="checkbox" id="hide-preview-checkbox">
-      Hide Description-Preview
-      </label> -->
-      <br>
+    <br>
       <label>
       <input class="checkbox" type="checkbox" id="remove-colors-checkbox">
       Black/White Mode
@@ -147,11 +142,18 @@
       Hide Category-Banner
       </label>
       <br>
-    <h4>List of blocked keywords:</h4>
-    <ul id="keywords-list">
-    </ul>
-    <input class="textInput" id="keywordInput" type="text">
-    <button id="add-keyword-button" class="button">Add</button>
+      <label>
+        <input class="checkbox" type="checkbox" id="disable-filter-checkbox">
+        Enable Keyword-Filter
+      </label>
+      <div id="keywordComponent">
+          <h4>List of blocked keywords:</h4>
+          <ul id="keywords-list">
+          </ul>
+          <input class="textInput" id="keywordInput" type="text">
+          <button id="add-keyword-button" class="button">Add</button>
+    </div>
+
     <script src="popup.js"></script>
     </div>
 </body>

diff --git a/styles.css b/styles.css
@@ -93,11 +93,11 @@ main .btn--mode-boxSec {
     -o-filter: none;
 }
 .filtered-hint {
+    margin-left: 10px;
     border: 2px solid green;
     border-radius: 10px;
     padding: 5px;
     background-color: white;
     color: green;
-    margin-top: 13px;
     height: fit-content;
 }