filter

neeeeecka · Jul 29, 2020 · f19e0fc · f19e0fc
1 parent 205d4a9
commit f19e0fc
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 9 deletions.
diff --git a/background.js b/background.js
@@ -2,13 +2,49 @@
 //   console.log(request);
 //   sendResponse({ farewell: "goodbye" });
 // });
+let customSlogans = [];
+
+chrome.storage.sync.get("savedCustomSlogans", function(items) {
+  customSlogans = items.savedCustomSlogans;
+  updateUserBannedList("");
+});
+
+const userBannedSlogansList = document.getElementById("userBannedSlogansList");
 
 const bannedSlogansList = document.getElementById("bannedSlogansList");
 const page1 = document.getElementById("page1");
 const page2btn = document.getElementById("s_page2");
 const page1btn = document.getElementById("s_page1");
 const container = document.getElementById("container");
 
+const customSloganTextbox = document.getElementById("customSlogan");
+const addSlogan = document.getElementById("add");
+
+customSloganTextbox.onkeyup = () => {
+  updateUserBannedList(customSloganTextbox.value);
+};
+
+addSlogan.onclick = () => {
+  const customSlogan = customSloganTextbox.value;
+  if (!customSlogans.includes(customSlogan)) {
+    customSlogans.push(customSlogan);
+
+    chrome.storage.sync.set({ savedCustomSlogans: customSlogans }, function() {
+      updateUserBannedList(customSloganTextbox.value);
+    });
+  }
+};
+
+function updateUserBannedList(filter) {
+  userBannedSlogansList.innerHTML = "";
+  customSlogans.forEach((slogan, i) => {
+    if (slogan.includes(filter)) {
+      let sloganDOM = span(span(i + 1) + span(slogan) + button(i, "-"));
+      userBannedSlogansList.innerHTML += sloganDOM;
+    }
+  });
+}
+
 page2btn.onclick = () => {
   page1.style.marginLeft = "-400px";
 };
@@ -19,6 +55,9 @@ page1btn.onclick = () => {
 function span(text) {
   return "<span>" + text + "</span>";
 }
+function button(id, text) {
+  return "<button id = " + id + ">" + text + "</button>";
+}
 
 //get banned slogans
 chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {

diff --git a/manifest.json b/manifest.json
@@ -14,5 +14,5 @@
   "browser_action": {
     "default_popup": "popup.html"
   },
-  "permissions": ["activeTab"]
+  "permissions": ["activeTab", "storage"]
 }
diff --git a/popup.html b/popup.html
@@ -28,30 +28,34 @@
       display: inline-block;
       padding: 0 15px;
     }
-    #bannedSlogansList {
+    .list {
       overflow: auto;
       max-height: 200px;
     }
-    #bannedSlogansList > span {
+    .list > span {
       display: flex;
       width: 100%;
       overflow: hidden;
       color: whitesmoke;
       padding: 5px 0;
       cursor: pointer;
     }
-    #bannedSlogansList > span > span {
+    .list > span > span {
       display: inline-block;
     }
-    #bannedSlogansList > span:nth-child(2n) {
+    .list > span:nth-child(2n) {
       background: rgb(34, 34, 34);
     }
-    #bannedSlogansList > span > span:first-child {
+    .list > span > span:first-child {
       flex-shrink: 0;
       width: 50px;
       text-align: center;
       margin-right: 10px;
     }
+    .list > span > button {
+      margin: auto;
+      margin-right: 10px;
+    }
     .pageBtn {
       display: block;
       width: 100%;
@@ -75,16 +79,16 @@
           &gt; Go to word banning settings
         </button>
         <span class="h">Banned slogans found on this webpage: </span>
-        <div id="bannedSlogansList"></div>
+        <div id="bannedSlogansList" class="list"></div>
       </div>
       <div id="page2" class="page">
         <button id="s_page1" class="pageBtn">&lt; Go back</button>
         <span class="h">Add your own banned slogans: </span>
         <span>
-          <input type="text" placeholder="Type..." />
+          <input type="text" id="customSlogan" placeholder="Type..." />
           <button id="add">+</button>
         </span>
-        <div id="userBannedSlogansList"></div>
+        <div id="userBannedSlogansList" class="list"></div>
       </div>
     </div>
   </body>