Multiple mutes

extension/dist/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>
   <script src="popup.js"></script></body>
 </html>

src/dom/controls.js

@@ -65,20 +65,26 @@ function setIdToHideHandle(chatBody) {
     return function (event) {
         const clickedId = event.target.id.substr(4);     // get id of sender from element id
 
-        chrome.storage.sync.set({idToHide: clickedId}, function () {
-            hideExistingMessages(clickedId);
-            console.log('idToHide: ' + clickedId);
+        chrome.storage.sync.get('idToHide', function(data) {
+            let idToHide = data.idToHide==='' ? [] : data.idToHide;
+            idToHide.push(clickedId);
+            chrome.storage.sync.set({idToHide: idToHide}, function () {
+                hideExistingMessages();
+                console.log('idToHide: ' + data.idToHide);
+            });
         });
     }
 }
 
-export function hideExistingMessages(id) {
-    const chatBody = getChatBody();
-    for (let item of chatBody.children) {
-        if (item.dataset.peer === id) {
-            item.style.display = "none";
+export function hideExistingMessages() {
+    chrome.storage.sync.get('idToHide', function(data) {
+        const chatBody = getChatBody();
+        for (let item of chatBody.children) {
+            if (data.idToHide.includes(item.dataset.peer)) {
+                item.style.display = "none";
+            }
         }
-    }
+    })
 }
 
 // Try to add controls until successful. Needed for page refresh.

src/dom/hide_element.js

@@ -18,11 +18,10 @@ function newMessageHandler(message, idToHide) {
 
         chrome.storage.sync.get('isExtensionOn', function(data) {
             if (data.isExtensionOn) {
-                if (message.dataset.peer === idToHide) {
+                if (idToHide.includes(message.dataset.peer)) {
                     message.style.display = "none";
                 }
             }
         });
     }
-
 }

src/dom/main.js

@@ -13,6 +13,7 @@ function init() {
         if (tryToInitControls()) {
             createTryToInitInterval();
             addNewMessageEventListener();
+            hideExistingMessages();
         }
     })
 }

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');
-    });
-});
+});