Исправил появление кнопок при перезагрузке

README.md

@@ -1,7 +1,7 @@
 # vk-mute
 Заглушить собеседника в беседе в ВК. 🔇
 
-На данный момент ВКонтакте не позволяет заглушать людей в беседах. Это расширение для Google Chrome берется это исправить.
+На данный момент ВКонтакте не позволяет заглушать людей в беседах. Это расширение для Chrome берется это исправить.
 
 Если нажать на кнопку 🔇 напротив сообщения в беседе, то все сообщения во всех беседах от этого отправителя будут скрыты.
 
@@ -12,3 +12,9 @@
     1. Включить режим разработчика
     2. Загрузить распакованное, выбрать каталог с расширением
 
+Расширение должно работать во всех браузерах на движке Chromium.
+
+Проверено на:
+- Google Chrome
+- Opera
+- Brave

background.js

@@ -7,8 +7,7 @@ chrome.runtime.onInstalled.addListener(function() {
         chrome.declarativeContent.onPageChanged.addRules([{
             conditions: [new chrome.declarativeContent.PageStateMatcher({
                 pageUrl: { hostEquals: 'vk.com' },
-      })
+            })],
-      ],
             actions: [new chrome.declarativeContent.ShowPageAction()]
         }]);
     });

controls.js

@@ -1,34 +1,3 @@
-var showMembersBtn = document.getElementsByClassName("_im_chat_members im-page--members")[0];
-var controlsArea;
-
-/*
-function isInt(value) {
-    return !isNaN(value) && (function(x) { return (x | 0) === x; })(parseFloat(value))
-}
-
-
-showMembersBtn.addEventListener('click', function() {
-    var checkExist = setInterval(function() {
-        controlsArea = document.getElementsByClassName("ListItem__aside");
-
-        if (controlsArea.length > 0) {
-            for (var item of controlsArea) {
-                // Narrowing the list to onle people
-                if (item.parentElement.firstElementChild.firstElementChild.classList.contains('Entity')) {
-                    var link = item.parentElement.firstElementChild.firstElementChild.children[1].firstElementChild.firstElementChild.href;
-                    var id = link.substr(link.length - 9);
-                    if (isInt(id)) {
-                        item.innerHTML += '<button class="muteBtn" id="' + id + '">' + id + '</button>';
-                    }
-                }
-            }
-
-            clearInterval(checkExist);
-        }
-    }, 100);
-});
-*/
-
 function muteBtnHTML(id) {
     return `<span class="mute_message" id="mute` + id + `">
         🔇
@@ -36,51 +5,7 @@ function muteBtnHTML(id) {
     </span>`
 }
 
-/*
 function addControls() {
-    var messages = document.getElementsByClassName("im-mess im_in _im_mess");
-
-    for (var item of messages) {
-        var actionsArea = item.getElementsByClassName("im-mess--actions")[0];
-        if (actionsArea && actionsArea.lastChild.className != "mute_message") {
-            var sender_id = item.parentElement.parentElement.parentElement["dataset"].peer
-
-            actionsArea.innerHTML += muteBtnHTML(sender_id);
-            var muteBtn = actionsArea.getElementsByClassName("mute_message")[0];
-            muteBtn.style.display = "none";
-
-            actionsArea.parentElement.addEventListener("mouseenter", function( event ) {
-                event.target.getElementsByClassName("mute_message")[0].style.display = "inline-block";
-            });
-
-            actionsArea.parentElement.addEventListener("mouseleave", function( event ) { 
-                event.target.getElementsByClassName("mute_message")[0].style.display = "none";
-            });
-
-            muteBtn.addEventListener("click", function(event) {
-                var clicked_id = event.target.id.substr(event.target.id.length - 9);
-
-                chrome.storage.sync.set({idToHide: clicked_id}, function() {
-                    hidePeer(clicked_id);
-                    console.log('idToHide: ' + clicked_id);
-                });
-            });
-        }
-    }
-}
-
-var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
-
-chatBody.addEventListener('DOMNodeInserted', function(event) {
-    if (event.target.className == 'im-mess--check fl_l') {
-        addControls();
-    }
-});
-*/
-
-var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
-
-chatBody.addEventListener('DOMNodeInserted', function(event) {
     if (event.target.className == 'im-mess--check fl_l') {
         var message = event.target.parentElement;
         
@@ -101,13 +26,68 @@ chatBody.addEventListener('DOMNodeInserted', function(event) {
             });
 
             muteBtn.addEventListener("click", function(event) {
-                var clicked_id = event.target.id.substr(4);
+                var clicked_id = event.target.id.substr(4);     // get id of sender from element id
 
                 chrome.storage.sync.set({idToHide: clicked_id}, function() {
-                    hidePeer(clicked_id);
+                    for (var item of chatBody.children) {
+                        if (item.dataset.peer == clicked_id) {
+                            item.style.display = "none";
+                        }
+                    }
+
                     console.log('idToHide: ' + clicked_id);
                 });
             });
         }
     }
+}
+
+var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
+
+chatBody.addEventListener('DOMNodeInserted', addControls);
+
+// Try to add controls until successful. Needed for page refresh.
+var controlsInterval = setInterval(function () {
+    var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
+
+    for (var item of chatBody.children) {
+        if (item.className.includes('im-mess-stack _im_mess_stack')) {
+            var messages = item.children[1].children[1].getElementsByClassName('im-mess im_in _im_mess');
+            for (var message of messages) {
+                var actionsArea = message.getElementsByClassName("im-mess--actions")[0];
+
+                if (actionsArea && actionsArea.lastChild.className != "mute_message") {
+                    var sender_id = message.parentElement.parentElement.parentElement.dataset.peer;
+
+                    actionsArea.innerHTML += muteBtnHTML(sender_id);
+                    var muteBtn = actionsArea.getElementsByClassName("mute_message")[0];
+                    muteBtn.style.display = "none";
+
+                    actionsArea.parentElement.addEventListener("mouseenter", function( event ) {
+                        event.target.getElementsByClassName("mute_message")[0].style.display = "inline-block";
                     });
+
+                    actionsArea.parentElement.addEventListener("mouseleave", function( event ) { 
+                        event.target.getElementsByClassName("mute_message")[0].style.display = "none";
+                    });
+
+                    muteBtn.addEventListener("click", function(event) {
+                        var clicked_id = event.target.id.substr(4);     // get id of sender from element id
+
+                        chrome.storage.sync.set({idToHide: clicked_id}, function() {
+                            for (var item of chatBody.children) {
+                                if (item.dataset.peer == clicked_id) {
+                                    item.style.display = "none";
+                                }
+                            }
+
+                            console.log('idToHide: ' + clicked_id);
+                        });
+                    });
+                } else if (actionsArea.lastChild.className == "mute_message") {
+                    clearInterval(controlsInterval);
+                }
+            }
+        }
+    }
+}, 200);

