Добавил ссылку на магазин Chrome в README

.gitignore

@@ -1,4 +1,5 @@
 /node_modules
 /.cache
 /.idea
+/assets
 .zip

README.md

@@ -6,11 +6,15 @@
 Если нажать на кнопку 🔇 напротив сообщения в беседе, то все сообщения во всех беседах от этого отправителя будут скрыты.
 
 ## Установка:
-1. Скачать ZIP
+### Вариант 1
+Скачать из интернет-магазина Chrome ([ссылка](https://chrome.google.com/webstore/detail/vk-mute/mcnkfnjggkbenehgfelnnkklpkpjeibl)).
+
+### Вариант 2
+1. [Скачать ZIP](https://github.com/anatolykopyl/vk-mute/releases)
 2. Разархивировать в удобное место
 3. Хром > Настройки > Расширения
     1. Включить режим разработчика
-    2. Загрузить распакованное, выбрать каталог с расширением (vk-mute-master/extension)
+    2. Загрузить распакованное, выбрать каталог с расширением
 
 Расширение должно работать во всех браузерах на движке Chromium.
 
@@ -18,3 +22,14 @@
 - Google Chrome
 - Opera
 - Brave
+
+## Разработка:
+Для живого обновления содержимого каталога `extension` во время работы запускаем:
+```
+$ npm run watch
+```
+
+Для билда расширения:
+```
+$ npm run build
+```

extension/dist/donate.html

@@ -25,7 +25,7 @@
         }
 
         .container {
-            background-color: hsl(207, 90%, 90%);
+            background-color: hsl(207, 90%, 95%);
             max-width: 700px;
             margin: auto;
             padding: 2rem;
@@ -50,4 +50,4 @@
         <span class="wallet"><strong>BTC:</strong> bc1qf4wtp636m6pqcfz0c42t4fdutqrs4unkdpt5r8</span>
     </div>
 </body>
-</html>
+</html>

extension/manifest.json

@@ -6,10 +6,9 @@
         "128": "assets/icons/icon128.png",
         "48": "assets/icons/icon48.png"
     },
-    "version": "1.0",
+    "version": "1.3",
     "description": "Позволяет заглушить нежелаемых собеседников",
     "permissions": [
-        "activeTab",
         "declarativeContent",
         "storage"
     ],

package.json

@@ -24,6 +24,7 @@
     "css-loader": "^3.5.2",
     "html-webpack-plugin": "^4.2.0",
     "style-loader": "^1.1.4",
-    "webpack": "^4.42.1"
+    "webpack": "^4.42.1",
+    "webpack-cli": "^4.7.2"
   }
 }

src/dom/controls.js

@@ -9,15 +9,16 @@ function muteBtnHTML(id) {
     const element = document.createElement('span');
     element.setAttribute('class', 'mute_message');
     element.setAttribute('id', `mute${id}`);
+    element.setAttribute('label', 'Заглушить');
     element.style.background = `url(${chrome.runtime.getURL("assets/mute.png")}) center no-repeat`;
-    element.innerHTML ='<span class="mutetooltip">Заглушить</span>';
+    element.innerHTML = '<div class="mute_tooltip tt_w tt_black tt_down"><div class="tt_text">Заглушить</div></div>';
     return element;
 }
 
 export function tryToAddControls(target) {
     if (target.className === 'im-mess--check fl_l') {
         const message = target.parentElement;
-        addControlButton(message)
+        addControlButton(message);
     }
 }
 
@@ -66,7 +67,11 @@ function setIdToHideHandle() {
                     name: clickedName
                 });
                 chrome.storage.sync.set({idsToHide: idsToHide}, function () {
-                    hideExistingMessages();
+                    chrome.storage.sync.get('isExtensionOn', function(data) {
+                        if (data.isExtensionOn) {
+                            hideExistingMessages();
+                        }
+                    });
                 });
             }
         });
