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

2026-03-26 12:55:13 +00:00 · 2020-04-15 00:37:01 +03:00
parent 928984c158
commit 708cb72028
4 changed files with 160 additions and 113 deletions
--- a/controls.js
+++ b/controls.js
@@ -1,22 +1,52 @@
+/**
+ *
+ * @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(...[*]=)}
+ */
+function addControls(chatBody) {
+    return function (event) {
+        console.log(event);
+        if (event.target.className === 'im-mess--check fl_l') {
+            const message = event.target.parentElement;
+            addControlButton(message)
+        }
+    }
+}

-        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";
+/**
+ * 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;
+}

+/**
+ * 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";
    });
@@ -24,70 +54,74 @@ function addControls() {
    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
+/**
+ *
+ * @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: clicked_id}, function() {
-                    for (var item of chatBody.children) {
-                        if (item.dataset.peer == clicked_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: ' + clicked_id);
-                });
+            console.log('idToHide: ' + clickedId);
        });
    }
 }
-}
-
-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];
+function createTryToInitInterval() {
+    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');
-            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);
+            let messages = item.children[1].children[1].getElementsByClassName('im-mess im_in _im_mess');
+            for (let message of messages) {
+                addControlButton(message, intervalForClear)
            }
        }
    }
+
 }
-}, 200);
+
+(function init() {
+    const chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
+    chatBody.addEventListener('DOMNodeInserted', addControls);
+    createTryToInitInterval();
+})();
--- a/hide_element.js
+++ b/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.style.display != "none") {
+        if (item.dataset.peer === idToHide) {
+            if (item.style.display !== "none") {
                item.style.display = "none";
            } else {
                clearInterval(hideInterval);
--- a/main.js
+++ b/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);
--- a/manifest.json
+++ b/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"]