hide_element.js

@@ -1,27 +1,37 @@
 var idToHide;
 
-function hidePeer(peer) {
+var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
+
+chatBody.addEventListener('DOMNodeInserted', function(event) {
+    if (event.target.className == 'im-mess-stack _im_mess_stack ') {
         chrome.storage.sync.get('idToHide', function(data) {
-        idToHide = data.idToHide
+            idToHide = data.idToHide;
         });
 
         chrome.storage.sync.get('isExtensionOn', function(data) {
             if (data.isExtensionOn) {
-            var x = document.querySelectorAll('[data-peer="'+peer+'"]');
+                if (event.target.dataset.peer == idToHide) {
-
+                    event.target.style.display = "none";
-            x.forEach(
-                function(val) {
-                    val.style.display = "none";
                 }
-            )
             }
         });
     }
+});
 
-//var interval = window.setInterval(function(){ hidePeer(idToHide) }, 500);
+chrome.storage.sync.get('idToHide', function(data) {
+    idToHide = data.idToHide;
+});
 
+// Try to hide until successful. Needed for page refresh.
+var hideInterval = setInterval(function () {
     var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
-
+    for (var item of chatBody.children) {
-chatBody.addEventListener('DOMNodeInserted', function() {
+        if (item.dataset.peer == idToHide) {
-    hidePeer(idToHide);
+            if (item.style.display != "none") {
-});
+                item.style.display = "none";
+            } else {
+                clearInterval(hideInterval);
+            }
+        }
+    }
+}, 200);

manifest.json

@@ -7,11 +7,13 @@
     },
     "version": "1.0",
     "description": "Позволяет заглушить нежелаемых собеседников",
-  "permissions": ["activeTab", "declarativeContent", "storage"],
+    "permissions": [
-  "background": {
+        "activeTab",
-    "scripts": [
+        "declarativeContent",
-      "background.js"
+        "storage"
     ],
+    "background": {
+        "scripts": ["background.js"],
         "persistent": false
     },
     "page_action": {
@@ -20,7 +22,7 @@
     "manifest_version": 2,
     "content_scripts": [
         {
-      "matches": ["https://*.vk.com/*"],
+            "matches": ["https://*.vk.com/im*"],
             "js": ["hide_element.js"]
         },
         {

popup.js

@@ -36,3 +36,10 @@ disableCheckbox.addEventListener('change', (event) => {
         console.log('isExtensionOn: '+isExtensionOn);
     });
 });
+
+idToHideDisplay.addEventListener('click', function() {
+    chrome.storage.sync.set({idToHide: ''}, function() {
+        idToHideDisplay.innerText = '';
+        console.log('Cleared idToHide');
+    });
+});