@@ -99,15 +104,18 @@ export function createTryToInitInterval() {
  * @param message {HTMLElement}
  */
 function addControlButton(message) {
-    const actionsArea = message.getElementsByClassName("im-mess--actions")[0];
+    // Check if message is not an outgoing one
-    if (actionsArea && actionsArea.lastChild.className !== "mute_message") {
+    if (!message.classList.contains('im-mess_out')) {
-        const senderId = message.parentElement.parentElement.parentElement["dataset"].peer;
+        const actionsArea = message.getElementsByClassName("im-mess--actions")[0];
-        const muteBtn = addMuteButton(actionsArea, senderId);
+        if (actionsArea && actionsArea.lastChild.className !== "mute_message") {
-        addActionAreaEvents(actionsArea);
+            const senderId = message.parentElement.parentElement.parentElement["dataset"].peer;
-        muteBtn.addEventListener("click", setIdToHideHandle());
+            const muteBtn = addMuteButton(actionsArea, senderId);
-        return true;
+            addActionAreaEvents(actionsArea);
-    } else {
+            muteBtn.addEventListener("click", setIdToHideHandle());
-        return false;
+            return true;
+        } else {
+            return false;
+        }
     }
 }
 
@@ -119,7 +127,7 @@ export function tryToInitControls() {
         if (item.className.includes('im-mess-stack _im_mess_stack')) {
             let messages = item.children[1].children[1].getElementsByClassName('im-mess _im_mess');
             for (let message of messages) {
-                status = addControlButton(message, chatBody)
+                status = addControlButton(message);
             }
         }
     }

src/dom/dom.css

@@ -1,50 +1,28 @@
-.mute_message .mutetooltip {
+.mute_tooltip {
-    visibility: hidden;
-    width: 120px;
-    background-color: #555;
-    color: #fff;
-    text-align: center;
-    padding: 5px 0;
-    border-radius: 6px;
-    
-    /* Position the tooltip text */
     position: absolute;
-    z-index: 1;
+    left: -50px;
-    bottom: 110%;
+    top: -33px;
-    margin-left: -53px;
+    display: none;
-    
-    /* Fade in tooltip */
-    opacity: 0;
-    transition: opacity 0.3s;
 }
 
-/* Tooltip arrow */
+.mute_tooltip::after {
-.mute_message .mutetooltip::after {
+    left: 61px !important;
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #555 transparent transparent transparent;
 }
 
 /* Show the tooltip text when you mouse over the tooltip container */
-.mute_message:hover .mutetooltip {
+.mute_message:hover .mute_tooltip {
-    visibility: visible;
+    display: block !important;
     opacity: 1;
 }
 
 .mute_message {
-    margin-top: .46rem;
+    position: relative;
-    margin-left: 4px;
-    margin-right: 3px;
     display: inline-block;
     vertical-align: top;
-    width: 12px;
+    padding-top: 2px;
-    height: 12px;
+    width: 24px;
-    background-size: contain !important;
+    height: 24px;
+    background-size: 11px !important;
 }
 
 .im-mess--actions {

src/dom/hide_element.js

@@ -1,5 +1,5 @@
 import {getChatBody} from "../utils/getChatBody";
-import {tryToAddControls} from "./controls";
+import {tryToAddControls, hideExistingMessages} from "./controls";
 
 export function addNewMessageEventListener() {
     const chatBody = getChatBody();
@@ -21,4 +21,38 @@ function newMessageHandler(message) {
             }
         });
     }
+}
+
+export function returnMessagesEventListener() {
+    chrome.storage.onChanged.addListener(function(changes) {
+        const isExtensionOn = changes.isExtensionOn;
+        const idsToHide = changes.idsToHide;
+        const chatBody = getChatBody();
+        if (isExtensionOn) {
+            if (isExtensionOn.newValue === false) {
+                for (let item of chatBody.children) {
+                    item.style.display = "block";
+                }
+            } else {
+                hideExistingMessages();
+            }
+        }
+        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,7 +1,7 @@
 import './dom.css'
 import {createTryToInitInterval, hideExistingMessages, tryToInitControls} from "./controls";
 import {UrlController} from "../utils/Url";
-import {addNewMessageEventListener} from "./hide_element";
+import {addNewMessageEventListener, returnMessagesEventListener} from "./hide_element";
 
 function init() {
     const url = new UrlController();
@@ -9,7 +9,12 @@ function init() {
         if (tryToInitControls()) {
             createTryToInitInterval();
             addNewMessageEventListener();
-            hideExistingMessages();
+            returnMessagesEventListener();
+            chrome.storage.sync.get('isExtensionOn', function(data) {
+                if (data.isExtensionOn) {
+                    hideExistingMessages();
+                }
+            });
         }
     })
 }

src/donate.html

@@ -25,7 +25,7 @@
         }
 
         .container {
-            background-color: hsl(207, 90%, 90%);
+            background-color: hsl(207, 90%, 95%);
             max-width: 700px;
             margin: auto;
             padding: 2rem;
@@ -50,4 +50,4 @@
         <span class="wallet"><strong>BTC:</strong> bc1qf4wtp636m6pqcfz0c42t4fdutqrs4unkdpt5r8</span>
     </div>
 </body>
-</html>
+</html>

src/popup/popup.css

@@ -4,6 +4,7 @@
 
 body {
     min-width: 160px;
+    margin: 0;
 }
 /* The switch - the box around the slider */
 .switch {
@@ -71,19 +72,17 @@ input:checked + .slider:before {
 .header {
     background-color: #2196F3;
     color: white;
-    width: 100vw;
+    width: 100%;
+    height: 3rem;
     position: relative;
-    margin-left: -50vw;
+    display: flex;
-    left: 50%;
+    align-items: center;
-    margin-top: -20vw;
+    justify-content: center;
-    margin-bottom: 10vw;
+    margin-bottom: 1rem;
-    padding-top: 5px;
-    padding-bottom: 5px;
 }
 
 h3 {
-    margin-bottom: 0;
+    margin: 0;
-    padding: 1rem 0 .5rem 0;
 }
 
 .idToHide {
@@ -92,28 +91,32 @@ h3 {
     display: flex;
     justify-content: space-between;
     background-color: #fff;
-    width: 100vw;
 }
 
 .idToHide:hover {
-    background-color: #dcdfde;
+    background-color: #f1f1f1;
 }
 
 #id_list {
     color: black;
     position: relative;
-    margin-left: -50vw;
+    width: 100%;
-    left: 50%;
+    margin-top: 1rem;
-    margin-top: 10vw;
 }
 
 .del_item {
     cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.del_item:hover {
+    transform: scale(1.15);
 }
 
 .donation_btn {
     text-align: right;
     margin-top: .5rem;
+    padding: 0 10px 10px 0;
 }
 
 a {