Migrate to manifest v3

Merge pull request #25 from anatolykopyl/dependabot/npm_and_yarn/postcss-8.4.31
Bump postcss from 8.4.20 to 8.4.31
2026-03-26 12:55:13 +00:00 · 2023-12-10 11:15:53 +03:00 · 2023-12-09 13:15:20 +03:00 · 2023-10-28 11:53:03 +03:00 · 2023-10-20 00:45:14 +00:00 · 2023-10-07 10:53:05 +00:00
18 changed files with 1358 additions and 1283 deletions
--- 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,12 +2,11 @@
 <html>
  <head>
    <meta charset="UTF-8">
-  </head>
+  <script defer src="popup.js"></script></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">
@@ -19,5 +18,5 @@
    <div class="donation_btn">
      <a href="./donate.html" title="Пожертвовать" target="_blank">💸</a>
    </div>
-  <script src="popup.js"></script></body>
+  </body>
 </html>
--- a/extension/dist/popup.js
+++ b/extension/dist/popup.js
--- a/extension/manifest.json
+++ b/extension/manifest.json
@@ -6,20 +6,21 @@
        "128": "assets/icons/icon128.png",
        "48": "assets/icons/icon48.png"
    },
-    "version": "1.4",
+    "version": "1.5.0",
    "description": "Позволяет заглушить нежелаемых собеседников",
    "permissions": [
-        "declarativeContent",
        "storage"
    ],
-    "background": {
-        "scripts": ["dist/background.js"],
-        "persistent": false
+    "action": {
+        "default_icon": {
+            "140": "assets/icons/icon140.png",
+            "128": "assets/icons/icon128.png",
+            "48": "assets/icons/icon48.png"
        },
-    "page_action": {
+        "default_title": "VK Mute",
        "default_popup": "dist/popup.html"
    },
-    "manifest_version": 2,
+    "manifest_version": 3,
    "content_scripts": [
        {
            "matches": ["https://*.vk.com/*"],
@@ -27,6 +28,9 @@
        }
    ],
    "web_accessible_resources": [
-        "assets/mute.png"
+        {
+            "resources": ["assets/mute.png"],
+            "matches": ["https://*.vk.com/*"]
+        }
    ]
 }
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vk-mute",
-  "version": "1.0.0",
+  "version": "1.5.0",
  "description": "Заглушить собеседника в беседе в ВК. 🔇",
  "main": "src/dom/main.js",
  "scripts": {
@@ -11,8 +11,8 @@
    "type": "git",
    "url": "git+https://github.com/anatolykopyl/vk-mute.git"
  },
-  "author": "",
-  "license": "ISC",
+  "author": "Anatoly Kopyl <hi@kopyl.dev>",
+  "license": "GPL-3.0",
  "bugs": {
    "url": "https://github.com/anatolykopyl/vk-mute/issues"
  },
@@ -23,8 +23,9 @@
    "babel-loader": "^8.3.0",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
+    "raw-loader": "^4.0.2",
    "style-loader": "^1.1.4",
-    "webpack": "^5.75.0",
+    "webpack": "^5.76.0",
    "webpack-cli": "^4.7.2"
  }
 }
--- a/src/background/background.js
+++ b/src/background/background.js
@@ -1,14 +0,0 @@
-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,20 +1,24 @@
+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', 'mute_message');
+    element.setAttribute('class', 'im-mess--mute');
    element.setAttribute('id', `mute${id}`);
    element.setAttribute('label', 'Заглушить');
