Add advance configs & misc

dthung1602 · May 9, 2022 · 2cbdcd5 · 2cbdcd5
1 parent 2bd66b1
commit 2cbdcd5
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -62,15 +62,17 @@ To be updated
 2. Load extension for debugging in Chrome:
     - Make a symlink `manifest.json` -> `manifest-v3.json`
         ```shell
-        ln -s manifest.json manifest-v3.json     
+        rm manifest.json
+        ln -s manifest-v3.json manifest.json     
         ```
     - Go to [chrome://extensions/](chrome://extensions/)
     - Click on `Load unpacked` button on the top left
     - Select the cloned repo
 3. Load extension for debugging in Firefox:
     - Make a symlink `manifest.json` -> `manifest-v2.json`
         ```shell
-        ln -s manifest.json manifest-v2.json     
+        rm manifest.json
+        ln -s manifest-v2.json manifest.json     
         ```
     - Go to [about:debugging#/runtime/this-firefox](about:debugging#/runtime/this-firefox)
     - Click on `Load Temporary Add-on`

diff --git a/images/dont-open-it.gif b/images/dont-open-it.gif
diff --git a/popup/popup.css b/popup/popup.css
@@ -1,8 +1,6 @@
 body {
-    width: 350px;
-    min-height: 400px;
-    padding: 1rem;
-    /*border: 1px solid gray;*/
+    width: 400px;
+    margin: 0;
 
     background-color: #ff9295;
 
@@ -12,6 +10,18 @@ body {
     color: white;
 }
 
+body > * {
+    padding: 8px 16px;
+}
+
+body > *:first-child {
+    padding-top: 16px;
+}
+
+body > *:last-child {
+    padding-bottom: 16px;
+}
+
 header {
     text-align: center;
     font-weight: bold;
@@ -23,7 +33,7 @@ header {
 
 .logo {
     width: 6rem;
-    margin: 1rem 0;
+    margin-top: 16px;
     transform: rotate(180deg);
     transition: all 200ms ease-in;
 }
@@ -32,44 +42,78 @@ main {
     text-align: center;
 }
 
-main > * {
-    margin: 1rem 0;
+section > * {
+    margin: 12px 0;
 }
 
-label[for='action'] {
+label {
     display: block;
-    margin-bottom: 1rem;
+    margin-bottom: 16px;
+    font-size: large;
 }
 
 .hidden {
     display: none;
 }
 
-input[type='text'], select {
+input[type='text'], input[type='number'], textarea, select {
     width: 100%;
-    height: 38px;
+    height: 40px;
     padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
     background-color: #fff;
     border: 1px solid #D1D1D1;
-    border-radius: 4px;
+    border-radius: 6px;
     box-shadow: none;
     box-sizing: border-box;
 }
 
-input[type='text']:focus, select:focus {
+input[type='text']:focus, input[type='number']:focus, textarea:focus, select:focus {
     border: 2px solid #fac400;
     outline: 0;
 }
 
-label[for="action"] {
+textarea {
+    min-height: 90px;
+}
+
+.button-container {
+    display: flex;
+    justify-content: center;
+}
+
+.button-container button {
+    height: 40px;
+    padding: 6px 20px;
+    cursor: pointer;
+
+    color: white;
+    background-color: rgba(255, 255, 255, 0.2);
+    transition: background-color 0.2s linear;
+
+    border: none;
+    outline: none;
+    border-radius: 20px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.button-container button:hover {
+    background-color: rgba(255, 255, 255, 0.4);
+}
+
+.button-container button span {
     font-size: large;
+    margin-right: 4px;
 }
 
 footer {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     flex-direction: row;
-    padding-top: 1.5rem;
+    background: rgba(122, 122, 122, 0.2);
 }
 
 footer > * {
@@ -92,10 +136,6 @@ footer a {
     border-radius: 4px;
 }
 
-.self-destruct span {
-    visibility: hidden;
-}
-
 .self-destruct:hover {
     font-weight: bold;
     background: repeating-linear-gradient(
@@ -107,8 +147,12 @@ footer a {
     );
 }
 
+.self-destruct span {
+    display: none;
+}
+
 .self-destruct:hover span {
-    visibility: visible;
+    display: inline;
 }
 
 .self-destruct-text {

diff --git a/popup/popup.html b/popup/popup.html
@@ -11,39 +11,62 @@
     <img class="logo" src="../images/logo/spam-logo.png" alt="Spamminator logo"/>
 </header>
 <main>
-    <div class="toggle-container">
-        <div class="toggle">
-            <input type="checkbox" id="toggle"/>
-            <label for="toggle"></label>
+    <section id="basic">
+        <div class="toggle-container">
+            <div class="toggle">
+                <input type="checkbox" id="toggle"/>
+                <label for="toggle"></label>
+            </div>
         </div>
-    </div>
-    <div>
-        <label for="action">What to do</label>
-        <select id="action">
-            <option value="replace-with-image">Replace with image</option>
-            <option value="replace-with-text">Replace with text</option>
-            <option value="remove">Remove completely</option>
-        </select>
-    </div>
-    <div class="clean-spam-option hidden" id="replace-with-image">
-        <select id="image">
-            <option value="behold-the-spamminator.jpg">Behold! The spamminator!</option>
-            <option value="destroyed-by-spamminator.jpg">Destroyed by the spamminator</option>
-            <option value="just-spamming.jpg">Just spamming</option>
-            <option value="spam.png">Spam!</option>
-            <option value="spam-everywhere.jpg">Spam everywhere</option>
-            <option value="spam-man.png">Spam man</option>
-            <option value="spam-spam-spam.webp">Spam? Spam? Spam?</option>
-            <option value="what-kind-of-spam-is-this.jpg">What kind of spam is this?</option>
-            <option value="you-shall-not-pass.jpeg">You shall not pass</option>
-            <option value="random">Random</option>
-        </select>
-    </div>
-    <div class="clean-spam-option hidden" id="replace-with-text">
-        <input id="text" value="" type="text" placeholder="Enter text (HTML allowed)"/>
-    </div>
-    <div class="clean-spam-option hidden" id="remove">
-    </div>
+        <div>
+            <label for="action">What to do</label>
+            <select id="action">
+                <option value="replace-with-image">Replace with image</option>
+                <option value="replace-with-text">Replace with text</option>
+                <option value="remove">Remove completely</option>
+            </select>
+        </div>
+        <div class="clean-spam-option hidden" id="replace-with-image">
+            <select id="image">
+                <option value="behold-the-spamminator.jpg">Behold! The spamminator!</option>
+                <option value="destroyed-by-spamminator.jpg">Destroyed by the spamminator</option>
+                <option value="dont-open-it.gif">Don't open it</option>
+                <option value="just-spamming.jpg">Just spamming</option>
+                <option value="spam.png">Spam!</option>
+                <option value="spam-everywhere.jpg">Spam everywhere</option>
+                <option value="spam-man.png">Spam man</option>
+                <option value="spam-spam-spam.webp">Spam? Spam? Spam?</option>
+                <option value="what-kind-of-spam-is-this.jpg">What kind of spam is this?</option>
+                <option value="you-shall-not-pass.jpeg">You shall not pass</option>
+                <option value="random">Random</option>
+            </select>
+        </div>
+        <div class="clean-spam-option hidden" id="replace-with-text">
+            <input id="text" value="" type="text" placeholder="Enter text (HTML allowed)"/>
+        </div>
+        <div class="clean-spam-option hidden" id="remove">
+        </div>
+        <div class="button-container">
+            <button id="advance-btn"><span>&#9881;</span> Advance</button>
+        </div>
+    </section>
+    <section id="advance" class="hidden">
+        <div>
+            <label for="check-interval" title="How often the spamminator search & remove spams">
+                Clear spam interval (in millisecond)
+            </label>
+            <input id="check-interval" value="" type="number">
+        </div>
+        <div>
+            <label for="ban-domain" title="Require page refresh to take affect">
+                Ban domains
+            </label>
+            <textarea id="ban-domain" placeholder="Enter ban domains, separated by newlines" rows="5"></textarea>
+        </div>
+        <div class="button-container">
+            <button id="basic-btn"><span>&#171;</span> Basic</button>
+        </div>
+    </section>
 </main>
 <footer>
     <a target="_blank" href="https://github.com/dthung1602/the-spamminator">Homepage</a>

diff --git a/popup/popup.js b/popup/popup.js
@@ -21,16 +21,31 @@ if (window.browser === undefined) {
   }
 }
 
+// Util
+function serializeDomains(text) {
+  return text.split("\n").map(x => x.trim().toLowerCase()).filter(Boolean);
+}
+
+function deserializeDomains(domains) {
+  return domains.join("\n");
+}
+
 // Load value from storage to UI
 async function loadSettings() {
   // TODO add ban domain settings
   let {
     enable,
+    clearSpamInterval,
     cleanSpamAction,
     cleanSpamText,
-    cleanSpamImage
-  } = await browser.storage.local.get(["enable", "cleanSpamAction", "cleanSpamText", "cleanSpamImage"]);
+    cleanSpamImage,
+    banDomains
+  } = await browser.storage.local.get([
+    "enable", "clearSpamInterval", "cleanSpamAction",
+    "cleanSpamText", "cleanSpamImage", "banDomains"
+  ]);
 
+  // simple
   document.getElementById("toggle").checked = enable;
   document.getElementById("action").value = cleanSpamAction;
   document.getElementById("image").value = cleanSpamImage;
@@ -43,6 +58,10 @@ async function loadSettings() {
   }
 
   document.getElementById(cleanSpamAction).classList.remove("hidden");
+
+  // advance
+  document.getElementById("check-interval").value = clearSpamInterval;
+  document.getElementById("ban-domain").value = deserializeDomains(banDomains);
 }
 loadSettings().catch(console.error);
 
@@ -72,12 +91,31 @@ document.getElementById("action").addEventListener("change", selectAction);
 const saveOptions = (event) => {
   const cleanSpamText = document.getElementById("text").value;
   const cleanSpamImage = document.getElementById("image").value;
-  browser.storage.local.set({ cleanSpamText, cleanSpamImage }).catch(console.error);
+  const clearSpamInterval = parseInt(document.getElementById("check-interval").value);
+  const banDomains = serializeDomains(document.getElementById("ban-domain").value);
+  console.log({clearSpamInterval, banDomains});
+  browser.storage.local.set({ cleanSpamText, cleanSpamImage, clearSpamInterval, banDomains }).catch(console.error);
 }
 document.getElementById("image").addEventListener("change", saveOptions);
 document.getElementById("text").addEventListener("change", saveOptions);
+document.getElementById("check-interval").addEventListener("change", saveOptions);
+document.getElementById("ban-domain").addEventListener("change", saveOptions);
+
+// Advance
+const showAdvance = () => {
+  document.getElementById("basic").classList.add("hidden");
+  document.getElementById("advance").classList.remove("hidden");
+}
+document.getElementById("advance-btn").addEventListener("click", showAdvance);
+
+// Advance
+const showBasic = () => {
+  document.getElementById("advance").classList.add("hidden");
+  document.getElementById("basic").classList.remove("hidden");
+}
+document.getElementById("basic-btn").addEventListener("click", showBasic);
 
-// self-destruct
+// Self-destruct
 function selfDestruct() {
   browser.management.uninstallSelf().catch(console.error);
 }

diff --git a/scripts/clean-spams.js b/scripts/clean-spams.js
@@ -16,7 +16,7 @@ function getAncestor(node, num, tillEncounterClass) {
 }
 
 function log(nodes) {
-  console.log(`Found ${nodes.length} bangers in ${window.document.title}`);
+  console.log(`Found ${nodes.length} link in ${window.document.title}`);
 }
 
 let counter = 0;
@@ -121,5 +121,7 @@ async function cleanSpams() {
     .forEach(action);
 }
 
-cleanSpams();
-setInterval(cleanSpams, 2000);
+cleanSpams().catch(console.error);
+browser.storage.local.get(["clearSpamInterval"])
+  .then(({ clearSpamInterval }) => setInterval(cleanSpams, clearSpamInterval))
+  .catch(console.error);
diff --git a/scripts/service-worker.js b/scripts/service-worker.js
@@ -18,6 +18,7 @@ const DEFAULT_BAN_DOMAINS = [
   "mangalilo.com",
   "readerzoneclub.xyz",
   "manga4reader.com",
+  "elitemanga.org",
   // Other stuff
   "bit.do",
   "minepi.com",
@@ -31,6 +32,7 @@ async function migrateToVer1() {
     version: "1.0",
     banDomains: DEFAULT_BAN_DOMAINS,
     enable: true,
+    clearSpamInterval: 1000,
     cleanSpamAction: "replace-with-image",
     cleanSpamText: "",
     cleanSpamImage: "random",