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

This commit is contained in:
2021-06-26 22:31:10 +03:00
parent f1430783cb
commit 3040d4f51e
15 changed files with 158 additions and 88 deletions

1
.gitignore vendored
View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

36
extension/dist/dom.js vendored

File diff suppressed because one or more lines are too long

43
extension/dist/donate.html vendored Normal file
View File

@@ -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>

View File

@@ -5,7 +5,7 @@
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<h3 align="center" id="status"></h3> <h3 align="center">Vk Mute</h3>
</div> </div>
<!--<button id="disableButton">Toggle</button>--> <!--<button id="disableButton">Toggle</button>-->
<div style="text-align: center;"> <div style="text-align: center;">
@@ -16,5 +16,8 @@
</div> </div>
<div id="id_list"> <div id="id_list">
</div> </div>
<div class="donation_btn">
<a href="./donate.html" target="_blank">💸</a>
</div>
<script src="popup.js"></script></body> <script src="popup.js"></script></body>
</html> </html>

File diff suppressed because one or more lines are too long

View File

@@ -25,5 +25,8 @@
"matches": ["https://*.vk.com/*"], "matches": ["https://*.vk.com/*"],
"js": ["./dist/dom.js"] "js": ["./dist/dom.js"]
} }
],
"web_accessible_resources": [
"assets/mute.png"
] ]
} }

14
src/dom/controls.js vendored
View File

@@ -9,10 +9,8 @@ function muteBtnHTML(id) {
const element = document.createElement('span'); const element = document.createElement('span');
element.setAttribute('class', 'mute_message'); element.setAttribute('class', 'mute_message');
element.setAttribute('id', `mute${id}`); element.setAttribute('id', `mute${id}`);
element.innerHTML = ` element.style.background = `url(${chrome.runtime.getURL("assets/mute.png")}) center no-repeat`;
🔇 element.innerHTML ='<span class="mutetooltip">Заглушить</span>';
<span class="mutetooltip">Заглушить</span>
`;
return element; return element;
} }
@@ -58,10 +56,9 @@ function addActionAreaEvents(actionsArea) {
/** /**
* *
* @param chatBody {HTMLElement}
* @return {function(...[]=)} * @return {function(...[]=)}
*/ */
function setIdToHideHandle(chatBody) { function setIdToHideHandle() {
return function (event) { return function (event) {
const clickedId = event.target.id.substr(4); // get id of sender from element id 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 () { const controlsInterval = setInterval(function () {
if(!tryToInitControls(controlsInterval)){ if(!tryToInitControls(controlsInterval)){
clearInterval(controlsInterval); clearInterval(controlsInterval);
} }
}, 200) }, 200)
return controlsInterval; return controlsInterval;
@@ -102,13 +98,13 @@ export function createTryToInitInterval() {
* *
* @param message {HTMLElement} * @param message {HTMLElement}
*/ */
function addControlButton(message, chatBody) { function addControlButton(message) {
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 !== "mute_message") {
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(chatBody)); muteBtn.addEventListener("click", setIdToHideHandle());
return true; return true;
} else { } else {
return false; return false;

View File

@@ -10,9 +10,8 @@
/* Position the tooltip text */ /* Position the tooltip text */
position: absolute; position: absolute;
z-index: 1; z-index: 1;
bottom: 125%; bottom: 110%;
left: 50%; margin-left: -53px;
margin-left: -60px;
/* Fade in tooltip */ /* Fade in tooltip */
opacity: 0; opacity: 0;
@@ -38,14 +37,13 @@
} }
.mute_message { .mute_message {
width: 16px; margin-top: .46rem;
height: 16px; margin-left: 4px;
position: relative;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
/*background: url('chrome-extension://__MSG_@@extension_id__/mute.png') !important;*/ width: 12px;
background-repeat: no-repeat; height: 12px;
padding: 6px; background-size: contain !important;
} }
.im-mess--actions { .im-mess--actions {

View File

@@ -2,27 +2,22 @@ import {getChatBody} from "../utils/getChatBody";
export function addNewMessageEventListener() { export function addNewMessageEventListener() {
const chatBody = getChatBody(); const chatBody = getChatBody();
chrome.storage.sync.get('idsToHide', function(data) { chatBody.addEventListener('DOMNodeInserted', function(event) {
let idsToHide = data.idsToHide; newMessageHandler(event.target)
chatBody.addEventListener('DOMNodeInserted', function(event) {
newMessageHandler(event.target, idsToHide)
});
}); });
} }
function newMessageHandler(message) { function newMessageHandler(message) {
if (message.className === 'im-mess-stack _im_mess_stack ') { 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) { chrome.storage.sync.get('isExtensionOn', function(data) {
if (data.isExtensionOn) { let isExtensionOn = data.isExtensionOn;
if (idsToHide.includes(message.dataset.peer)) { chrome.storage.sync.get('idsToHide', function(data) {
message.style.display = "none"; if (isExtensionOn) {
if (data.idsToHide.includes(message.dataset.peer)) {
message.style.display = "none";
}
} }
} });
}); });
} }
} }

