Multiple mutes

src/popup/popup.css

@@ -77,11 +77,15 @@ input:checked + .slider:before {
     padding-bottom: 5px;
 }
 
-#idToHide {
+.idToHide {
     margin: 10px;
 }
 
-.id_list {
+.idToHide:hover {
+    background-color: white;
+}
+
+#id_list {
     background-color: #dcdfde;
     color: black;
     width: 100vw;

src/popup/popup.html

@@ -14,8 +14,8 @@
         <span class="slider round"></span>
       </label>
     </div>
-    <div class="id_list">
-      <div id="idToHide"></div>
+    <div id="id_list">
+      <div class="idToHide"></div>
     </div>
   </body>
 </html>

src/popup/popup.js

@@ -2,13 +2,21 @@ import './popup.css'
 
 //let disableButton = document.getElementById('disableButton');
 let disableCheckbox = document.getElementById('disableCheckbox');
-let idToHideDisplay = document.getElementById('idToHide');
+let idToHideDisplay = document.getElementsByClassName('idToHide');
+let idList = document.getElementById("id_list");
 let status = document.getElementById('status');
-var isExtensionOn;
-var idToHide;
+let isExtensionOn;
+let idToHide = [];
 
-var enableText = "Кринж офф";
-var disableText = "Кринж он";
+let enableText = "Кринж офф";
+let disableText = "Кринж он";
+
+function idBtnHTML(id) {
+    const element = document.createElement('div');
+    element.setAttribute('class', 'idToHide');
+    element.innerHTML = id;
+    return element;
+}
 
 chrome.storage.sync.get('isExtensionOn', function(data) {
     isExtensionOn = data.isExtensionOn;
@@ -23,7 +31,22 @@ chrome.storage.sync.get('isExtensionOn', function(data) {
 
 chrome.storage.sync.get('idToHide', function(data) {
     idToHide = data.idToHide;
-    idToHideDisplay.innerText = idToHide;
+    for (const id in idToHide) {
+        const row = idBtnHTML(idToHide[id]);
+        idList.appendChild(row);
+    }
+    for (const element of idToHideDisplay) {
+        element.addEventListener('click', function() {
+            const index = idToHide.indexOf(element.innerText)
+            if (index > -1) {
+                idToHide.splice(index, 1);
+            }
+            chrome.storage.sync.set({idToHide: idToHide}, function() {
+                element.innerText = '';
+                console.log('Cleared idToHide');
+            });
+        });
+    };    
 });
 
 disableCheckbox.addEventListener('change', (event) => {
@@ -37,11 +60,4 @@ disableCheckbox.addEventListener('change', (event) => {
     chrome.storage.sync.set({isExtensionOn}, function() {
         console.log('isExtensionOn: '+isExtensionOn);
     });
-});
-
-idToHideDisplay.addEventListener('click', function() {
-    chrome.storage.sync.set({idToHide: ''}, function() {
-        idToHideDisplay.innerText = '';
-        console.log('Cleared idToHide');
-    });
-});
+});