Add eslint

.gitignore

@@ -4,3 +4,4 @@
 /.idea
 /assets
 .zip
+/.vscode

README.md

@@ -1,4 +1,7 @@
 # vk-mute
+
+[![code style](https://antfu.me/badge-code-style.svg)](https://github.com/antfu/eslint-config)
+
 Заглушить собеседника в беседе в ВК. 🔇
 
 На данный момент ВКонтакте не позволяет заглушать людей в беседах. Это расширение для Chrome берется это исправить.

eslint.config.js

@@ -0,0 +1,3 @@
+const antfu = require('@antfu/eslint-config').default
+
+module.exports = antfu()

package.json

@@ -5,7 +5,8 @@
   "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",
@@ -18,10 +19,12 @@
   },
   "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",
     "css-loader": "^6.7.3",
+    "eslint": "^8.55.0",
     "html-webpack-plugin": "^5.5.0",
     "raw-loader": "^4.0.2",
     "style-loader": "^1.1.4",

src/dom/controls.js

@@ -1,5 +1,5 @@
-import {getChatBody} from "../utils/getChatBody";
+import { getChatBody } from '../utils/getChatBody'
-import muteSvg from "./mute.svg";
+import muteSvg from './mute.svg'
 
 /**
  *
@@ -7,12 +7,12 @@ import muteSvg from "./mute.svg";
  * @return {HTMLSpanElement}
  */
 function muteBtnHTML(id) {
-    const element = document.createElement('span');
+  const element = document.createElement('span')
-    element.setAttribute('class', 'im-mess--mute');
+  element.setAttribute('class', 'im-mess--mute')
-    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.innerHTML = `${muteSvg}<div class="mute_tooltip tt_w tt_black tt_down"><div class="tt_text">Заглушить</div></div>`
-    return element;
+  return element
 }
 
 /**
@@ -20,10 +20,10 @@ function muteBtnHTML(id) {
  * @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 +33,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.visibility = 'hidden'
-    return muteButton;
+  return muteButton
 }
 
 /**
@@ -44,13 +44,13 @@ function addMuteButton(actionArea, senderId) {
  * @param actionsArea {HTMLElement}
  */
 function addActionAreaEvents(actionsArea) {
-    actionsArea.parentElement.addEventListener("mouseenter", function (event) {
+  actionsArea.parentElement.addEventListener('mouseenter', (event) => {
-        event.target.getElementsByClassName("im-mess--mute")[0].style.visibility = "visible";
+    event.target.getElementsByClassName('im-mess--mute')[0].style.visibility = 'visible'
-    });
+  })
 
-    actionsArea.parentElement.addEventListener("mouseleave", function (event) {
+  actionsArea.parentElement.addEventListener('mouseleave', (event) => {
-        event.target.getElementsByClassName("im-mess--mute")[0].style.visibility = "hidden";
+    event.target.getElementsByClassName('im-mess--mute')[0].style.visibility = 'hidden'
-    });
+  })
 }
 
 /**
@@ -58,47 +58,44 @@ function addActionAreaEvents(actionsArea) {
  * @this {HTMLElement}
  */
 function setIdToHideHandle() {
-    const clickedId = this.id.substring(4);
+  const clickedId = this.id.substring(4)
-    let clickedName = this.parentElement.parentElement.parentElement.parentElement;
+  let clickedName = this.parentElement.parentElement.parentElement.parentElement
-    clickedName = clickedName.children[0].children[0].children[0].innerText;
+  clickedName = clickedName.children[0].children[0].children[0].textContent
 
-    chrome.storage.sync.get('idsToHide', function(data) {
+  chrome.storage.sync.get('idsToHide', (data) => {
-        let idsToHide = data.idsToHide || [];
+    const 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: idsToHide}, function () {
+      chrome.storage.sync.set({ idsToHide }, () => {
-                chrome.storage.sync.get('isExtensionOn', function(data) {
+        chrome.storage.sync.get('isExtensionOn', (data) => {
-                    if (data.isExtensionOn) {
+          if (data.isExtensionOn)
-                        hideExistingMessages();
+            hideExistingMessages()
-                    }
+        })
-                });
+      })
-            });
+    }
-        }
+  })
-    });
 }
 
 export function hideExistingMessages() {
-    chrome.storage.sync.get('idsToHide', function(data) {
+  chrome.storage.sync.get('idsToHide', (data) => {
-        const chatBody = getChatBody();
+    const chatBody = getChatBody()
-        for (let item of chatBody.children) {
+    for (const 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(function () {
+  const controlsInterval = setInterval(() => {
-        if(!tryToInitControls(controlsInterval)){
+    if (!tryToInitControls(controlsInterval))
-            clearInterval(controlsInterval);
+      clearInterval(controlsInterval)
-        }
+  }, 200)
-    }, 200)
+  return controlsInterval
-    return controlsInterval;
 }
 
 /**
@@ -106,32 +103,33 @@ 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 !== 'im-mess--mute') {
-            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) return false;
+  if (!chatBody)
-    for (let item of chatBody.children) {
+    return false
-        if (item.className.includes('im-mess-stack _im_mess_stack')) {
+  for (const item of chatBody.children) {
-            let messages = item.children[1].children[1].getElementsByClassName('im-mess _im_mess');
+    if (item.className.includes('im-mess-stack _im_mess_stack')) {
-            for (let message of messages) {
+      const messages = item.children[1].children[1].getElementsByClassName('im-mess _im_mess')
-                status = addControlButton(message);
+      for (const message of messages)
-            }
+        status = addControlButton(message)
-        }
     }
-    return status;
+  }
+  return status
 }

src/dom/dom.css

@@ -1,35 +1,35 @@
 .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 {
-    display: block !important;
+  display: block !important;
-    opacity: 1;
+  opacity: 1;
 }
 
 .im-mess--mute {
-    position: relative;
+  position: relative;
-    display: inline-flex;
+  display: inline-flex;
-    align-items: center;
+  align-items: center;
-    justify-content: center;
+  justify-content: center;
-    width: 24px;
+  width: 24px;
-    height: 24px;
+  height: 24px;
-    opacity: .5;
+  opacity: .5;
-    color: var(--vkui--color_icon_secondary);
+  color: var(--vkui--color_icon_secondary);
 }
 
 .im-mess--mute:hover {
-    opacity: 1;
+  opacity: 1;
 }
 
 .im-mess--actions {
-    margin-right: -30px !important;
+  margin-right: -30px !important;
 }

src/dom/hide_element.js

@@ -1,58 +1,52 @@
-import {getChatBody} from "../utils/getChatBody";
+import { getChatBody } from '../utils/getChatBody'
-import {tryToAddControls, hideExistingMessages} from "./controls";
+import { hideExistingMessages, tryToAddControls } from './controls'
 
 export function addNewMessageEventListener() {
-    const chatBody = getChatBody();
+  const chatBody = getChatBody()
-    chatBody.addEventListener('DOMNodeInserted', function(event) {
+  chatBody.addEventListener('DOMNodeInserted', (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', function(data) {
+    chrome.storage.sync.get('isExtensionOn', (data) => {
-            if (data.isExtensionOn) {
+      if (data.isExtensionOn) {
-                chrome.storage.sync.get('idsToHide', function(data) {
+        chrome.storage.sync.get('idsToHide', (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(function(changes) {
+  chrome.storage.onChanged.addListener((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 (let item of chatBody.children) {
+        for (const 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";
-                            }
-                        }
-                    }
-                }
-            });
-        }
-    });
 }

src/dom/main.js

@@ -1,22 +1,21 @@
 import './dom.css'
-import {createTryToInitInterval, hideExistingMessages, tryToInitControls} from "./controls";
+import { UrlController } from '../utils/Url'
-import {UrlController} from "../utils/Url";
+import { createTryToInitInterval, hideExistingMessages, tryToInitControls } from './controls'
-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', function(data) {
+      chrome.storage.sync.get('isExtensionOn', (data) => {
-                if (data.isExtensionOn) {
+        if (data.isExtensionOn)
-                    hideExistingMessages();
+          hideExistingMessages()
-                }
+      })
-            });
+    }
-        }
+  })
-    })
 }
 
-init();
+init()

src/popup/popup.css

@@ -1,125 +1,122 @@
 * {
-    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%);
 }

src/popup/popup.js

@@ -1,54 +1,51 @@
 import './popup.css'
 
-//let disableButton = document.getElementById('disableButton');
+const disableCheckbox = document.getElementById('disableCheckbox')
-const disableCheckbox = document.getElementById('disableCheckbox');
+const idsToHideElements = document.getElementsByClassName('idToHide')
-const idsToHideElements = document.getElementsByClassName('idToHide');
+const idList = document.getElementById('id_list')
-const idList = document.getElementById("id_list");
+let isExtensionOn
-let isExtensionOn;
+let idsToHide = []
-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', function(data) {
+chrome.storage.sync.get('isExtensionOn', (data) => {
-    isExtensionOn = data.isExtensionOn;
+  isExtensionOn = data.isExtensionOn
 
-    disableCheckbox.checked = isExtensionOn;
+  disableCheckbox.checked = isExtensionOn
-});
+})
 
-chrome.storage.sync.get('idsToHide', function(data) {
+chrome.storage.sync.get('idsToHide', (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}, function() {
+  chrome.storage.sync.set({ isExtensionOn })
-        console.log('isExtensionOn: '+isExtensionOn);
+})
-    });
-});

src/utils/Url.js

@@ -1,46 +1,42 @@
-const INTERVAL_TIME = 100;
+const INTERVAL_TIME = 100
 
 export class UrlController {
+  constructor() {
+    this._changeListeners = []
+    this._interval = null
+    this._url = window.location.href
+  }
 
-    constructor() {
+  onChange(cb) {
-        this._changeListeners = [];
+    this._changeListeners.push(cb)
-        this._interval = null;
+    if (this._interval === null)
-        this._url = window.location.href;
+      this._createInterval()
+  }
+
+  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
     }
+  }
 
-    onChange(cb) {
+  _broadcast(oldUrl, newUrl) {
-        this._changeListeners.push(cb);
+    this._changeListeners.forEach(cb => cb(oldUrl, newUrl))
-        if (this._interval === null) {
+  }
-            this._createInterval();
-        }
-    }
 
-    removeEventListener(cb) {
+  _createInterval() {
-        this._changeListeners = this._changeListeners.filter(item=>item !== cb);
+    this.interval = setInterval(() => this._intervalTick(), INTERVAL_TIME)
-        if(this._changeListeners.length === 0) {
+  }
-            this._clearInterval();
-        }
-    }
 
-    _intervalTick() {
+  _clearInterval() {
-        const currentUrl = window.location.href;
+    clearInterval(this.interval)
-        if (currentUrl !== this.url) {
+    this.interval = null
-            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
-    }
 }

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]
 }

webpack.config.js

@@ -1,49 +1,49 @@
-const path = require('path');
+const path = require('node: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'
+    popup: './src/popup/popup.js',
-    },
+  },
-    output: {
+  output: {
-        filename: '[name].js',
+    filename: '[name].js',
-        path: path.resolve(__dirname, 'extension/dist')
+    path: path.resolve(__dirname, 'extension/dist'),
-    },
+  },
-    module: {
+  module: {
-        rules: [
+    rules: [
-            {
+      {
-                test: /\.m?js$/,
+        test: /\.m?js$/,
-                exclude: /(node_modules|bower_components)/,
+        exclude: /(node_modules|bower_components)/,
-                use: {
+        use: {
-                    loader: 'babel-loader',
+          loader: 'babel-loader',
-                    options: {
+          options: {
-                        presets: ['@babel/preset-env']
+            presets: ['@babel/preset-env'],
-                    }
+          },
-                }
+        },
-            },
+      },
-            {
+      {
-                test: /\.css$/i,
+        test: /\.css$/i,
-                use: ['style-loader', 'css-loader'],
+        use: ['style-loader', 'css-loader'],
-            },
+      },
-            {
+      {
-                test: /\.svg$/i,
+        test: /\.svg$/i,
-                use: 'raw-loader',
+        use: 'raw-loader',
-            },
+      },
-        ]
+    ],
-    },
+  },
-    plugins: [
+  plugins: [
-        new HtmlWebpackPlugin({
+    new HtmlWebpackPlugin({
-            template: "./src/popup/popup.html",
+      template: './src/popup/popup.html',
-            filename: "popup.html",
+      filename: 'popup.html',
-            chunks: ['popup']
+      chunks: ['popup'],
-        }),
+    }),
-        new HtmlWebpackPlugin({
+    new HtmlWebpackPlugin({
-            template: "./src/donate.html",
+      template: './src/donate.html',
-            filename: "donate.html",
+      filename: 'donate.html',
-            chunks: ['donate']
+      chunks: ['donate'],
-        })
+    }),
-    ]
+  ],
 }