Firefox port

2026-03-26 21:05:16 +00:00 · 2021-11-25 21:01:49 +03:00
22 changed files with 8226 additions and 2653 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,4 @@
 /node_modules
 .DS_Store
 /.cache
 /.idea
 /assets
--- 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,6 +1,6 @@
 {
  "name": "vk-mute",
-  "version": "1.5.0",
+  "version": "1.0.0",
  "description": "Заглушить собеседника в беседе в ВК. 🔇",
  "main": "src/dom/main.js",
  "scripts": {
@@ -11,8 +11,8 @@
    "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"
  },
@@ -20,12 +20,11 @@
  "devDependencies": {
    "@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",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^4.2.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,24 +1,20 @@
 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');
-    element.setAttribute('class', 'im-mess--mute');
+    element.setAttribute('class', 'mute_message');
    element.setAttribute('id', `mute${id}`);
    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`;
    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') {
        const message = target.parentElement;
@@ -35,7 +31,7 @@ export function tryToAddControls(target) {
 function addMuteButton(actionArea, senderId) {
    const muteButton = muteBtnHTML(senderId);
    actionArea.appendChild(muteButton);
-    muteButton.style.visibility = "hidden";
+    muteButton.style.display = "none";
    return muteButton;
 }
@@ -45,21 +41,22 @@ function addMuteButton(actionArea, senderId) {
 */
 function addActionAreaEvents(actionsArea) {
    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", 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
        let clickedName = event.target.parentElement.parentElement.parentElement.parentElement;
        clickedName = clickedName.children[0].children[0].children[0].innerText;
        chrome.storage.sync.get('idsToHide', function(data) {
@@ -79,6 +76,7 @@ function setIdToHideHandle() {
            }
        });
    }
 }
 export function hideExistingMessages() {
    chrome.storage.sync.get('idsToHide', function(data) {
@@ -109,11 +107,11 @@ 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 !== "im-mess--mute") {
+        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);
+            muteBtn.addEventListener("click", setIdToHideHandle());
            return true;
        } else {
            return false;
--- a/src/dom/dom.css
+++ b/src/dom/dom.css
@@ -10,24 +10,19 @@
 }
 /* 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;
    opacity: 1;
 }
-.im-mess--mute {
+.mute_message {
    position: relative;
-    display: inline-flex;
+    display: inline-block;
-    align-items: center;
+    vertical-align: top;
-    justify-content: center;
+    padding-top: 2px;
    width: 24px;
    height: 24px;
-    opacity: .5;
+    background-size: 11px !important;
    color: var(--vkui--color_icon_secondary);
 }
 .im-mess--mute:hover {
    opacity: 1;
 }
 .im-mess--actions {
--- 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.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,9 +1,9 @@
 import './popup.css'
 //let disableButton = document.getElementById('disableButton');
-const disableCheckbox = document.getElementById('disableCheckbox');
+let disableCheckbox = document.getElementById('disableCheckbox');
-const idsToHideElements = document.getElementsByClassName('idToHide');
+let idsToHideElements = document.getElementsByClassName('idToHide');
-const idList = document.getElementById("id_list");
+let idList = document.getElementById("id_list");
 let isExtensionOn;
 let idsToHide = [];
--- a/src/utils/Url.js
+++ b/src/utils/Url.js
@@ -43,4 +43,5 @@ export class UrlController {
        clearInterval(this.interval)
        this.interval = null
    }
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,6 +6,7 @@ module.exports = {
    devtool: "inline-source-map",
    entry: {
        dom: './src/dom/main.js',
        background: './src/background/background.js',
        popup: './src/popup/popup.js'
    },
    output: {
@@ -27,15 +28,10 @@ module.exports = {
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
-            },
+            }
            {
                test: /\.svg$/i,
                use: 'raw-loader',
            },
        ]
    },
-    plugins: [
+    plugins: [new HtmlWebpackPlugin({
        new HtmlWebpackPlugin({
        template: "./src/popup/popup.html",
        filename: "popup.html",
        chunks: ['popup']
@@ -44,6 +40,6 @@ module.exports = {
        template: "./src/donate.html",
        filename: "donate.html",
        chunks: ['donate']
-        })
+    })]
-    ]
+
 }