Refactoring controls.js and add url observer like main.js file

controls.js

@@ -1,93 +1,127 @@
+/**
+ *
+ * @param id {String}
+ * @return {HTMLSpanElement}
+ */
 function muteBtnHTML(id) {
-    return `<span class="mute_message" id="mute` + id + `">
+    const element = document.createElement('span');
+    element.setAttribute('class', 'mute_message');
+    element.setAttribute('id', `mute${id}`);
+    element.innerHTML = `
         🔇
         <span class="mutetooltip">Заглушить</span>
-    </span>`
+    `;
+    return element;
 }
 
-function addControls() {
+/**
-    if (event.target.className == 'im-mess--check fl_l') {
+ *
-        var message = event.target.parentElement;
+ * @param chatBody {HTMLElement}
-        
+ * @return {function(...[*]=)}
-        var actionsArea = message.getElementsByClassName("im-mess--actions")[0];
+ */
-        if (actionsArea && actionsArea.lastChild.className != "mute_message") {
+function addControls(chatBody) {
-            var sender_id = message.parentElement.parentElement.parentElement["dataset"].peer
+    return function (event) {
-
+        console.log(event);
-            actionsArea.innerHTML += muteBtnHTML(sender_id);
+        if (event.target.className === 'im-mess--check fl_l') {
-            var muteBtn = actionsArea.getElementsByClassName("mute_message")[0];
+            const message = event.target.parentElement;
-            muteBtn.style.display = "none";
+            addControlButton(message)
-
-            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);
-                });
-            });
         }
     }
 }
 
-var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
+/**
+ * Create mute button and inset it to the actionArea
+ * @param actionArea {HTMLElement}
+ * @param senderId {String}
+ * @return {HTMLElement}
+ */
+function addMuteButton(actionArea, senderId) {
+    const muteButton = muteBtnHTML(senderId);
+    actionArea.appendChild(muteButton);
+    muteButton.style.display = "none";
+    return muteButton;
+}
 
-chatBody.addEventListener('DOMNodeInserted', addControls);
+/**
+ * Add event listeners to the actionArea
+ * @param actionsArea {HTMLElement}
+ */
+function addActionAreaEvents(actionsArea) {
+    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";
+    });
+}
+
+/**
+ *
+ * @param chatBody {HTMLElement}
+ * @return {function(...[]=)}
+ */
+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 () {
+            for (let item of chatBody.children) {
+                if (item.dataset.peer === clickedId) {
+                    item.style.display = "none";
+                }
+            }
+
+            console.log('idToHide: ' + clickedId);
+        });
+    }
+}
 
 // Try to add controls until successful. Needed for page refresh.
-var controlsInterval = setInterval(function () {
+function createTryToInitInterval() {
-    var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
+    const controlsInterval = setInterval(function () {
+        tryToInitControls(controlsInterval)
+    }, 200)
+    return controlsInterval;
+}
 
-    for (var item of chatBody.children) {
+/**
+ *
+ * @param message {HTMLElement}
+ * @param intervalForClean {Number?}
+ */
+function addControlButton(message, intervalForClean) {
+    const actionsArea = message.getElementsByClassName("im-mess--actions")[0];
+    if (actionsArea && actionsArea.lastChild.className !== "mute_message") {
+        const senderId = message.parentElement.parentElement.parentElement["dataset"].peer;
+        const muteBtn = addMuteButton(actionsArea, senderId);
+        addActionAreaEvents(actionsArea);
+        muteBtn.addEventListener("click", setIdToHideHandle(chatBody));
+    } else if (intervalForClean) {
+        clearInterval(intervalForClean)
+    }
+}
+
+/**
+ * Function hide and mark messages
+ * @param intervalForClear {Number}
+ */
+function tryToInitControls(intervalForClear) {
+    const chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
+
+    for (let 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');
+            let messages = item.children[1].children[1].getElementsByClassName('im-mess im_in _im_mess');
-            for (var message of messages) {
+            for (let message of messages) {
-                var actionsArea = message.getElementsByClassName("im-mess--actions")[0];
+                addControlButton(message, intervalForClear)
-
-                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);
+
+}
+
+(function init() {
+    const chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
+    chatBody.addEventListener('DOMNodeInserted', addControls);
+    createTryToInitInterval();
+})();

hide_element.js

@@ -3,14 +3,14 @@ var idToHide;
 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 ') {
+    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) {
+                if (event.target.dataset.peer === idToHide) {
                     event.target.style.display = "none";
                 }
             }
@@ -26,8 +26,8 @@ chrome.storage.sync.get('idToHide', function(data) {
 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.dataset.peer === idToHide) {
-            if (item.style.display != "none") {
+            if (item.style.display !== "none") {
                 item.style.display = "none";
             } else {
                 clearInterval(hideInterval);

main.js

@@ -0,0 +1,9 @@
+const changeUrlDetect = setInterval((function () {
+    let oldUrl = '';
+    return function () {
+        const currentUrl = window.location.href;
+        if(currentUrl !== oldUrl){
+            oldUrl = currentUrl;
+        }
+    }
+})(),100);

manifest.json

@@ -21,6 +21,10 @@
     },
     "manifest_version": 2,
     "content_scripts": [
+        {
+            "matches": ["https://*.vk.com/*"],
+            "js": ["main.js"]
+        },
         {
             "matches": ["https://*.vk.com/im*"],
             "js": ["hide_element.js"]