Compare commits
37 Commits
v1.2
...
544ef14295
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
544ef14295 | ||
|
|
218fc0610e | ||
|
|
02a46d4908 | ||
|
|
07bcb773f5 | ||
| b926f0edbf | |||
| 91f1833534 | |||
|
|
4089f640ea | ||
|
|
85596a95a6 | ||
|
|
4cebd66a85 | ||
|
|
bc49282b62 | ||
|
|
78c6b02214 | ||
|
|
97a8920057 | ||
|
|
a22c3485fa | ||
|
|
fd8c01e41b | ||
|
|
aad1365953 | ||
|
|
de578fd210 | ||
|
|
59ca6bb360 | ||
|
|
f7474d863b | ||
|
|
9a2381690e | ||
|
|
ecc265430b | ||
|
|
a8290e41f3 | ||
|
|
343ebe14ea | ||
|
|
31dcbae1da | ||
|
|
2330704243 | ||
|
|
56bf77001c | ||
|
|
d8f653382b | ||
| afa274b651 | |||
| 9a201e7412 | |||
|
|
fee04826c9 | ||
|
|
ae88addcfd | ||
|
|
119d598c24 | ||
|
|
c227c69aaf | ||
|
|
874c0694ba | ||
|
|
671ab3c037 | ||
|
|
5f5e5d1461 | ||
| 42d352c0f6 | |||
|
|
2ee163cba7 |
2
.gitignore
vendored
@@ -1,5 +1,7 @@
|
|||||||
/node_modules
|
/node_modules
|
||||||
|
.DS_Store
|
||||||
/.cache
|
/.cache
|
||||||
/.idea
|
/.idea
|
||||||
/assets
|
/assets
|
||||||
.zip
|
.zip
|
||||||
|
/.vscode
|
||||||
|
|||||||
22
README.md
@@ -1,4 +1,7 @@
|
|||||||
# vk-mute
|
# vk-mute
|
||||||
|
|
||||||
|
[](https://github.com/antfu/eslint-config)
|
||||||
|
|
||||||
Заглушить собеседника в беседе в ВК. 🔇
|
Заглушить собеседника в беседе в ВК. 🔇
|
||||||
|
|
||||||
На данный момент ВКонтакте не позволяет заглушать людей в беседах. Это расширение для Chrome берется это исправить.
|
На данный момент ВКонтакте не позволяет заглушать людей в беседах. Это расширение для Chrome берется это исправить.
|
||||||
@@ -6,11 +9,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. Разархивировать в удобное место
|
2. Разархивировать в удобное место
|
||||||
3. Хром > Настройки > Расширения
|
3. Хром > Настройки > Расширения
|
||||||
1. Включить режим разработчика
|
1. Включить режим разработчика
|
||||||
2. Загрузить распакованное, выбрать каталог с расширением (vk-mute-master/extension)
|
2. Загрузить распакованное, выбрать каталог с расширением
|
||||||
|
|
||||||
Расширение должно работать во всех браузерах на движке Chromium.
|
Расширение должно работать во всех браузерах на движке Chromium.
|
||||||
|
|
||||||
@@ -18,3 +25,14 @@
|
|||||||
- Google Chrome
|
- Google Chrome
|
||||||
- Opera
|
- Opera
|
||||||
- Brave
|
- Brave
|
||||||
|
|
||||||
|
## Разработка:
|
||||||
|
Для живого обновления содержимого каталога `extension` во время работы запускаем:
|
||||||
|
```
|
||||||
|
$ npm run watch
|
||||||
|
```
|
||||||
|
|
||||||
|
Для билда расширения:
|
||||||
|
```
|
||||||
|
$ npm run build
|
||||||
|
```
|
||||||
|
|||||||
3
eslint.config.js
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
const antfu = require('@antfu/eslint-config').default
|
||||||
|
|
||||||
|
module.exports = antfu()
|
||||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 14 KiB |
|
Before Width: | Height: | Size: 5.5 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 2.2 KiB |
119
extension/dist/background.js
vendored
1214
extension/dist/dom.js
vendored
5
extension/dist/popup.html
vendored
@@ -2,12 +2,11 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
</head>
|
<script defer src="popup.js"></script></head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<h3 align="center">VK Mute</h3>
|
<h3 align="center">VK Mute</h3>
|
||||||
</div>
|
</div>
|
||||||
<!--<button id="disableButton">Toggle</button>-->
|
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
<label class="switch">
|
<label class="switch">
|
||||||
<input type="checkbox" id="disableCheckbox">
|
<input type="checkbox" id="disableCheckbox">
|
||||||
@@ -19,5 +18,5 @@
|
|||||||
<div class="donation_btn">
|
<div class="donation_btn">
|
||||||
<a href="./donate.html" title="Пожертвовать" target="_blank">💸</a>
|
<a href="./donate.html" title="Пожертвовать" target="_blank">💸</a>
|
||||||
</div>
|
</div>
|
||||||
<script src="popup.js"></script></body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
420
extension/dist/popup.js
vendored
@@ -6,20 +6,21 @@
|
|||||||
"128": "assets/icons/icon128.png",
|
"128": "assets/icons/icon128.png",
|
||||||
"48": "assets/icons/icon48.png"
|
"48": "assets/icons/icon48.png"
|
||||||
},
|
},
|
||||||
"version": "1.2",
|
"version": "1.5.0",
|
||||||
"description": "Позволяет заглушить нежелаемых собеседников",
|
"description": "Позволяет заглушить нежелаемых собеседников",
|
||||||
"permissions": [
|
"permissions": [
|
||||||
"declarativeContent",
|
|
||||||
"storage"
|
"storage"
|
||||||
],
|
],
|
||||||
"background": {
|
"action": {
|
||||||
"scripts": ["dist/background.js"],
|
"default_icon": {
|
||||||
"persistent": false
|
"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"
|
"default_popup": "dist/popup.html"
|
||||||
},
|
},
|
||||||
"manifest_version": 2,
|
"manifest_version": 3,
|
||||||
"content_scripts": [
|
"content_scripts": [
|
||||||
{
|
{
|
||||||
"matches": ["https://*.vk.com/*"],
|
"matches": ["https://*.vk.com/*"],
|
||||||
@@ -27,6 +28,9 @@
|
|||||||
}
|
}
|
||||||
],
|
],
|
||||||
"web_accessible_resources": [
|
"web_accessible_resources": [
|
||||||
"assets/mute.png"
|
{
|
||||||
|
"resources": ["assets/mute.png"],
|
||||||
|
"matches": ["https://*.vk.com/*"]
|
||||||
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
13502
package-lock.json
generated
20
package.json
@@ -1,30 +1,34 @@
|
|||||||
{
|
{
|
||||||
"name": "vk-mute",
|
"name": "vk-mute",
|
||||||
"version": "1.0.0",
|
"version": "1.5.0",
|
||||||
"description": "Заглушить собеседника в беседе в ВК. 🔇",
|
"description": "Заглушить собеседника в беседе в ВК. 🔇",
|
||||||
"main": "src/dom/main.js",
|
"main": "src/dom/main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "webpack --config webpack.config.js",
|
"build": "webpack --config webpack.config.js",
|
||||||
"watch": "webpack --config webpack.config.js --watch"
|
"watch": "webpack --config webpack.config.js --watch",
|
||||||
|
"lint": "eslint ."
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "git+https://github.com/anatolykopyl/vk-mute.git"
|
"url": "git+https://github.com/anatolykopyl/vk-mute.git"
|
||||||
},
|
},
|
||||||
"author": "",
|
"author": "Anatoly Kopyl <hi@kopyl.dev>",
|
||||||
"license": "ISC",
|
"license": "GPL-3.0",
|
||||||
"bugs": {
|
"bugs": {
|
||||||
"url": "https://github.com/anatolykopyl/vk-mute/issues"
|
"url": "https://github.com/anatolykopyl/vk-mute/issues"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/anatolykopyl/vk-mute#readme",
|
"homepage": "https://github.com/anatolykopyl/vk-mute#readme",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@antfu/eslint-config": "^2.4.3",
|
||||||
"@babel/core": "^7.9.0",
|
"@babel/core": "^7.9.0",
|
||||||
"@babel/preset-env": "^7.9.5",
|
"@babel/preset-env": "^7.9.5",
|
||||||
"babel-loader": "^8.1.0",
|
"babel-loader": "^8.3.0",
|
||||||
"css-loader": "^3.5.2",
|
"css-loader": "^6.7.3",
|
||||||
"html-webpack-plugin": "^4.2.0",
|
"eslint": "^8.55.0",
|
||||||
|
"html-webpack-plugin": "^5.5.0",
|
||||||
|
"raw-loader": "^4.0.2",
|
||||||
"style-loader": "^1.1.4",
|
"style-loader": "^1.1.4",
|
||||||
"webpack": "^4.42.1",
|
"webpack": "^5.94.0",
|
||||||
"webpack-cli": "^4.7.2"
|
"webpack-cli": "^4.7.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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()]
|
|
||||||
}]);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
138
src/dom/controls.js
vendored
@@ -1,24 +1,28 @@
|
|||||||
|
import { getChatBody } from '../utils/getChatBody'
|
||||||
|
import muteSvg from './mute.svg'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @param id {String}
|
* @param id {String}
|
||||||
* @return {HTMLSpanElement}
|
* @return {HTMLSpanElement}
|
||||||
*/
|
*/
|
||||||
import {getChatBody} from "../utils/getChatBody";
|
|
||||||
|
|
||||||
function muteBtnHTML(id) {
|
function muteBtnHTML(id) {
|
||||||
const element = document.createElement('span');
|
const element = document.createElement('span')
|
||||||
element.setAttribute('class', 'mute_message');
|
element.setAttribute('class', 'im-mess--mute')
|
||||||
element.setAttribute('id', `mute${id}`);
|
element.setAttribute('id', `mute${id}`)
|
||||||
element.setAttribute('label', 'Заглушить');
|
element.setAttribute('label', 'Заглушить')
|
||||||
element.style.background = `url(${chrome.runtime.getURL("assets/mute.png")}) center no-repeat`;
|
element.innerHTML = `${muteSvg}<div class="mute_tooltip tt_w tt_black tt_down"><div class="tt_text">Заглушить</div></div>`
|
||||||
element.innerHTML = '<div class="mute_tooltip tt_w tt_black tt_down"><div class="tt_text">Заглушить</div></div>';
|
return element
|
||||||
return element;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param target {HTMLElenemt}
|
||||||
|
*/
|
||||||
export function tryToAddControls(target) {
|
export function tryToAddControls(target) {
|
||||||
if (target.className === 'im-mess--check fl_l') {
|
if (target.className === 'im-mess--check fl_l') {
|
||||||
const message = target.parentElement;
|
const message = target.parentElement
|
||||||
addControlButton(message);
|
addControlButton(message)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -29,10 +33,10 @@ export function tryToAddControls(target) {
|
|||||||
* @return {HTMLElement}
|
* @return {HTMLElement}
|
||||||
*/
|
*/
|
||||||
function addMuteButton(actionArea, senderId) {
|
function addMuteButton(actionArea, senderId) {
|
||||||
const muteButton = muteBtnHTML(senderId);
|
const muteButton = muteBtnHTML(senderId)
|
||||||
actionArea.appendChild(muteButton);
|
actionArea.appendChild(muteButton)
|
||||||
muteButton.style.display = "none";
|
muteButton.style.visibility = 'hidden'
|
||||||
return muteButton;
|
return muteButton
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -40,63 +44,58 @@ function addMuteButton(actionArea, senderId) {
|
|||||||
* @param actionsArea {HTMLElement}
|
* @param actionsArea {HTMLElement}
|
||||||
*/
|
*/
|
||||||
function addActionAreaEvents(actionsArea) {
|
function addActionAreaEvents(actionsArea) {
|
||||||
actionsArea.parentElement.addEventListener("mouseenter", function (event) {
|
actionsArea.parentElement.addEventListener('mouseenter', (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) {
|
actionsArea.parentElement.addEventListener('mouseleave', (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() {
|
function setIdToHideHandle() {
|
||||||
return function (event) {
|
const clickedId = this.id.substring(4)
|
||||||
const clickedId = event.target.id.substr(4); // get id of sender from element id
|
let clickedName = this.parentElement.parentElement.parentElement.parentElement
|
||||||
let clickedName = event.target.parentElement.parentElement.parentElement.parentElement;
|
clickedName = clickedName.children[0].children[0].children[0].textContent
|
||||||
clickedName = clickedName.children[0].children[0].children[0].innerText;
|
|
||||||
|
|
||||||
chrome.storage.sync.get('idsToHide', function(data) {
|
chrome.storage.sync.get('idsToHide', (data) => {
|
||||||
let idsToHide = data.idsToHide || [];
|
const idsToHide = data.idsToHide || []
|
||||||
if (idsToHide.filter(user => user.id == clickedId).length === 0) {
|
if (idsToHide.filter(user => user.id === clickedId).length === 0) {
|
||||||
idsToHide.push({
|
idsToHide.push({
|
||||||
id: clickedId,
|
id: clickedId,
|
||||||
name: clickedName
|
name: clickedName,
|
||||||
});
|
})
|
||||||
chrome.storage.sync.set({idsToHide: idsToHide}, function () {
|
chrome.storage.sync.set({ idsToHide }, () => {
|
||||||
chrome.storage.sync.get('isExtensionOn', function(data) {
|
chrome.storage.sync.get('isExtensionOn', (data) => {
|
||||||
if (data.isExtensionOn) {
|
if (data.isExtensionOn)
|
||||||
hideExistingMessages();
|
hideExistingMessages()
|
||||||
}
|
})
|
||||||
});
|
})
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function hideExistingMessages() {
|
export function hideExistingMessages() {
|
||||||
chrome.storage.sync.get('idsToHide', function(data) {
|
chrome.storage.sync.get('idsToHide', (data) => {
|
||||||
const chatBody = getChatBody();
|
const chatBody = getChatBody()
|
||||||
for (let item of chatBody.children) {
|
for (const item of chatBody.children) {
|
||||||
if (data.idsToHide.filter(user => user.id == item.dataset.peer).length > 0) {
|
if (data.idsToHide.filter(user => user.id === item.dataset.peer).length > 0)
|
||||||
item.style.display = "none";
|
item.style.display = 'none'
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Try to add controls until successful. Needed for page refresh.
|
// Try to add controls until successful. Needed for page refresh.
|
||||||
export function createTryToInitInterval() {
|
export function createTryToInitInterval() {
|
||||||
const controlsInterval = setInterval(function () {
|
const controlsInterval = setInterval(() => {
|
||||||
if(!tryToInitControls(controlsInterval)){
|
if (!tryToInitControls(controlsInterval))
|
||||||
clearInterval(controlsInterval);
|
clearInterval(controlsInterval)
|
||||||
}
|
|
||||||
}, 200)
|
}, 200)
|
||||||
return controlsInterval;
|
return controlsInterval
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -106,30 +105,31 @@ export function createTryToInitInterval() {
|
|||||||
function addControlButton(message) {
|
function addControlButton(message) {
|
||||||
// Check if message is not an outgoing one
|
// Check if message is not an outgoing one
|
||||||
if (!message.classList.contains('im-mess_out')) {
|
if (!message.classList.contains('im-mess_out')) {
|
||||||
const actionsArea = message.getElementsByClassName("im-mess--actions")[0];
|
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 senderId = message.parentElement.parentElement.parentElement.dataset.peer
|
||||||
const muteBtn = addMuteButton(actionsArea, senderId);
|
const muteBtn = addMuteButton(actionsArea, senderId)
|
||||||
addActionAreaEvents(actionsArea);
|
addActionAreaEvents(actionsArea)
|
||||||
muteBtn.addEventListener("click", setIdToHideHandle());
|
muteBtn.addEventListener('click', setIdToHideHandle)
|
||||||
return true;
|
return true
|
||||||
} else {
|
}
|
||||||
return false;
|
else {
|
||||||
|
return false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function tryToInitControls() {
|
export function tryToInitControls() {
|
||||||
let status = true;
|
let status = true
|
||||||
const chatBody = getChatBody();
|
const chatBody = getChatBody()
|
||||||
if(!chatBody) return false;
|
if (!chatBody)
|
||||||
for (let item of chatBody.children) {
|
return false
|
||||||
|
for (const item of chatBody.children) {
|
||||||
if (item.className.includes('im-mess-stack _im_mess_stack')) {
|
if (item.className.includes('im-mess-stack _im_mess_stack')) {
|
||||||
let messages = item.children[1].children[1].getElementsByClassName('im-mess _im_mess');
|
const messages = item.children[1].children[1].getElementsByClassName('im-mess _im_mess')
|
||||||
for (let message of messages) {
|
for (const message of messages)
|
||||||
status = addControlButton(message);
|
status = addControlButton(message)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
return status
|
||||||
return status;
|
|
||||||
}
|
}
|
||||||
@@ -10,19 +10,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Show the tooltip text when you mouse over the tooltip container */
|
/* 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;
|
display: block !important;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mute_message {
|
.im-mess--mute {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
vertical-align: top;
|
align-items: center;
|
||||||
padding-top: 2px;
|
justify-content: center;
|
||||||
width: 24px;
|
width: 24px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
background-size: 11px !important;
|
opacity: .5;
|
||||||
|
color: var(--vkui--color_icon_secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.im-mess--mute:hover {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.im-mess--actions {
|
.im-mess--actions {
|
||||||
|
|||||||
@@ -1,58 +1,52 @@
|
|||||||
import {getChatBody} from "../utils/getChatBody";
|
import { getChatBody } from '../utils/getChatBody'
|
||||||
import {tryToAddControls, hideExistingMessages} from "./controls";
|
import { hideExistingMessages, tryToAddControls } from './controls'
|
||||||
|
|
||||||
export function addNewMessageEventListener() {
|
export function addNewMessageEventListener() {
|
||||||
const chatBody = getChatBody();
|
const chatBody = getChatBody()
|
||||||
chatBody.addEventListener('DOMNodeInserted', function(event) {
|
chatBody.addEventListener('DOMNodeInserted', (event) => {
|
||||||
newMessageHandler(event.target)
|
newMessageHandler(event.target)
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
function newMessageHandler(message) {
|
function newMessageHandler(message) {
|
||||||
tryToAddControls(message);
|
tryToAddControls(message)
|
||||||
if (message.className === 'im-mess-stack _im_mess_stack ') {
|
if (message.className === 'im-mess-stack _im_mess_stack ') {
|
||||||
chrome.storage.sync.get('isExtensionOn', function(data) {
|
chrome.storage.sync.get('isExtensionOn', (data) => {
|
||||||
if (data.isExtensionOn) {
|
if (data.isExtensionOn) {
|
||||||
chrome.storage.sync.get('idsToHide', function(data) {
|
chrome.storage.sync.get('idsToHide', (data) => {
|
||||||
if (data.idsToHide.filter(user => user.id == message.dataset.peer).length > 0) {
|
if (data.idsToHide.filter(user => user.id === message.dataset.peer).length > 0)
|
||||||
message.style.display = "none";
|
message.style.display = 'none'
|
||||||
|
})
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function returnMessagesEventListener() {
|
export function returnMessagesEventListener() {
|
||||||
chrome.storage.onChanged.addListener(function(changes) {
|
chrome.storage.onChanged.addListener((changes) => {
|
||||||
const isExtensionOn = changes.isExtensionOn;
|
const isExtensionOn = changes.isExtensionOn
|
||||||
const idsToHide = changes.idsToHide;
|
const idsToHide = changes.idsToHide
|
||||||
const chatBody = getChatBody();
|
const chatBody = getChatBody()
|
||||||
if (isExtensionOn) {
|
if (isExtensionOn) {
|
||||||
if (isExtensionOn.newValue === false) {
|
if (isExtensionOn.newValue === false) {
|
||||||
for (let item of chatBody.children) {
|
for (const item of chatBody.children)
|
||||||
item.style.display = "block";
|
item.style.display = 'block'
|
||||||
}
|
}
|
||||||
} else {
|
else {
|
||||||
hideExistingMessages();
|
hideExistingMessages()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (idsToHide) {
|
if (idsToHide) {
|
||||||
chrome.storage.sync.get('isExtensionOn', function(data) {
|
chrome.storage.sync.get('isExtensionOn', (data) => {
|
||||||
if (data.isExtensionOn) {
|
if (data.isExtensionOn) {
|
||||||
if (idsToHide.newValue.length < idsToHide.oldValue.length) {
|
if (idsToHide.newValue.length < idsToHide.oldValue.length) {
|
||||||
// for (let item of chatBody.children) {
|
for (const item of chatBody.children) {
|
||||||
// item.style.display = "block";
|
if (idsToHide.newValue.filter(user => user.id === item.dataset.peer).length === 0)
|
||||||
// }
|
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";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
@@ -1,22 +1,21 @@
|
|||||||
import './dom.css'
|
import './dom.css'
|
||||||
import {createTryToInitInterval, hideExistingMessages, tryToInitControls} from "./controls";
|
import { UrlController } from '../utils/Url'
|
||||||
import {UrlController} from "../utils/Url";
|
import { createTryToInitInterval, hideExistingMessages, tryToInitControls } from './controls'
|
||||||
import {addNewMessageEventListener, returnMessagesEventListener} from "./hide_element";
|
import { addNewMessageEventListener, returnMessagesEventListener } from './hide_element'
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
const url = new UrlController();
|
const url = new UrlController()
|
||||||
url.onChange(() => {
|
url.onChange(() => {
|
||||||
if (tryToInitControls()) {
|
if (tryToInitControls()) {
|
||||||
createTryToInitInterval();
|
createTryToInitInterval()
|
||||||
addNewMessageEventListener();
|
addNewMessageEventListener()
|
||||||
returnMessagesEventListener();
|
returnMessagesEventListener()
|
||||||
chrome.storage.sync.get('isExtensionOn', function(data) {
|
chrome.storage.sync.get('isExtensionOn', (data) => {
|
||||||
if (data.isExtensionOn) {
|
if (data.isExtensionOn)
|
||||||
hideExistingMessages();
|
hideExistingMessages()
|
||||||
}
|
})
|
||||||
});
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
init();
|
init()
|
||||||
|
|||||||
9
src/dom/mute.svg
Normal file
@@ -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>
|
||||||
|
After Width: | Height: | Size: 348 B |
@@ -4,8 +4,9 @@
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
min-width: 160px;
|
min-width: 160px;
|
||||||
|
margin: 0;
|
||||||
}
|
}
|
||||||
/* The switch - the box around the slider */
|
|
||||||
.switch {
|
.switch {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@@ -13,14 +14,12 @@ body {
|
|||||||
height: 34px;
|
height: 34px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Hide default HTML checkbox */
|
|
||||||
.switch input {
|
.switch input {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* The slider */
|
|
||||||
.slider {
|
.slider {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -59,7 +58,6 @@ input:checked + .slider:before {
|
|||||||
transform: translateX(26px);
|
transform: translateX(26px);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Rounded sliders */
|
|
||||||
.slider.round {
|
.slider.round {
|
||||||
border-radius: 34px;
|
border-radius: 34px;
|
||||||
}
|
}
|
||||||
@@ -71,19 +69,17 @@ input:checked + .slider:before {
|
|||||||
.header {
|
.header {
|
||||||
background-color: #2196F3;
|
background-color: #2196F3;
|
||||||
color: white;
|
color: white;
|
||||||
width: 100vw;
|
width: 100%;
|
||||||
|
height: 3rem;
|
||||||
position: relative;
|
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 {
|
h3 {
|
||||||
margin-bottom: 0;
|
margin: 0;
|
||||||
padding: 1rem 0 .5rem 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.idToHide {
|
.idToHide {
|
||||||
@@ -92,7 +88,6 @@ h3 {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
width: 100vw;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.idToHide:hover {
|
.idToHide:hover {
|
||||||
@@ -102,9 +97,8 @@ h3 {
|
|||||||
#id_list {
|
#id_list {
|
||||||
color: black;
|
color: black;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-left: -50vw;
|
width: 100%;
|
||||||
left: 50%;
|
margin-top: 1rem;
|
||||||
margin-top: 10vw;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.del_item {
|
.del_item {
|
||||||
@@ -119,6 +113,7 @@ h3 {
|
|||||||
.donation_btn {
|
.donation_btn {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
margin-top: .5rem;
|
margin-top: .5rem;
|
||||||
|
padding: 0 10px 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
|
|||||||
@@ -7,7 +7,6 @@
|
|||||||
<div class="header">
|
<div class="header">
|
||||||
<h3 align="center">VK Mute</h3>
|
<h3 align="center">VK Mute</h3>
|
||||||
</div>
|
</div>
|
||||||
<!--<button id="disableButton">Toggle</button>-->
|
|
||||||
<div style="text-align: center;">
|
<div style="text-align: center;">
|
||||||
<label class="switch">
|
<label class="switch">
|
||||||
<input type="checkbox" id="disableCheckbox">
|
<input type="checkbox" id="disableCheckbox">
|
||||||
|
|||||||
@@ -1,54 +1,51 @@
|
|||||||
import './popup.css'
|
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 isExtensionOn;
|
let idsToHide = []
|
||||||
let idsToHide = [];
|
|
||||||
|
|
||||||
function idBtnHTML(user) {
|
function idBtnHTML(user) {
|
||||||
const element = document.createElement('div');
|
const element = document.createElement('div')
|
||||||
element.setAttribute('class', 'idToHide');
|
element.setAttribute('class', 'idToHide')
|
||||||
element.innerHTML = `
|
element.innerHTML = `
|
||||||
<a href="https://vk.com/id${user.id}" target="_blank" title="Перейти в профиль">🤐 ${user.name}</a>
|
<a href="https://vk.com/id${user.id}" target="_blank" title="Перейти в профиль">🤐 ${user.name}</a>
|
||||||
<span class="del_item" title="Удалить">🗑️</span>
|
<span class="del_item" title="Удалить">🗑️</span>
|
||||||
`;
|
`
|
||||||
element.id = user.id;
|
element.id = user.id
|
||||||
return element;
|
return element
|
||||||
}
|
}
|
||||||
|
|
||||||
chrome.storage.sync.get('isExtensionOn', function(data) {
|
chrome.storage.sync.get('isExtensionOn', (data) => {
|
||||||
isExtensionOn = data.isExtensionOn;
|
isExtensionOn = data.isExtensionOn
|
||||||
|
|
||||||
disableCheckbox.checked = isExtensionOn;
|
disableCheckbox.checked = isExtensionOn
|
||||||
});
|
})
|
||||||
|
|
||||||
chrome.storage.sync.get('idsToHide', function(data) {
|
chrome.storage.sync.get('idsToHide', (data) => {
|
||||||
idsToHide = data.idsToHide;
|
idsToHide = data.idsToHide
|
||||||
for (const id in idsToHide) {
|
for (const id in idsToHide) {
|
||||||
const row = idBtnHTML(idsToHide[id]);
|
const row = idBtnHTML(idsToHide[id])
|
||||||
idList.appendChild(row);
|
idList.appendChild(row)
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const element of idsToHideElements) {
|
for (const element of idsToHideElements) {
|
||||||
for (const child of element.childNodes) {
|
for (const child of element.childNodes) {
|
||||||
if (child.className === "del_item") {
|
if (child.className === 'del_item') {
|
||||||
child.addEventListener('click', function() {
|
child.addEventListener('click', () => {
|
||||||
idsToHide = idsToHide.filter(user => user.id != element.id);
|
idsToHide = idsToHide.filter(user => user.id !== element.id)
|
||||||
chrome.storage.sync.set({idsToHide: idsToHide}, function() {
|
chrome.storage.sync.set({ idsToHide }, () => {
|
||||||
element.remove();
|
element.remove()
|
||||||
console.log('Cleared idsToHide');
|
})
|
||||||
});
|
})
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
disableCheckbox.addEventListener('change', (event) => {
|
disableCheckbox.addEventListener('change', (event) => {
|
||||||
isExtensionOn = event.target.checked;
|
isExtensionOn = event.target.checked
|
||||||
|
|
||||||
chrome.storage.sync.set({isExtensionOn}, function() {
|
chrome.storage.sync.set({ isExtensionOn })
|
||||||
console.log('isExtensionOn: '+isExtensionOn);
|
})
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|||||||
@@ -1,38 +1,34 @@
|
|||||||
const INTERVAL_TIME = 100;
|
const INTERVAL_TIME = 100
|
||||||
|
|
||||||
export class UrlController {
|
export class UrlController {
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
this._changeListeners = [];
|
this._changeListeners = []
|
||||||
this._interval = null;
|
this._interval = null
|
||||||
this._url = window.location.href;
|
this._url = window.location.href
|
||||||
}
|
}
|
||||||
|
|
||||||
onChange(cb) {
|
onChange(cb) {
|
||||||
this._changeListeners.push(cb);
|
this._changeListeners.push(cb)
|
||||||
if (this._interval === null) {
|
if (this._interval === null)
|
||||||
this._createInterval();
|
this._createInterval()
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
removeEventListener(cb) {
|
removeEventListener(cb) {
|
||||||
this._changeListeners = this._changeListeners.filter(item=>item !== cb);
|
this._changeListeners = this._changeListeners.filter(item => item !== cb)
|
||||||
if(this._changeListeners.length === 0) {
|
if (this._changeListeners.length === 0)
|
||||||
this._clearInterval();
|
this._clearInterval()
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_intervalTick() {
|
_intervalTick() {
|
||||||
const currentUrl = window.location.href;
|
const currentUrl = window.location.href
|
||||||
if (currentUrl !== this.url) {
|
if (currentUrl !== this.url) {
|
||||||
this._broadcast(this.url, currentUrl);
|
this._broadcast(this.url, currentUrl)
|
||||||
this.url = currentUrl;
|
this.url = currentUrl
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
_broadcast(oldUrl, newUrl) {
|
_broadcast(oldUrl, newUrl) {
|
||||||
this._changeListeners.forEach(cb => cb(oldUrl, newUrl));
|
this._changeListeners.forEach(cb => cb(oldUrl, newUrl))
|
||||||
}
|
}
|
||||||
|
|
||||||
_createInterval() {
|
_createInterval() {
|
||||||
@@ -43,5 +39,4 @@ export class UrlController {
|
|||||||
clearInterval(this.interval)
|
clearInterval(this.interval)
|
||||||
this.interval = null
|
this.interval = null
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -1,3 +1,3 @@
|
|||||||
export function getChatBody() {
|
export function getChatBody() {
|
||||||
return document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
|
return document.getElementsByClassName('_im_peer_history im-page-chat-contain')[0]
|
||||||
}
|
}
|
||||||
@@ -1,17 +1,16 @@
|
|||||||
const path = require('path');
|
const path = require('node:path')
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
mode: "development",
|
mode: 'development',
|
||||||
devtool: "inline-source-map",
|
devtool: 'inline-source-map',
|
||||||
entry: {
|
entry: {
|
||||||
dom: './src/dom/main.js',
|
dom: './src/dom/main.js',
|
||||||
background: './src/background/background.js',
|
popup: './src/popup/popup.js',
|
||||||
popup: './src/popup/popup.js'
|
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
filename: '[name].js',
|
filename: '[name].js',
|
||||||
path: path.resolve(__dirname, 'extension/dist')
|
path: path.resolve(__dirname, 'extension/dist'),
|
||||||
},
|
},
|
||||||
module: {
|
module: {
|
||||||
rules: [
|
rules: [
|
||||||
@@ -21,25 +20,30 @@ module.exports = {
|
|||||||
use: {
|
use: {
|
||||||
loader: 'babel-loader',
|
loader: 'babel-loader',
|
||||||
options: {
|
options: {
|
||||||
presets: ['@babel/preset-env']
|
presets: ['@babel/preset-env'],
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /\.css$/i,
|
test: /\.css$/i,
|
||||||
use: ['style-loader', 'css-loader'],
|
use: ['style-loader', 'css-loader'],
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
plugins: [new HtmlWebpackPlugin({
|
{
|
||||||
template: "./src/popup/popup.html",
|
test: /\.svg$/i,
|
||||||
filename: "popup.html",
|
use: 'raw-loader',
|
||||||
chunks: ['popup']
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: './src/popup/popup.html',
|
||||||
|
filename: 'popup.html',
|
||||||
|
chunks: ['popup'],
|
||||||
}),
|
}),
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
template: "./src/donate.html",
|
template: './src/donate.html',
|
||||||
filename: "donate.html",
|
filename: 'donate.html',
|
||||||
chunks: ['donate']
|
chunks: ['donate'],
|
||||||
})]
|
}),
|
||||||
|
],
|
||||||
}
|
}
|
||||||