Заменил изображение кнопки

2026-03-26 12:55:13 +00:00 · 2021-06-26 22:31:10 +03:00
parent f1430783cb
commit 3040d4f51e
15 changed files with 158 additions and 88 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 /node_modules
 /.cache
 /.idea
+.zip
--- a/extension/assets/mute.png
+++ b/extension/assets/mute.png
--- a/extension/dist/dom.js
+++ b/extension/dist/dom.js
--- a/extension/dist/donate.html
+++ b/extension/dist/donate.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Пожертвовать</title>
+    <style>
+        * {
+            color: rgb(44, 44, 44);
+        }
+
+        body {
+            text-align: center;
+        }
+
+        .container {
+            background-color: rgb(230, 241, 243);
+            max-width: 700px;
+            margin: auto;
+            padding: 2rem;
+            border-radius: 14px;
+            margin-top: 2rem;
+        }
+
+        .wallet {
+            margin: .5rem 0 .5rem 0;
+            word-wrap: break-word;
+            display: flex;
+            justify-content: space-between;
+        }
+    </style>
+</head>
+<body>
+    <h1>Спасибо, что думаете о пожертвовании</h1>
+    Это расширение разрабатывается и распространяется абсолютно бесплатно, не имеет никакой рекламы и не собирает данные о своих пользователях.
+    <div class="container">
+        <span class="wallet"><strong>XMR:</strong> 86mauNmQjTyjWJYrMyeTKpSLZ1FpZoziE278HJL7YmCL1rWQtsuz5xU3EmMNFsAwgJK4qoQPNQf9X91YqXvzJxvJ8bBSBrE</span>
+        <span class="wallet"><strong>ETH:</strong> 0xfb2a2c470d75f6fc1cb85a592840d960c000e94c</span>
+        <span class="wallet"><strong>BTC:</strong> bc1qf4wtp636m6pqcfz0c42t4fdutqrs4unkdpt5r8</span>
+    </div>
+</body>
+</html>
--- a/extension/dist/popup.html
+++ b/extension/dist/popup.html
@@ -5,7 +5,7 @@
  </head>
  <body>
    <div class="header">
-      <h3 align="center" id="status"></h3>
+      <h3 align="center">Vk Mute</h3>
    </div>
    <!--<button id="disableButton">Toggle</button>-->
    <div style="text-align: center;">
@@ -16,5 +16,8 @@
    </div>
    <div id="id_list">
    </div>
+    <div class="donation_btn">
+      <a href="./donate.html" target="_blank">💸</a>
+    </div>
  <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
@@ -25,5 +25,8 @@
            "matches": ["https://*.vk.com/*"],
            "js": ["./dist/dom.js"]
        }
+    ],
+    "web_accessible_resources": [
+        "assets/mute.png"
    ]
 }
--- a/src/dom/controls.js
+++ b/src/dom/controls.js
@@ -9,10 +9,8 @@ function muteBtnHTML(id) {
    const element = document.createElement('span');
    element.setAttribute('class', 'mute_message');
    element.setAttribute('id', `mute${id}`);
-    element.innerHTML = `
-        🔇
-        <span class="mutetooltip">Заглушить</span>
-    `;
+    element.style.background = `url(${chrome.runtime.getURL("assets/mute.png")}) center no-repeat`;
+    element.innerHTML ='<span class="mutetooltip">Заглушить</span>';
    return element;
 }

