styles

background.js

@@ -26,22 +26,34 @@ customSloganTextbox.onkeyup = () => {
 };
 
 addSlogan.onclick = () => {
-  const customSlogan = customSloganTextbox.value;
+  const customSlogan = customSloganTextbox.value.toLowerCase();
   if (!customSlogans.includes(customSlogan)) {
     customSlogans.push(customSlogan);
 
     chrome.storage.sync.set({ savedCustomSlogans: customSlogans }, function() {
-      updateUserBannedList(customSloganTextbox.value);
+      customSloganTextbox.value = "";
+      updateUserBannedList("");
     });
   }
 };
 
 function updateUserBannedList(filter) {
+  filter = filter.toLowerCase();
+
+  if (customSlogans.length == 0) {
+    userBannedSlogansList.innerHTML = fullDiv(
+      "Type in word in the textbox and press '+' to add a new word"
+    );
+    return;
+  }
+
   userBannedSlogansList.innerHTML = "";
   customSlogans.forEach((slogan, i) => {
     if (slogan.includes(filter)) {
       let sloganDOM = span(
-        span(i + 1) + span(slogan) + button("removeSlogan-" + i, "-")
+        span(i + 1) +
+          span(slogan) +
+          button("removeSlogan-" + i, "<i class='minus' />")
       );
       userBannedSlogansList.innerHTML += sloganDOM;
     }
@@ -70,6 +82,9 @@ page1btn.onclick = () => {
   page1.style.marginLeft = "0px";
 };
 
+function fullDiv(text) {
+  return "<div class='fullDiv'>" + span(text) + "</div>";
+}
 function span(text) {
   return "<span>" + text + "</span>";
 }
@@ -85,10 +100,10 @@ chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
     let resultContent = "";
 
     if (response.length == 0) {
-      resultContent = span("Hooray, no banned words!");
+      resultContent = fullDiv("Hooray, no banned words!");
     } else {
       response.forEach((slogan, i) => {
-        resultContent += span(span(i) + span(slogan));
+        resultContent += span(span(i + 1) + span(slogan));
       });
     }
 

content.js

@@ -6,6 +6,13 @@ const slogans = {};
 let slogansKeys = [];
 const bannedSlogans = [];
 
+chrome.storage.sync.get("savedCustomSlogans", function(items) {
+  items.savedCustomSlogans.forEach(slogan => {
+    slogansKeys.push(slogan);
+    slogans[slogan] = true;
+  });
+});
+
 // const url = "https://en.wikipedia.org/wiki/List_of_political_slogans";
 const url =
   "https://en.wikipedia.org/w/api.php?" +

popup.html

@@ -14,31 +14,51 @@
       width: 400px;
       overflow: hidden;
       display: flex;
-      padding: 5px 0;
     }
     .page {
       transition: all 0.25s ease;
       width: 100%;
       flex-shrink: 0;
     }
+    .fullDiv {
+      display: flex;
+      height: 100%;
+      text-align: center;
+      font-size: 0.8em;
+    }
+    .fullDiv > span {
+      color: rgb(206, 206, 206);
+      font-weight: bold;
+      font-size: 1.2em;
+      margin: auto;
+    }
     .h {
       color: whitesmoke;
       font-size: 0.8em;
       margin-bottom: 10px;
       display: inline-block;
       padding: 0 15px;
     }
+    #page1 > .list {
+      height: calc(100% - 80px);
+    }
+    #page2 > .list {
+      height: calc(100% - 120px);
+    }
     .list {
       overflow: auto;
       max-height: 200px;
+      font-size: 0.75em;
+      min-height: 20px;
+      margin-bottom: 10px;
     }
     .list > span {
       display: flex;
       width: 100%;
       overflow: hidden;
       color: whitesmoke;
       padding: 5px 0;
-      cursor: pointer;
+      line-height: 3em;
     }
     .list > span > span {
       display: inline-block;
@@ -55,37 +75,79 @@
     .list > span > button {
       margin: auto;
       margin-right: 10px;
+      background: 0;
+      border: 2px solid rgb(247, 61, 61);
+      font-weight: bold;
+      font-size: 20px;
+      text-align: center;
+      flex-shrink: 0;
+      flex-grow: 0;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+      display: flex;
+    }
+    .list > span > button:hover {
+      border: 2px solid rgb(179, 26, 26);
+    }
+    .minus {
+      margin: auto;
+      width: 10px;
+      height: 2px;
+      background: rgb(247, 61, 61);
     }
     .pageBtn {
       display: block;
       width: 100%;
       text-align: left;
       padding: 10px 15px;
       cursor: pointer;
-      background: rgb(65, 65, 65);
-      color: rgb(197, 197, 197);
+      background: black;
+      color: rgb(228, 228, 228);
+      font-weight: bold;
       outline: none;
       border: none;
+      border-bottom: 2px solid rgb(71, 71, 71);
     }
     .pageBtn:hover {
-      background: rgb(97, 97, 97);
+      background: rgb(20, 20, 20);
       color: rgb(248, 248, 248);
     }
+    .textbox {
+      display: flex;
+      margin-left: 15px;
+      margin-bottom: 10px;
+    }
+    .textbox input {
+      background: rgb(241, 241, 241);
+      border: 0;
+      padding: 8px;
+      outline: none;
+    }
+    .textbox button {
+      color: black;
+      font-weight: bold;
+      background: rgb(241, 241, 241);
+      border: 0;
+      cursor: pointer;
+      outline: none;
+      font-size: 20px;
+    }
   </style>
   <body>
     <div class="container" id="container">
       <div id="page1" class="page">
         <button id="s_page2" class="pageBtn">
-          &gt; Go to word banning settings
+          Go to word banning settings
         </button>
         <span class="h">Banned slogans found on this webpage: </span>
         <div id="bannedSlogansList" class="list"></div>
       </div>
       <div id="page2" class="page">
-        <button id="s_page1" class="pageBtn">&lt; Go back</button>
+        <button id="s_page1" class="pageBtn">Go back</button>
         <span class="h">Add your own banned slogans: </span>
-        <span>
-          <input type="text" id="customSlogan" placeholder="Type..." />
+        <span class="textbox">
+          <input type="text" id="customSlogan" placeholder="Type to search" />
           <button id="add">+</button>
         </span>
         <div id="userBannedSlogansList" class="list"></div>