-    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>';
+    element.innerHTML = muteSvg + '<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;
@@ -31,7 +35,7 @@ export function tryToAddControls(target) {
 function addMuteButton(actionArea, senderId) {
    const muteButton = muteBtnHTML(senderId);
    actionArea.appendChild(muteButton);
-    muteButton.style.display = "none";
+    muteButton.style.visibility = "hidden";
    return muteButton;
 }

@@ -41,22 +45,21 @@ function addMuteButton(actionArea, senderId) {
 */
 function addActionAreaEvents(actionsArea) {
    actionsArea.parentElement.addEventListener("mouseenter", function (event) {
-        event.target.getElementsByClassName("mute_message")[0].style.display = "inline-block";
+        event.target.getElementsByClassName("im-mess--mute")[0].style.visibility = "visible";
    });

    actionsArea.parentElement.addEventListener("mouseleave", function (event) {
-        event.target.getElementsByClassName("mute_message")[0].style.display = "none";
+        event.target.getElementsByClassName("im-mess--mute")[0].style.visibility = "hidden";
    });
 }

 /**
 *
- * @return {function(...[]=)}
+ * @this {HTMLElement}
 */
 function setIdToHideHandle() {
-    return function (event) {
-        const clickedId = event.target.id.substr(4);     // get id of sender from element id
-        let clickedName = event.target.parentElement.parentElement.parentElement.parentElement;
+    const clickedId = this.id.substring(4);
+    let clickedName = this.parentElement.parentElement.parentElement.parentElement;
    clickedName = clickedName.children[0].children[0].children[0].innerText;

    chrome.storage.sync.get('idsToHide', function(data) {
@@ -75,7 +78,6 @@ function setIdToHideHandle() {
            });
        }
    });
-    }
 }

 export function hideExistingMessages() {
@@ -107,11 +109,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 !== "mute_message") {
+        if (actionsArea && actionsArea.lastChild.className !== "im-mess--mute") {
            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,19 +10,24 @@
 }

 /* Show the tooltip text when you mouse over the tooltip container */
-.mute_message:hover .mute_tooltip {
+.im-mess--mute:hover .mute_tooltip {
    display: block !important;
    opacity: 1;
 }

-.mute_message {
+.im-mess--mute {
    position: relative;
-    display: inline-block;
-    vertical-align: top;
-    padding-top: 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
    width: 24px;
    height: 24px;
-    background-size: 11px !important;
+    opacity: .5;
+    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
@@ -0,0 +1,9 @@
+<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,7 +7,6 @@
    <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');
-let disableCheckbox = document.getElementById('disableCheckbox');
-let idsToHideElements = document.getElementsByClassName('idToHide');
-let idList = document.getElementById("id_list");
+const disableCheckbox = document.getElementById('disableCheckbox');
+const idsToHideElements = document.getElementsByClassName('idToHide');
+const idList = document.getElementById("id_list");
 let isExtensionOn;
 let idsToHide = [];

--- a/src/utils/Url.js
+++ b/src/utils/Url.js
@@ -43,5 +43,4 @@ export class UrlController {
        clearInterval(this.interval)
        this.interval = null
    }
-
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,7 +6,6 @@ module.exports = {
    devtool: "inline-source-map",
    entry: {
        dom: './src/dom/main.js',
-        background: './src/background/background.js',
        popup: './src/popup/popup.js'
    },
    output: {
@@ -28,10 +27,15 @@ module.exports = {
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
-            }
+            },
+            {
+                test: /\.svg$/i,
+                use: 'raw-loader',
+            },
        ]
    },
-    plugins: [new HtmlWebpackPlugin({
+    plugins: [
+        new HtmlWebpackPlugin({
            template: "./src/popup/popup.html",
            filename: "popup.html",
            chunks: ['popup']
@@ -40,6 +44,6 @@ module.exports = {
            template: "./src/donate.html",
            filename: "donate.html",
            chunks: ['donate']
-    })]
-
+        })
+    ]
 }
Author	SHA1	Message	Date
anatolykopyl	91f1833534	Migrate to manifest v3	2023-12-10 11:15:53 +03:00
Anatoly Kopyl	4089f640ea	Merge pull request #25 from anatolykopyl/dependabot/npm_and_yarn/postcss-8.4.31 Bump postcss from 8.4.20 to 8.4.31	2023-12-09 13:15:20 +03:00
Anatoly Kopyl	85596a95a6	Merge pull request #26 from anatolykopyl/dependabot/npm_and_yarn/babel/traverse-7.23.2 Bump @babel/traverse from 7.9.5 to 7.23.2	2023-10-28 11:53:03 +03:00
dependabot[bot]	4cebd66a85	Bump @babel/traverse from 7.9.5 to 7.23.2 Bumps [@babel/traverse](https://github.com/babel/babel/tree/HEAD/packages/babel-traverse) from 7.9.5 to 7.23.2. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.2/packages/babel-traverse) --- updated-dependencies: - dependency-name: "@babel/traverse" dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-10-20 00:45:14 +00:00
dependabot[bot]	bc49282b62	Bump postcss from 8.4.20 to 8.4.31 Bumps [postcss](https://github.com/postcss/postcss) from 8.4.20 to 8.4.31. - [Release notes](https://github.com/postcss/postcss/releases) - [Changelog](https://github.com/postcss/postcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/postcss/postcss/compare/8.4.20...8.4.31) --- updated-dependencies: - dependency-name: postcss dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2023-10-07 10:53:05 +00:00
Anatoly Kopyl	78c6b02214	Merge pull request #24 from anatolykopyl/dependabot/npm_and_yarn/webpack-5.76.0 Bump webpack from 5.75.0 to 5.76.0	2023-03-17 11:41:04 +03:00
dependabot[bot]	97a8920057	Bump webpack from 5.75.0 to 5.76.0 Bumps [webpack](https://github.com/webpack/webpack) from 5.75.0 to 5.76.0. - [Release notes](https://github.com/webpack/webpack/releases) - [Commits](https://github.com/webpack/webpack/compare/v5.75.0...v5.76.0) --- updated-dependencies: - dependency-name: webpack dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com>	2023-03-15 09:35:17 +00:00