@@ -58,10 +56,9 @@ function addActionAreaEvents(actionsArea) {

 /**
 *
- * @param chatBody {HTMLElement}
 * @return {function(...[]=)}
 */
-function setIdToHideHandle(chatBody) {
+function setIdToHideHandle() {
    return function (event) {
        const clickedId = event.target.id.substr(4);     // get id of sender from element id

@@ -92,7 +89,6 @@ export function createTryToInitInterval() {
    const controlsInterval = setInterval(function () {
        if(!tryToInitControls(controlsInterval)){
            clearInterval(controlsInterval);
-
        }
    }, 200)
    return controlsInterval;
@@ -102,13 +98,13 @@ export function createTryToInitInterval() {
 *
 * @param message {HTMLElement}
 */
-function addControlButton(message, chatBody) {
+function addControlButton(message) {
    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));
+        muteBtn.addEventListener("click", setIdToHideHandle());
        return true;
    } else {
        return false;
--- a/src/dom/dom.css
+++ b/src/dom/dom.css
@@ -10,9 +10,8 @@
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
-    bottom: 125%;
-    left: 50%;
-    margin-left: -60px;
+    bottom: 110%;
+    margin-left: -53px;
    
    /* Fade in tooltip */
    opacity: 0;
@@ -38,14 +37,13 @@
 }

 .mute_message {
-    width: 16px;
-    height: 16px;
-    position: relative; 
+    margin-top: .46rem;
+    margin-left: 4px;
    display: inline-block;
    vertical-align: top;
-    /*background: url('chrome-extension://__MSG_@@extension_id__/mute.png') !important;*/
-    background-repeat: no-repeat;
-    padding: 6px;
+    width: 12px;
+    height: 12px;
+    background-size: contain !important;
 }

 .im-mess--actions {
--- a/src/dom/hide_element.js
+++ b/src/dom/hide_element.js
@@ -2,27 +2,22 @@ import {getChatBody} from "../utils/getChatBody";

 export function addNewMessageEventListener() {
    const chatBody = getChatBody();
-    chrome.storage.sync.get('idsToHide', function(data) {
-        let idsToHide = data.idsToHide;
    chatBody.addEventListener('DOMNodeInserted', function(event) {
-            newMessageHandler(event.target, idsToHide)
-        });
+        newMessageHandler(event.target)
    });
 }

 function newMessageHandler(message) {
    if (message.className === 'im-mess-stack _im_mess_stack ') {
-        let idsToHide;
-        chrome.storage.sync.get('idsToHide', function(data) {
-            idsToHide = data.idsToHide;
-        });
-
        chrome.storage.sync.get('isExtensionOn', function(data) {
-            if (data.isExtensionOn) {
-                if (idsToHide.includes(message.dataset.peer)) {
+            let isExtensionOn = data.isExtensionOn;
+            chrome.storage.sync.get('idsToHide', function(data) {
+                if (isExtensionOn) {
+                    if (data.idsToHide.includes(message.dataset.peer)) {
                        message.style.display = "none";
                    }
                }
            });
+        });
    }
 }
--- a/src/donate.html
+++ b/src/donate.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Пожертвовать</title>
+    <style>
+        * {
+            color: rgb(44, 44, 44);
+        }
+
+        body {
+            text-align: center;
+        }
+
+        .container {
+            background-color: rgb(230, 241, 243);
+            max-width: 700px;
+            margin: auto;
+            padding: 2rem;
+            border-radius: 14px;
+            margin-top: 2rem;
+        }
+
+        .wallet {
+            margin: .5rem 0 .5rem 0;
+            word-wrap: break-word;
+            display: flex;
+            justify-content: space-between;
+        }
+    </style>
+</head>
+<body>
+    <h1>Спасибо, что думаете о пожертвовании</h1>
+    Это расширение разрабатывается и распространяется абсолютно бесплатно, не имеет никакой рекламы и не собирает данные о своих пользователях.
+    <div class="container">
+        <span class="wallet"><strong>XMR:</strong> 86mauNmQjTyjWJYrMyeTKpSLZ1FpZoziE278HJL7YmCL1rWQtsuz5xU3EmMNFsAwgJK4qoQPNQf9X91YqXvzJxvJ8bBSBrE</span>
+        <span class="wallet"><strong>ETH:</strong> 0xfb2a2c470d75f6fc1cb85a592840d960c000e94c</span>
+        <span class="wallet"><strong>BTC:</strong> bc1qf4wtp636m6pqcfz0c42t4fdutqrs4unkdpt5r8</span>
+    </div>
+</body>
+</html>
--- a/src/popup/popup.css
+++ b/src/popup/popup.css
@@ -77,6 +77,11 @@ input:checked + .slider:before {
    padding-bottom: 5px;
 }

+h3 {
+    margin-bottom: 0;
+    padding: .5rem 0 .5rem 0;
+}
+
 .idToHide {
    padding: 10px;
    box-sizing: border-box;
@@ -101,3 +106,12 @@ input:checked + .slider:before {
 .del_item {
    cursor: pointer;
 }
+
+.donation_btn {
+    cursor: pointer;
+    text-align: right;
+}
+
+.donation_btn > a {
+    text-decoration: none;
+}
--- a/src/popup/popup.html
+++ b/src/popup/popup.html
@@ -5,7 +5,7 @@
  </head>
  <body>
    <div class="header">
-      <h3 align="center" id="status"></h3>
+      <h3 align="center">Vk Mute</h3>
    </div>
    <!--<button id="disableButton">Toggle</button>-->
    <div style="text-align: center;">
@@ -16,5 +16,8 @@
    </div>
    <div id="id_list">
    </div>
+    <div class="donation_btn">
+      <a href="./donate.html" target="_blank">💸</a>
+    </div>
  </body>
 </html>
--- a/src/popup/popup.js
+++ b/src/popup/popup.js
@@ -4,18 +4,14 @@ import './popup.css'
 let disableCheckbox = document.getElementById('disableCheckbox');
 let idsToHideElements = document.getElementsByClassName('idToHide');
 let idList = document.getElementById("id_list");
-let status = document.getElementById('status');
 let isExtensionOn;
 let idsToHide = [];

-let enableText = "Вкл";
-let disableText = "Выкл";
-
 function idBtnHTML(id) {
    const element = document.createElement('div');
    element.setAttribute('class', 'idToHide');
    element.innerHTML = `
-        <a href="https://vk.com/id${id}" target="_blank" title="Перейти в профиль">🧑 id${id}</a>
+        <a href="https://vk.com/id${id}" target="_blank" title="Перейти в профиль">🤐 id${id}</a>
        <span class="del_item" title="Удалить">🗑️</span>
    `;
    element.id = id;
@@ -26,11 +22,6 @@ chrome.storage.sync.get('isExtensionOn', function(data) {
    isExtensionOn = data.isExtensionOn;

    disableCheckbox.checked = isExtensionOn;
-    if (isExtensionOn) {
-        status.innerHTML = enableText;
-    } else {
-        status.innerHTML = disableText;
-    }
 });

 chrome.storage.sync.get('idsToHide', function(data) {
@@ -59,11 +50,6 @@ chrome.storage.sync.get('idsToHide', function(data) {

 disableCheckbox.addEventListener('change', (event) => {
    isExtensionOn = event.target.checked;
-    if (event.target.checked) {
-        status.innerHTML = enableText;
-    } else {
-        status.innerHTML = disableText;
-    }

    chrome.storage.sync.set({isExtensionOn}, function() {
        console.log('isExtensionOn: '+isExtensionOn);
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -35,6 +35,11 @@ module.exports = {
        template: "./src/popup/popup.html",
        filename: "popup.html",
        chunks: ['popup']
+    }),
+    new HtmlWebpackPlugin({
+        template: "./src/donate.html",
+        filename: "donate.html",
+        chunks: ['donate']
    })]

 }