43
src/donate.html Normal file
View File

@@ -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>

View File

@@ -77,6 +77,11 @@ input:checked + .slider:before {
padding-bottom: 5px; padding-bottom: 5px;
} }
h3 {
margin-bottom: 0;
padding: .5rem 0 .5rem 0;
}
.idToHide { .idToHide {
padding: 10px; padding: 10px;
box-sizing: border-box; box-sizing: border-box;
@@ -101,3 +106,12 @@ input:checked + .slider:before {
.del_item { .del_item {
cursor: pointer; cursor: pointer;
} }
.donation_btn {
cursor: pointer;
text-align: right;
}
.donation_btn > a {
text-decoration: none;
}

View File

@@ -5,7 +5,7 @@
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<h3 align="center" id="status"></h3> <h3 align="center">Vk Mute</h3>
</div> </div>
<!--<button id="disableButton">Toggle</button>--> <!--<button id="disableButton">Toggle</button>-->
<div style="text-align: center;"> <div style="text-align: center;">
@@ -16,5 +16,8 @@
</div> </div>
<div id="id_list"> <div id="id_list">
</div> </div>
<div class="donation_btn">
<a href="./donate.html" target="_blank">💸</a>
</div>
</body> </body>
</html> </html>

View File

@@ -4,18 +4,14 @@ import './popup.css'
let disableCheckbox = document.getElementById('disableCheckbox'); let disableCheckbox = document.getElementById('disableCheckbox');
let idsToHideElements = document.getElementsByClassName('idToHide'); let idsToHideElements = document.getElementsByClassName('idToHide');
let idList = document.getElementById("id_list"); let idList = document.getElementById("id_list");
let status = document.getElementById('status');
let isExtensionOn; let isExtensionOn;
let idsToHide = []; let idsToHide = [];
let enableText = "Вкл";
let disableText = "Выкл";
function idBtnHTML(id) { function idBtnHTML(id) {
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${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> <span class="del_item" title="Удалить">🗑️</span>
`; `;
element.id = id; element.id = id;
@@ -26,11 +22,6 @@ chrome.storage.sync.get('isExtensionOn', function(data) {
isExtensionOn = data.isExtensionOn; isExtensionOn = data.isExtensionOn;
disableCheckbox.checked = isExtensionOn; disableCheckbox.checked = isExtensionOn;
if (isExtensionOn) {
status.innerHTML = enableText;
} else {
status.innerHTML = disableText;
}
}); });
chrome.storage.sync.get('idsToHide', function(data) { chrome.storage.sync.get('idsToHide', function(data) {
@@ -59,11 +50,6 @@ chrome.storage.sync.get('idsToHide', function(data) {
disableCheckbox.addEventListener('change', (event) => { disableCheckbox.addEventListener('change', (event) => {
isExtensionOn = event.target.checked; isExtensionOn = event.target.checked;
if (event.target.checked) {
status.innerHTML = enableText;
} else {
status.innerHTML = disableText;
}
chrome.storage.sync.set({isExtensionOn}, function() { chrome.storage.sync.set({isExtensionOn}, function() {
console.log('isExtensionOn: '+isExtensionOn); console.log('isExtensionOn: '+isExtensionOn);

View File

@@ -35,6 +35,11 @@ module.exports = {
template: "./src/popup/popup.html", template: "./src/popup/popup.html",
filename: "popup.html", filename: "popup.html",
chunks: ['popup'] chunks: ['popup']
}),
new HtmlWebpackPlugin({
template: "./src/donate.html",
filename: "donate.html",
chunks: ['donate']
})] })]
} }