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

README.md

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

background.js

@@ -1,15 +1,14 @@
-chrome.runtime.onInstalled.addListener(function() {
+chrome.runtime.onInstalled.addListener(function () {
-  chrome.storage.sync.set({isExtensionOn: true}, function() {
+    chrome.storage.sync.set({ isExtensionOn: true }, function () {
-    console.log('isExtensionOn: '+true);
+        console.log('isExtensionOn: ' + true);
-  });
+    });
 
-  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
+    chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
-    chrome.declarativeContent.onPageChanged.addRules([{
+        chrome.declarativeContent.onPageChanged.addRules([{
-      conditions: [new chrome.declarativeContent.PageStateMatcher({
+            conditions: [new chrome.declarativeContent.PageStateMatcher({
-        pageUrl: {hostEquals: 'vk.com'},
+                pageUrl: { hostEquals: 'vk.com' },
-      })
+            })],
-      ],
+            actions: [new chrome.declarativeContent.ShowPageAction()]
-      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) {
-    chrome.storage.sync.get('idToHide', function(data) {
-        idToHide = data.idToHide
-    });
-
-    chrome.storage.sync.get('isExtensionOn', function(data) {
-        if (data.isExtensionOn) {
-            var x = document.querySelectorAll('[data-peer="'+peer+'"]');
-
-            x.forEach(
-                function(val) {
-                    val.style.display = "none";
-                }
-            )
-        }
-    });
-}
-
-//var interval = window.setInterval(function(){ hidePeer(idToHide) }, 500);
-
 var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
 
-chatBody.addEventListener('DOMNodeInserted', function() {
+chatBody.addEventListener('DOMNodeInserted', function(event) {
-    hidePeer(idToHide);
+    if (event.target.className == 'im-mess-stack _im_mess_stack ') {
+        chrome.storage.sync.get('idToHide', function(data) {
+            idToHide = data.idToHide;
+        });
+
+        chrome.storage.sync.get('isExtensionOn', function(data) {
+            if (data.isExtensionOn) {
+                if (event.target.dataset.peer == idToHide) {
+                    event.target.style.display = "none";
+                }
+            }
+        });
+    }
 });
+
+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) {
+        if (item.dataset.peer == idToHide) {
+            if (item.style.display != "none") {
+                item.style.display = "none";
+            } else {
+                clearInterval(hideInterval);
+            }
+        }
+    }
+}, 200);

manifest.json

@@ -1,32 +1,34 @@
 {
-  "name": "VK Mute",
+    "name": "VK Mute",
-  "icons": {
+    "icons": {
-    "140": "icons/icon140.png",
+        "140": "icons/icon140.png",
-    "128": "icons/icon128.png",
+        "128": "icons/icon128.png",
-    "48": "icons/icon48.png"
+        "48": "icons/icon48.png"
-  },
-  "version": "1.0",
-  "description": "Позволяет заглушить нежелаемых собеседников",
-  "permissions": ["activeTab", "declarativeContent", "storage"],
-  "background": {
-    "scripts": [
-      "background.js"
-    ],
-    "persistent": false
-  },
-  "page_action": {
-    "default_popup": "popup.html"
-  },
-  "manifest_version": 2,
-  "content_scripts": [
-    {
-      "matches": ["https://*.vk.com/*"],
-      "js": ["hide_element.js"]
     },
-    {
+    "version": "1.0",
-      "matches": ["https://*.vk.com/im*"],
+    "description": "Позволяет заглушить нежелаемых собеседников",
-      "js": ["controls.js"],
+    "permissions": [
-      "css": ["controls.css"]
+        "activeTab",
-    }
+        "declarativeContent",
-  ]
+        "storage"
+    ],
+    "background": {
+        "scripts": ["background.js"],
+        "persistent": false
+    },
+    "page_action": {
+        "default_popup": "popup.html"
+    },
+    "manifest_version": 2,
+    "content_scripts": [
+        {
+            "matches": ["https://*.vk.com/im*"],
+            "js": ["hide_element.js"]
+        },
+        {
+            "matches": ["https://*.vk.com/im*"],
+            "js": ["controls.js"],
+            "css": ["controls.css"]
+        }
+    ]
 }

popup.js

@@ -9,30 +9,37 @@ var enableText = "Кринж офф";
 var disableText = "Кринж он";
 
 chrome.storage.sync.get('isExtensionOn', function(data) {
-  isExtensionOn = data.isExtensionOn;
+    isExtensionOn = data.isExtensionOn;
 
-  disableCheckbox.checked = isExtensionOn;
+    disableCheckbox.checked = isExtensionOn;
-  if (isExtensionOn) {
+    if (isExtensionOn) {
-    status.innerHTML = enableText;
+        status.innerHTML = enableText;
-  } else {
+    } else {
-    status.innerHTML = disableText;
+        status.innerHTML = disableText;
-  }
+    }
 });
 
 chrome.storage.sync.get('idToHide', function(data) {
-  idToHide = data.idToHide;
+    idToHide = data.idToHide;
-  idToHideDisplay.innerText = idToHide;
+    idToHideDisplay.innerText = idToHide;
 });
 
 disableCheckbox.addEventListener('change', (event) => {
-  isExtensionOn = event.target.checked;
+    isExtensionOn = event.target.checked;
-  if (event.target.checked) {
+    if (event.target.checked) {
-    status.innerHTML = enableText;
+        status.innerHTML = enableText;
-  } else {
+    } else {
-    status.innerHTML = disableText;
+        status.innerHTML = disableText;
-  }
+    }
 
-  chrome.storage.sync.set({isExtensionOn: isExtensionOn}, function() {
+    chrome.storage.sync.set({isExtensionOn: isExtensionOn}, function() {
-    console.log('isExtensionOn: '+isExtensionOn);
+        console.log('isExtensionOn: '+isExtensionOn);
-  });
+    });
+});
+
+idToHideDisplay.addEventListener('click', function() {
+    chrome.storage.sync.set({idToHide: ''}, function() {
+        idToHideDisplay.innerText = '';
+        console.log('Cleared idToHide');
+    });
 });