Firefox port

2026-03-26 12:55:13 +00:00 · 2021-11-25 21:01:49 +03:00
27 changed files with 7670 additions and 9740 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,5 @@
 /node_modules
 .DS_Store
 /.cache
 /.idea
 /assets
 .zip
 /.vscode
--- a/README.md
+++ b/README.md
@@ -1,7 +1,4 @@
 # vk-mute
 [![code style](https://antfu.me/badge-code-style.svg)](https://github.com/antfu/eslint-config)
 Заглушить собеседника в беседе в ВК. 🔇
 На данный момент ВКонтакте не позволяет заглушать людей в беседах. Это расширение для Chrome берется это исправить.
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,3 +0,0 @@
 const antfu = require('@antfu/eslint-config').default
 module.exports = antfu()
--- a/extension/assets/icons/icon128.png
+++ b/extension/assets/icons/icon128.png
--- a/extension/assets/icons/icon140.png
+++ b/extension/assets/icons/icon140.png
--- a/extension/assets/icons/icon48.png
+++ b/extension/assets/icons/icon48.png
--- a/extension/assets/mute.png
+++ b/extension/assets/mute.png
--- a/extension/dist/background.js
+++ b/extension/dist/background.js
--- a/extension/dist/dom.js
+++ b/extension/dist/dom.js
--- a/extension/dist/popup.html
+++ b/extension/dist/popup.html
@@ -2,11 +2,12 @@
 <html>
  <head>
    <meta charset="UTF-8">
-  <script defer src="popup.js"></script></head>
+  </head>
  <body>
    <div class="header">
      <h3 align="center">VK Mute</h3>
    </div>
    <!--<button id="disableButton">Toggle</button>-->
    <div style="text-align: center;">
      <label class="switch">
        <input type="checkbox" id="disableCheckbox">
@@ -18,5 +19,5 @@
    <div class="donation_btn">
      <a href="./donate.html" title="Пожертвовать" target="_blank">💸</a>
    </div>
-  </body>
+  <script src="popup.js"></script></body>
 </html>
--- a/extension/dist/popup.js
+++ b/extension/dist/popup.js
--- a/extension/manifest.json
+++ b/extension/manifest.json
@@ -6,21 +6,25 @@
        "128": "assets/icons/icon128.png",
        "48": "assets/icons/icon48.png"
    },
-    "version": "1.5.0",
+    "version": "1.4",
    "description": "Позволяет заглушить нежелаемых собеседников",
    "permissions": [
        "declarativeContent",
        "storage"
    ],
-    "action": {
+    "background": {
-        "default_icon": {
+        "scripts": ["dist/background.js"],
-            "140": "assets/icons/icon140.png",
+        "persistent": false
-            "128": "assets/icons/icon128.png",
+    },
-            "48": "assets/icons/icon48.png"
+    "page_action": {
-        },
+        "default_popup": "dist/popup.html"
    },
    "browser_action": {
        "default_icon": "assets/icons/icon128.png",
        "default_title": "VK Mute",
        "default_popup": "dist/popup.html"
    },
-    "manifest_version": 3,
+    "manifest_version": 2,
    "content_scripts": [
        {
            "matches": ["https://*.vk.com/*"],
@@ -28,9 +32,12 @@
        }
    ],
    "web_accessible_resources": [
-        {
+        "assets/mute.png"
-            "resources": ["assets/mute.png"],
+    ],
-            "matches": ["https://*.vk.com/*"]
+    "browser_specific_settings": {
        "gecko": {
          "id": "{121ce430-bad8-4f6b-85ba-55635e87e57d}",
          "strict_min_version": "48.0"
        }
-    ]
+    }
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,34 +1,30 @@
 {
  "name": "vk-mute",
-  "version": "1.5.0",
+  "version": "1.0.0",
  "description": "Заглушить собеседника в беседе в ВК. 🔇",
  "main": "src/dom/main.js",
  "scripts": {
    "build": "webpack --config webpack.config.js",
-    "watch": "webpack --config webpack.config.js --watch",
+    "watch": "webpack --config webpack.config.js --watch"
    "lint": "eslint ."
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/anatolykopyl/vk-mute.git"
  },
-  "author": "Anatoly Kopyl <hi@kopyl.dev>",
+  "author": "",
-  "license": "GPL-3.0",
+  "license": "ISC",
  "bugs": {
    "url": "https://github.com/anatolykopyl/vk-mute/issues"
  },
  "homepage": "https://github.com/anatolykopyl/vk-mute#readme",
  "devDependencies": {
    "@antfu/eslint-config": "^2.4.3",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
-    "babel-loader": "^8.3.0",
+    "babel-loader": "^8.1.0",
-    "css-loader": "^6.7.3",
+    "css-loader": "^3.5.2",
-    "eslint": "^8.55.0",
+    "html-webpack-plugin": "^4.2.0",
    "html-webpack-plugin": "^5.5.0",
    "raw-loader": "^4.0.2",
    "style-loader": "^1.1.4",
-    "webpack": "^5.76.0",
+    "webpack": "^4.42.1",
    "webpack-cli": "^4.7.2"
  }
 }
--- a/src/background/background.js
+++ b/src/background/background.js
@@ -0,0 +1,14 @@
 chrome.runtime.onInstalled.addListener(function () {
    chrome.storage.sync.set({ isExtensionOn: true }, function () {
        console.log('isExtensionOn: ' + true);
    });
    chrome.declarativeContent.onPageChanged.removeRules(undefined, function () {
        chrome.declarativeContent.onPageChanged.addRules([{
            conditions: [new chrome.declarativeContent.PageStateMatcher({
                pageUrl: { hostEquals: 'vk.com' },
            })],
            actions: [new chrome.declarativeContent.ShowPageAction()]
        }]);
    });
 });
--- a/src/dom/controls.js
+++ b/src/dom/controls.js
@@ -1,29 +1,25 @@
 import { getChatBody } from '../utils/getChatBody'
 import muteSvg from './mute.svg'
 /**
 *
 * @param id {String}
 * @return {HTMLSpanElement}
 */
 import {getChatBody} from "../utils/getChatBody";
 function muteBtnHTML(id) {
-  const element = document.createElement('span')
+    const element = document.createElement('span');
-  element.setAttribute('class', 'im-mess--mute')
+    element.setAttribute('class', 'mute_message');
-  element.setAttribute('id', `mute${id}`)
+    element.setAttribute('id', `mute${id}`);
-  element.setAttribute('label', 'Заглушить')
+    element.setAttribute('label', 'Заглушить');
-  element.innerHTML = `${muteSvg}<div class="mute_tooltip tt_w tt_black tt_down"><div class="tt_text">Заглушить</div></div>`
+    element.style.background = `url(${chrome.runtime.getURL("assets/mute.png")}) center no-repeat`;
-  return element
+    element.innerHTML = '<div class="mute_tooltip tt_w tt_black tt_down"><div class="tt_text">Заглушить</div></div>';
    return element;
 }
 /**
 *
 * @param target {HTMLElenemt}
 */
 export function tryToAddControls(target) {
-  if (target.className === 'im-mess--check fl_l') {
+    if (target.className === 'im-mess--check fl_l') {
-    const message = target.parentElement
+        const message = target.parentElement;
-    addControlButton(message)
+        addControlButton(message);
-  }
+    }
 }
 /**
@@ -33,10 +29,10 @@ export function tryToAddControls(target) {
 * @return {HTMLElement}
 */
 function addMuteButton(actionArea, senderId) {
-  const muteButton = muteBtnHTML(senderId)
+    const muteButton = muteBtnHTML(senderId);
-  actionArea.appendChild(muteButton)
+    actionArea.appendChild(muteButton);
-  muteButton.style.visibility = 'hidden'
+    muteButton.style.display = "none";
-  return muteButton
+    return muteButton;
 }
 /**
@@ -44,58 +40,63 @@ function addMuteButton(actionArea, senderId) {
 * @param actionsArea {HTMLElement}
 */
 function addActionAreaEvents(actionsArea) {
-  actionsArea.parentElement.addEventListener('mouseenter', (event) => {
+    actionsArea.parentElement.addEventListener("mouseenter", function (event) {
-    event.target.getElementsByClassName('im-mess--mute')[0].style.visibility = 'visible'
+        event.target.getElementsByClassName("mute_message")[0].style.display = "inline-block";
-  })
+    });
-  actionsArea.parentElement.addEventListener('mouseleave', (event) => {
+    actionsArea.parentElement.addEventListener("mouseleave", function (event) {
-    event.target.getElementsByClassName('im-mess--mute')[0].style.visibility = 'hidden'
+        event.target.getElementsByClassName("mute_message")[0].style.display = "none";
-  })
+    });
 }
 /**
 *
- * @this {HTMLElement}
+ * @return {function(...[]=)}
 */
 function setIdToHideHandle() {
-  const clickedId = this.id.substring(4)
+    return function (event) {
-  let clickedName = this.parentElement.parentElement.parentElement.parentElement
+        const clickedId = event.target.id.substr(4);     // get id of sender from element id
-  clickedName = clickedName.children[0].children[0].children[0].textContent
+        let clickedName = event.target.parentElement.parentElement.parentElement.parentElement;
        clickedName = clickedName.children[0].children[0].children[0].innerText;
-  chrome.storage.sync.get('idsToHide', (data) => {
+        chrome.storage.sync.get('idsToHide', function(data) {
-    const idsToHide = data.idsToHide || []
+            let idsToHide = data.idsToHide || [];
-    if (idsToHide.filter(user => user.id === clickedId).length === 0) {
+            if (idsToHide.filter(user => user.id == clickedId).length === 0) {
-      idsToHide.push({
+                idsToHide.push({
-        id: clickedId,
+                    id: clickedId,
-        name: clickedName,
+                    name: clickedName
-      })
+                });
-      chrome.storage.sync.set({ idsToHide }, () => {
+                chrome.storage.sync.set({idsToHide: idsToHide}, function () {
-        chrome.storage.sync.get('isExtensionOn', (data) => {
+                    chrome.storage.sync.get('isExtensionOn', function(data) {
-          if (data.isExtensionOn)
+                        if (data.isExtensionOn) {
-            hideExistingMessages()
+                            hideExistingMessages();
-        })
+                        }
-      })
+                    });
                });
            }
        });
    }
  })
 }
 export function hideExistingMessages() {
-  chrome.storage.sync.get('idsToHide', (data) => {
+    chrome.storage.sync.get('idsToHide', function(data) {
-    const chatBody = getChatBody()
+        const chatBody = getChatBody();
-    for (const item of chatBody.children) {
+        for (let item of chatBody.children) {
-      if (data.idsToHide.filter(user => user.id === item.dataset.peer).length > 0)
+            if (data.idsToHide.filter(user => user.id == item.dataset.peer).length > 0) {
-        item.style.display = 'none'
+                item.style.display = "none";
-    }
+            }
-  })
+        }
    })
 }
 // Try to add controls until successful. Needed for page refresh.
 export function createTryToInitInterval() {
-  const controlsInterval = setInterval(() => {
+    const controlsInterval = setInterval(function () {
-    if (!tryToInitControls(controlsInterval))
+        if(!tryToInitControls(controlsInterval)){
-      clearInterval(controlsInterval)
+            clearInterval(controlsInterval);
-  }, 200)
+        }
-  return controlsInterval
+    }, 200)
    return controlsInterval;
 }
 /**
@@ -103,33 +104,32 @@ export function createTryToInitInterval() {
 * @param message {HTMLElement}
 */
 function addControlButton(message) {
-  // Check if message is not an outgoing one
+    // Check if message is not an outgoing one
-  if (!message.classList.contains('im-mess_out')) {
+    if (!message.classList.contains('im-mess_out')) {
-    const actionsArea = message.getElementsByClassName('im-mess--actions')[0]
+        const actionsArea = message.getElementsByClassName("im-mess--actions")[0];
-    if (actionsArea && actionsArea.lastChild.className !== 'im-mess--mute') {
+        if (actionsArea && actionsArea.lastChild.className !== "mute_message") {
-      const senderId = message.parentElement.parentElement.parentElement.dataset.peer
+            const senderId = message.parentElement.parentElement.parentElement["dataset"].peer;
-      const muteBtn = addMuteButton(actionsArea, senderId)
+            const muteBtn = addMuteButton(actionsArea, senderId);
-      addActionAreaEvents(actionsArea)
+            addActionAreaEvents(actionsArea);
-      muteBtn.addEventListener('click', setIdToHideHandle)
+            muteBtn.addEventListener("click", setIdToHideHandle());
-      return true
+            return true;
        } else {
            return false;
        }
    }
    else {
      return false
    }
  }
 }
 export function tryToInitControls() {
-  let status = true
+    let status = true;
-  const chatBody = getChatBody()
+    const chatBody = getChatBody();
-  if (!chatBody)
+    if(!chatBody) return false;
-    return false
+    for (let item of chatBody.children) {
-  for (const item of chatBody.children) {
+        if (item.className.includes('im-mess-stack _im_mess_stack')) {
-    if (item.className.includes('im-mess-stack _im_mess_stack')) {
+            let messages = item.children[1].children[1].getElementsByClassName('im-mess _im_mess');
-      const messages = item.children[1].children[1].getElementsByClassName('im-mess _im_mess')
+            for (let message of messages) {
-      for (const message of messages)
+                status = addControlButton(message);
-        status = addControlButton(message)
+            }
        }
    }
-  }
+    return status;
  return status
 }
--- a/src/dom/dom.css
+++ b/src/dom/dom.css
@@ -1,35 +1,30 @@
 .mute_tooltip {
-  position: absolute;
+    position: absolute;
-  left: -50px;
+    left: -50px;
-  top: -33px;
+    top: -33px;
-  display: none;
+    display: none;
 }
 .mute_tooltip::after {
-  left: 61px !important;
+    left: 61px !important;
 }
 /* Show the tooltip text when you mouse over the tooltip container */
-.im-mess--mute:hover .mute_tooltip {
+.mute_message:hover .mute_tooltip {
-  display: block !important;
+    display: block !important;
-  opacity: 1;
+    opacity: 1;
 }
-.im-mess--mute {
+.mute_message {
-  position: relative;
+    position: relative;
-  display: inline-flex;
+    display: inline-block;
-  align-items: center;
+    vertical-align: top;
-  justify-content: center;
+    padding-top: 2px;
-  width: 24px;
+    width: 24px;
-  height: 24px;
+    height: 24px;
-  opacity: .5;
+    background-size: 11px !important;
  color: var(--vkui--color_icon_secondary);
 }
 .im-mess--mute:hover {
  opacity: 1;
 }
 .im-mess--actions {
-  margin-right: -30px !important;
+    margin-right: -30px !important;
 }
--- a/src/dom/hide_element.js
+++ b/src/dom/hide_element.js
@@ -1,52 +1,58 @@
-import { getChatBody } from '../utils/getChatBody'
+import {getChatBody} from "../utils/getChatBody";
-import { hideExistingMessages, tryToAddControls } from './controls'
+import {tryToAddControls, hideExistingMessages} from "./controls";
 export function addNewMessageEventListener() {
-  const chatBody = getChatBody()
+    const chatBody = getChatBody();
-  chatBody.addEventListener('DOMNodeInserted', (event) => {
+    chatBody.addEventListener('DOMNodeInserted', function(event) {
-    newMessageHandler(event.target)
+        newMessageHandler(event.target)
-  })
+    });
 }
 function newMessageHandler(message) {
-  tryToAddControls(message)
+    tryToAddControls(message);
-  if (message.className === 'im-mess-stack _im_mess_stack ') {
+    if (message.className === 'im-mess-stack _im_mess_stack ') {
-    chrome.storage.sync.get('isExtensionOn', (data) => {
+        chrome.storage.sync.get('isExtensionOn', function(data) {
-      if (data.isExtensionOn) {
+            if (data.isExtensionOn) {
-        chrome.storage.sync.get('idsToHide', (data) => {
+                chrome.storage.sync.get('idsToHide', function(data) {
-          if (data.idsToHide.filter(user => user.id === message.dataset.peer).length > 0)
+                    if (data.idsToHide.filter(user => user.id == message.dataset.peer).length > 0) {
-            message.style.display = 'none'
+                        message.style.display = "none";
-        })
+                    }
-      }
+                });
-    })
+            }
-  }
+        });
    }
 }
 export function returnMessagesEventListener() {
-  chrome.storage.onChanged.addListener((changes) => {
+    chrome.storage.onChanged.addListener(function(changes) {
-    const isExtensionOn = changes.isExtensionOn
+        const isExtensionOn = changes.isExtensionOn;
-    const idsToHide = changes.idsToHide
+        const idsToHide = changes.idsToHide;
-    const chatBody = getChatBody()
+        const chatBody = getChatBody();
-    if (isExtensionOn) {
+        if (isExtensionOn) {
-      if (isExtensionOn.newValue === false) {
+            if (isExtensionOn.newValue === false) {
-        for (const item of chatBody.children)
+                for (let item of chatBody.children) {
-          item.style.display = 'block'
+                    item.style.display = "block";
-      }
+                }
-      else {
+            } else {
-        hideExistingMessages()
+                hideExistingMessages();
      }
    }
    if (idsToHide) {
      chrome.storage.sync.get('isExtensionOn', (data) => {
        if (data.isExtensionOn) {
          if (idsToHide.newValue.length < idsToHide.oldValue.length) {
            for (const item of chatBody.children) {
              if (idsToHide.newValue.filter(user => user.id === item.dataset.peer).length === 0)
                item.style.display = 'block'
            }
          }
        }
-      })
+        if (idsToHide) {
-    }
+            chrome.storage.sync.get('isExtensionOn', function(data) {
-  })
+                if (data.isExtensionOn) {
                    if (idsToHide.newValue.length < idsToHide.oldValue.length) {
                        // for (let item of chatBody.children) {
                        //     item.style.display = "block";
                        // }
                        // hideExistingMessages();
                        for (let item of chatBody.children) {
                            if (idsToHide.newValue.filter(user => user.id == item.dataset.peer).length === 0) {
                                item.style.display = "block";
                            }
                        }
                    }
                }
            });
        }
    });
 }
--- a/src/dom/main.js
+++ b/src/dom/main.js
@@ -1,21 +1,22 @@
 import './dom.css'
-import { UrlController } from '../utils/Url'
+import {createTryToInitInterval, hideExistingMessages, tryToInitControls} from "./controls";
-import { createTryToInitInterval, hideExistingMessages, tryToInitControls } from './controls'
+import {UrlController} from "../utils/Url";
-import { addNewMessageEventListener, returnMessagesEventListener } from './hide_element'
+import {addNewMessageEventListener, returnMessagesEventListener} from "./hide_element";
 function init() {
-  const url = new UrlController()
+    const url = new UrlController();
-  url.onChange(() => {
+    url.onChange(() => {
-    if (tryToInitControls()) {
+        if (tryToInitControls()) {
-      createTryToInitInterval()
+            createTryToInitInterval();
-      addNewMessageEventListener()
+            addNewMessageEventListener();
-      returnMessagesEventListener()
+            returnMessagesEventListener();
-      chrome.storage.sync.get('isExtensionOn', (data) => {
+            chrome.storage.sync.get('isExtensionOn', function(data) {
-        if (data.isExtensionOn)
+                if (data.isExtensionOn) {
-          hideExistingMessages()
+                    hideExistingMessages();
-      })
+                }
-    }
+            });
-  })
+        }
    })
 }
-init()
+init();
--- a/src/dom/mute.svg
+++ b/src/dom/mute.svg
@@ -1,9 +0,0 @@
 <svg 
  xmlns="http://www.w3.org/2000/svg" 
  width="16" 
  height="16" 
  fill="currentColor" 
  viewBox="2 1 13 13"
 >
  <path d="M4.69 5.5 11 11.8v1.7c0 .3-.23.47-.49.5l-3.63-3.5H4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h.69Zm.77-2.85 2.2 2.19L10.5 2.5c.27.02.49.2.49.48v5.2l2.6 2.6a.75.75 0 0 1-1.06 1.06L4.4 3.71a.75.75 0 0 1 1.06-1.06Z"></path>
 </svg>
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -1,122 +1,125 @@
 * {
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 body {
-  min-width: 160px;
+    min-width: 160px;
-  margin: 0;
+    margin: 0;
 }
-
+/* The switch - the box around the slider */
 .switch {
-  position: relative;
+    position: relative;
-  display: inline-block;
+    display: inline-block;
-  width: 60px;
+    width: 60px;
-  height: 34px;
+    height: 34px;
 }
 /* Hide default HTML checkbox */
 .switch input {
-  opacity: 0;
+    opacity: 0;
-  width: 0;
+    width: 0;
-  height: 0;
+    height: 0;
 }
 /* The slider */
 .slider {
-  position: absolute;
+    position: absolute;
-  cursor: pointer;
+    cursor: pointer;
-  top: 0;
+    top: 0;
-  left: 0;
+    left: 0;
-  right: 0;
+    right: 0;
-  bottom: 0;
+    bottom: 0;
-  background-color: #ccc;
+    background-color: #ccc;
-  -webkit-transition: .4s;
+    -webkit-transition: .4s;
-  transition: .4s;
+    transition: .4s;
 }
 .slider:before {
-  position: absolute;
+    position: absolute;
-  content: "";
+    content: "";
-  height: 26px;
+    height: 26px;
-  width: 26px;
+    width: 26px;
-  left: 4px;
+    left: 4px;
-  bottom: 4px;
+    bottom: 4px;
-  background-color: white;
+    background-color: white;
-  -webkit-transition: .4s;
+    -webkit-transition: .4s;
-  transition: .4s;
+    transition: .4s;
 }
 input:checked + .slider {
-  background-color: #2196F3;
+    background-color: #2196F3;
 }
 input:focus + .slider {
-  box-shadow: 0 0 1px #2196F3;
+    box-shadow: 0 0 1px #2196F3;
 }
 input:checked + .slider:before {
-  -webkit-transform: translateX(26px);
+    -webkit-transform: translateX(26px);
-  -ms-transform: translateX(26px);
+    -ms-transform: translateX(26px);
-  transform: translateX(26px);
+    transform: translateX(26px);
 }
 /* Rounded sliders */
 .slider.round {
-  border-radius: 34px;
+    border-radius: 34px;
 }
 .slider.round:before {
-  border-radius: 50%;
+    border-radius: 50%;
 }
 .header {
-  background-color: #2196F3;
+    background-color: #2196F3;
-  color: white;
+    color: white;
-  width: 100%;
+    width: 100%;
-  height: 3rem;
+    height: 3rem;
-  position: relative;
+    position: relative;
-  display: flex;
+    display: flex;
-  align-items: center;
+    align-items: center;
-  justify-content: center;
+    justify-content: center;
-  margin-bottom: 1rem;
+    margin-bottom: 1rem;
 }
 h3 {
-  margin: 0;
+    margin: 0;
 }
 .idToHide {
-  padding: 10px;
+    padding: 10px;
-  box-sizing: border-box;
+    box-sizing: border-box;
-  display: flex;
+    display: flex;
-  justify-content: space-between;
+    justify-content: space-between;
-  background-color: #fff;
+    background-color: #fff;
 }
 .idToHide:hover {
-  background-color: #f1f1f1;
+    background-color: #f1f1f1;
 }
 #id_list {
-  color: black;
+    color: black;
-  position: relative;
+    position: relative;
-  width: 100%;
+    width: 100%;
-  margin-top: 1rem;
+    margin-top: 1rem;
 }
 .del_item {
-  cursor: pointer;
+    cursor: pointer;
-  transition: transform 0.2s;
+    transition: transform 0.2s;
 }
 .del_item:hover {
-  transform: scale(1.15);
+    transform: scale(1.15);
 }
 .donation_btn {
-  text-align: right;
+    text-align: right;
-  margin-top: .5rem;
+    margin-top: .5rem;
-  padding: 0 10px 10px 0;
+    padding: 0 10px 10px 0;
 }
 a {
-  text-decoration: none;
+    text-decoration: none;
-  color: hsl(207, 90%, 35%);
+    color: hsl(207, 90%, 35%);
 }
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -7,6 +7,7 @@
    <div class="header">
      <h3 align="center">VK Mute</h3>
    </div>
    <!--<button id="disableButton">Toggle</button>-->
    <div style="text-align: center;">
      <label class="switch">
        <input type="checkbox" id="disableCheckbox">
--- a/src/popup/popup.js
+++ b/src/popup/popup.js
@@ -1,51 +1,54 @@
 import './popup.css'
-const disableCheckbox = document.getElementById('disableCheckbox')
+//let disableButton = document.getElementById('disableButton');
-const idsToHideElements = document.getElementsByClassName('idToHide')
+let disableCheckbox = document.getElementById('disableCheckbox');
-const idList = document.getElementById('id_list')
+let idsToHideElements = document.getElementsByClassName('idToHide');
-let isExtensionOn
+let idList = document.getElementById("id_list");
-let idsToHide = []
+let isExtensionOn;
 let idsToHide = [];
 function idBtnHTML(user) {
-  const element = document.createElement('div')
+    const element = document.createElement('div');
-  element.setAttribute('class', 'idToHide')
+    element.setAttribute('class', 'idToHide');
-  element.innerHTML = `
+    element.innerHTML = `
        <a href="https://vk.com/id${user.id}" target="_blank" title="Перейти в профиль">🤐 ${user.name}</a>
        <span class="del_item" title="Удалить">🗑️</span>
-    `
+    `;
-  element.id = user.id
+    element.id = user.id;
-  return element
+    return element;
 }
-chrome.storage.sync.get('isExtensionOn', (data) => {
+chrome.storage.sync.get('isExtensionOn', function(data) {
-  isExtensionOn = data.isExtensionOn
+    isExtensionOn = data.isExtensionOn;
-  disableCheckbox.checked = isExtensionOn
+    disableCheckbox.checked = isExtensionOn;
-})
+});
-chrome.storage.sync.get('idsToHide', (data) => {
+chrome.storage.sync.get('idsToHide', function(data) {
-  idsToHide = data.idsToHide
+    idsToHide = data.idsToHide;
-  for (const id in idsToHide) {
+    for (const id in idsToHide) {
-    const row = idBtnHTML(idsToHide[id])
+        const row = idBtnHTML(idsToHide[id]);
-    idList.appendChild(row)
+        idList.appendChild(row);
  }
  for (const element of idsToHideElements) {
    for (const child of element.childNodes) {
      if (child.className === 'del_item') {
        child.addEventListener('click', () => {
          idsToHide = idsToHide.filter(user => user.id !== element.id)
          chrome.storage.sync.set({ idsToHide }, () => {
            element.remove()
          })
        })
      }
    }
-  }
+    for (const element of idsToHideElements) {
-})
+        for (const child of element.childNodes) {
            if (child.className === "del_item") {
                child.addEventListener('click', function() {
                    idsToHide = idsToHide.filter(user => user.id != element.id);
                    chrome.storage.sync.set({idsToHide: idsToHide}, function() {
                        element.remove();
                        console.log('Cleared idsToHide');
                    });
                });
            }
        }
    };    
 });
 disableCheckbox.addEventListener('change', (event) => {
-  isExtensionOn = event.target.checked
+    isExtensionOn = event.target.checked;
-  chrome.storage.sync.set({ isExtensionOn })
+    chrome.storage.sync.set({isExtensionOn}, function() {
-})
+        console.log('isExtensionOn: '+isExtensionOn);
    });
 });
--- a/src/utils/Url.js
+++ b/src/utils/Url.js
@@ -1,42 +1,47 @@
-const INTERVAL_TIME = 100
+const INTERVAL_TIME = 100;
 export class UrlController {
  constructor() {
    this._changeListeners = []
    this._interval = null
    this._url = window.location.href
  }
-  onChange(cb) {
+    constructor() {
-    this._changeListeners.push(cb)
+        this._changeListeners = [];
-    if (this._interval === null)
+        this._interval = null;
-      this._createInterval()
+        this._url = window.location.href;
  }
  removeEventListener(cb) {
    this._changeListeners = this._changeListeners.filter(item => item !== cb)
    if (this._changeListeners.length === 0)
      this._clearInterval()
  }
  _intervalTick() {
    const currentUrl = window.location.href
    if (currentUrl !== this.url) {
      this._broadcast(this.url, currentUrl)
      this.url = currentUrl
    }
  }
-  _broadcast(oldUrl, newUrl) {
+    onChange(cb) {
-    this._changeListeners.forEach(cb => cb(oldUrl, newUrl))
+        this._changeListeners.push(cb);
-  }
+        if (this._interval === null) {
            this._createInterval();
        }
    }
-  _createInterval() {
+    removeEventListener(cb) {
-    this.interval = setInterval(() => this._intervalTick(), INTERVAL_TIME)
+        this._changeListeners = this._changeListeners.filter(item=>item !== cb);
-  }
+        if(this._changeListeners.length === 0) {
            this._clearInterval();
        }
    }
    _intervalTick() {
        const currentUrl = window.location.href;
        if (currentUrl !== this.url) {
            this._broadcast(this.url, currentUrl);
            this.url = currentUrl;
        }
    }
    _broadcast(oldUrl, newUrl) {
        this._changeListeners.forEach(cb => cb(oldUrl, newUrl));
    }
    _createInterval() {
        this.interval = setInterval(() => this._intervalTick(), INTERVAL_TIME)
    }
    _clearInterval() {
        clearInterval(this.interval)
        this.interval = null
    }
  _clearInterval() {
    clearInterval(this.interval)
    this.interval = null
  }
 }
--- a/src/utils/getChatBody.js
+++ b/src/utils/getChatBody.js
@@ -1,3 +1,3 @@
 export function getChatBody() {
-  return document.getElementsByClassName('_im_peer_history im-page-chat-contain')[0]
+    return document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,49 +1,45 @@
-const path = require('node:path')
+const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
-  mode: 'development',
+    mode: "development",
-  devtool: 'inline-source-map',
+    devtool: "inline-source-map",
-  entry: {
+    entry: {
-    dom: './src/dom/main.js',
+        dom: './src/dom/main.js',
-    popup: './src/popup/popup.js',
+        background: './src/background/background.js',
-  },
+        popup: './src/popup/popup.js'
-  output: {
+    },
-    filename: '[name].js',
+    output: {
-    path: path.resolve(__dirname, 'extension/dist'),
+        filename: '[name].js',
-  },
+        path: path.resolve(__dirname, 'extension/dist')
-  module: {
+    },
-    rules: [
+    module: {
-      {
+        rules: [
-        test: /\.m?js$/,
+            {
-        exclude: /(node_modules|bower_components)/,
+                test: /\.m?js$/,
-        use: {
+                exclude: /(node_modules|bower_components)/,
-          loader: 'babel-loader',
+                use: {
-          options: {
+                    loader: 'babel-loader',
-            presets: ['@babel/preset-env'],
+                    options: {
-          },
+                        presets: ['@babel/preset-env']
-        },
+                    }
-      },
+                }
-      {
+            },
-        test: /\.css$/i,
+            {
-        use: ['style-loader', 'css-loader'],
+                test: /\.css$/i,
-      },
+                use: ['style-loader', 'css-loader'],
-      {
+            }
-        test: /\.svg$/i,
+        ]
-        use: 'raw-loader',
+    },
-      },
+    plugins: [new HtmlWebpackPlugin({
-    ],
+        template: "./src/popup/popup.html",
-  },
+        filename: "popup.html",
-  plugins: [
+        chunks: ['popup']
    new HtmlWebpackPlugin({
      template: './src/popup/popup.html',
      filename: 'popup.html',
      chunks: ['popup'],
    }),
    new HtmlWebpackPlugin({
-      template: './src/donate.html',
+        template: "./src/donate.html",
-      filename: 'donate.html',
+        filename: "donate.html",
-      chunks: ['donate'],
+        chunks: ['donate']
-    }),
+    })]
-  ],
+
 }
		`@@ -1,3 +0,0 @@`
			`const antfu = require('@antfu/eslint-config').default`

			`module.exports = antfu()`