Отображение имен

src/dom/controls.js

@@ -14,15 +14,9 @@ function muteBtnHTML(id) {
     return element;
 }
 
-/**
+export function tryToAddControls(target) {
- *
+    if (target.className === 'im-mess--check fl_l') {
- * @param chatBody {HTMLElement}
+        const message = target.parentElement;
- * @return {function(...[*]=)}
- */
-function addControls(event) {
-    console.log(event);
-    if (event.target.className === 'im-mess--check fl_l') {
-        const message = event.target.parentElement;
         addControlButton(message)
     }
 }
@@ -61,14 +55,20 @@ function addActionAreaEvents(actionsArea) {
 function setIdToHideHandle() {
     return function (event) {
         const clickedId = event.target.id.substr(4);     // get id of sender from element id
+        let clickedName = event.target.parentElement.parentElement.parentElement.parentElement;
+        clickedName = clickedName.children[0].children[0].children[0].innerText;
 
         chrome.storage.sync.get('idsToHide', function(data) {
             let idsToHide = data.idsToHide || [];
-            idsToHide.push(clickedId);
+            if (idsToHide.filter(user => user.id == clickedId).length === 0) {
+                idsToHide.push({
+                    id: clickedId,
+                    name: clickedName
+                });
                 chrome.storage.sync.set({idsToHide: idsToHide}, function () {
                     hideExistingMessages();
-                console.log('idsToHide: ' + data.idsToHide);
                 });
+            }
         });
     }
 }
@@ -77,7 +77,7 @@ export function hideExistingMessages() {
     chrome.storage.sync.get('idsToHide', function(data) {
         const chatBody = getChatBody();
         for (let item of chatBody.children) {
-            if (data.idsToHide.includes(item.dataset.peer)) {
+            if (data.idsToHide.filter(user => user.id == item.dataset.peer).length > 0) {
                 item.style.display = "none";
             }
         }

src/dom/dom.css

@@ -39,6 +39,7 @@
 .mute_message {
     margin-top: .46rem;
     margin-left: 4px;
+    margin-right: 3px;
     display: inline-block;
     vertical-align: top;
     width: 12px;

src/dom/hide_element.js

@@ -1,4 +1,5 @@
 import {getChatBody} from "../utils/getChatBody";
+import {tryToAddControls} from "./controls";
 
 export function addNewMessageEventListener() {
     const chatBody = getChatBody();
@@ -8,16 +9,16 @@ export function addNewMessageEventListener() {
 }
 
 function newMessageHandler(message) {
+    tryToAddControls(message);
     if (message.className === 'im-mess-stack _im_mess_stack ') {
         chrome.storage.sync.get('isExtensionOn', function(data) {
-            let isExtensionOn = data.isExtensionOn;
+            if (data.isExtensionOn) {
                 chrome.storage.sync.get('idsToHide', function(data) {
-                if (isExtensionOn) {
+                    if (data.idsToHide.filter(user => user.id == message.dataset.peer).length > 0) {
-                    if (data.idsToHide.includes(message.dataset.peer)) {
                         message.style.display = "none";
                     }
-                }
                 });
+            }
         });
     }
 }

src/popup/popup.js

@@ -7,14 +7,14 @@ let idList = document.getElementById("id_list");
 let isExtensionOn;
 let idsToHide = [];
 
-function idBtnHTML(id) {
+function idBtnHTML(user) {
     const element = document.createElement('div');
     element.setAttribute('class', 'idToHide');
     element.innerHTML = `
-        <a href="https://vk.com/id${id}" target="_blank" title="Перейти в профиль">🤐 id${id}</a>
+        <a href="https://vk.com/id${user.id}" target="_blank" title="Перейти в профиль">🤐 ${user.name}</a>
         <span class="del_item" title="Удалить">🗑️</span>
     `;
-    element.id = id;
+    element.id = user.id;
     return element;
 }
 
@@ -34,10 +34,7 @@ chrome.storage.sync.get('idsToHide', function(data) {
         for (const child of element.childNodes) {
             if (child.className === "del_item") {
                 child.addEventListener('click', function() {
-                    const index = idsToHide.indexOf(element.id)
+                    idsToHide = idsToHide.filter(user => user.id != element.id);
-                    if (index > -1) {
-                        idsToHide.splice(index, 1);
-                    }
                     chrome.storage.sync.set({idsToHide: idsToHide}, function() {
                         element.remove();
                         console.log('Cleared idsToHide');