Fixed permissions

.gitignore

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

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;

extension/manifest.json

@@ -6,10 +6,9 @@
         "128": "assets/icons/icon128.png",
         "48": "assets/icons/icon48.png"
     },
-    "version": "1.0",
+    "version": "1.2",
     "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 () {
+                    chrome.storage.sync.get('isExtensionOn', function(data) {
+                        if (data.isExtensionOn) {
                             hideExistingMessages();
+                        }
+                    });
                 });
             }
         });
@@ -99,6 +104,8 @@ export function createTryToInitInterval() {
  * @param message {HTMLElement}
  */
 function addControlButton(message) {
+    // Check if message is not an outgoing one
+    if (!message.classList.contains('im-mess_out')) {
         const actionsArea = message.getElementsByClassName("im-mess--actions")[0];
         if (actionsArea && actionsArea.lastChild.className !== "mute_message") {
             const senderId = message.parentElement.parentElement.parentElement["dataset"].peer;
@@ -109,6 +116,7 @@ function addControlButton(message) {
         } else {
             return false;
         }
+    }
 }
 
 export function tryToInitControls() {
@@ -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 {
-    visibility: hidden;
-    width: 120px;
-    background-color: #555;
-    color: #fff;
-    text-align: center;
-    padding: 5px 0;
-    border-radius: 6px;
-    
-    /* Position the tooltip text */
+.mute_tooltip {
     position: absolute;
-    z-index: 1;
-    bottom: 110%;
-    margin-left: -53px;
-    
-    /* Fade in tooltip */
-    opacity: 0;
-    transition: opacity 0.3s;
+    left: -50px;
+    top: -33px;
+    display: none;
 }
 
-/* Tooltip arrow */
-.mute_message .mutetooltip::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #555 transparent transparent transparent;
+.mute_tooltip::after {
+    left: 61px !important;
 }
 
 /* Show the tooltip text when you mouse over the tooltip container */
-.mute_message:hover .mutetooltip {
-    visibility: visible;
+.mute_message:hover .mute_tooltip {
+    display: block !important;
     opacity: 1;
 }
 
 .mute_message {
-    margin-top: .46rem;
-    margin-left: 4px;
-    margin-right: 3px;
+    position: relative;
     display: inline-block;
     vertical-align: top;
-    width: 12px;
-    height: 12px;
-    background-size: contain !important;
+    padding-top: 2px;
+    width: 24px;
+    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();
@@ -22,3 +22,37 @@ 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,8 +9,13 @@ function init() {
         if (tryToInitControls()) {
             createTryToInitInterval();
             addNewMessageEventListener();
+            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;

src/popup/popup.css

@@ -96,7 +96,7 @@ h3 {
 }
 
 .idToHide:hover {
-    background-color: #dcdfde;
+    background-color: #f1f1f1;
 }
 
 #id_list {
@@ -109,6 +109,11 @@ h3 {
 
 .del_item {
     cursor: pointer;
+    transition: transform 0.2s;
+}
+
+.del_item:hover {
+    transform: scale(1.15);
 }
 
 .donation_btn {