Refactoring and add build-tools

This commit is contained in:
Matvey Tarasov
2020-04-18 17:27:15 +03:00
parent 708cb72028
commit b0b79e46a6
26 changed files with 7896 additions and 172 deletions

3
.babelrc Normal file
View File

@@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env"]
}

3
.gitignore vendored Normal file
View File

@@ -0,0 +1,3 @@
/node_modules
/.cache
/.idea

View File

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View File

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View File

Before

Width:  |  Height:  |  Size: 5.5 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

View File

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

117
extension/dist/background.js vendored Normal file

File diff suppressed because one or more lines are too long

887
extension/dist/dom.js vendored Normal file

File diff suppressed because one or more lines are too long

21
extension/dist/popup.html vendored Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="header">
<h3 align="center" id="status"></h3>
</div>
<!--<button id="disableButton">Toggle</button>-->
<div style="text-align: center;">
<label class="switch">
<input type="checkbox" id="disableCheckbox">
<span class="slider round"></span>
</label>
</div>
<div class="id_list">
<div id="idToHide"></div>
</div>
<script src="popup.js"></script></body>
</html>

584
extension/dist/popup.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -1,9 +1,9 @@
{
"name": "VK Mute",
"icons": {
"140": "icons/icon140.png",
"128": "icons/icon128.png",
"48": "icons/icon48.png"
"140": "assets/icons/icon140.png",
"128": "assets/icons/icon128.png",
"48": "assets/icons/icon48.png"
},
"version": "1.0",
"description": "Позволяет заглушить нежелаемых собеседников",
@@ -13,26 +13,17 @@
"storage"
],
"background": {
"scripts": ["background.js"],
"scripts": ["dist/background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html"
"default_popup": "dist/popup.html"
},
"manifest_version": 2,
"content_scripts": [
{
"matches": ["https://*.vk.com/*"],
"js": ["main.js"]
},
{
"matches": ["https://*.vk.com/im*"],
"js": ["hide_element.js"]
},
{
"matches": ["https://*.vk.com/im*"],
"js": ["controls.js"],
"css": ["controls.css"]
"js": ["./dist/dom.js"]
}
]
}

View File

@@ -1,37 +0,0 @@
var idToHide;
var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
chatBody.addEventListener('DOMNodeInserted', function(event) {
if (event.target.className === 'im-mess-stack _im_mess_stack ') {
chrome.storage.sync.get('idToHide', function(data) {
idToHide = data.idToHide;
});
chrome.storage.sync.get('isExtensionOn', function(data) {
if (data.isExtensionOn) {
if (event.target.dataset.peer === idToHide) {
event.target.style.display = "none";
}
}
});
}
});
chrome.storage.sync.get('idToHide', function(data) {
idToHide = data.idToHide;
});
// Try to hide until successful. Needed for page refresh.
var hideInterval = setInterval(function () {
var chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
for (var item of chatBody.children) {
if (item.dataset.peer === idToHide) {
if (item.style.display !== "none") {
item.style.display = "none";
} else {
clearInterval(hideInterval);
}
}
}
}, 200);

View File

@@ -1,9 +0,0 @@
const changeUrlDetect = setInterval((function () {
let oldUrl = '';
return function () {
const currentUrl = window.location.href;
if(currentUrl !== oldUrl){
oldUrl = currentUrl;
}
}
})(),100);

5994
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

33
package.json Normal file
View File

@@ -0,0 +1,33 @@
{
"name": "vk-mute",
"version": "1.0.0",
"description": "Заглушить собеседника в беседе в ВК. 🔇",
"main": "src/dom/main.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"watch": "webpack --config webpack.config.js --watch"
},
"repository": {
"type": "git",
"url": "git+https://github.com/anatolykopyl/vk-mute.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/anatolykopyl/vk-mute/issues"
},
"homepage": "https://github.com/anatolykopyl/vk-mute#readme",
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.9.5",
"babel-loader": "^8.1.0",
"css-loader": "^3.5.2",
"html-webpack-plugin": "^4.2.0",
"sass": "^1.26.3",
"style-loader": "^1.1.4",
"webpack": "^4.42.1"
},
"dependencies": {
"webpack-cli": "^3.3.11"
}
}

View File

@@ -3,6 +3,8 @@
* @param id {String}
* @return {HTMLSpanElement}
*/
import {getChatBody} from "../utils/getChatBody";
function muteBtnHTML(id) {
const element = document.createElement('span');
element.setAttribute('class', 'mute_message');
@@ -19,12 +21,11 @@ function muteBtnHTML(id) {
* @param chatBody {HTMLElement}
* @return {function(...[*]=)}
*/
function addControls(chatBody) {
export function addControls(chatBody) {
return function (event) {
console.log(event);
if (event.target.className === 'im-mess--check fl_l') {
const message = event.target.parentElement;
addControlButton(message)
addControlButton(message, chatBody)
}
}
}
@@ -66,21 +67,28 @@ function setIdToHideHandle(chatBody) {
const clickedId = event.target.id.substr(4); // get id of sender from element id
chrome.storage.sync.set({idToHide: clickedId}, function () {
for (let item of chatBody.children) {
if (item.dataset.peer === clickedId) {
item.style.display = "none";
}
}
hideExistingMessages(clickedId);
console.log('idToHide: ' + clickedId);
});
}
}
export function hideExistingMessages(id) {
const chatBody = getChatBody();
for (let item of chatBody.children) {
if (item.dataset.peer === id) {
item.style.display = "none";
}
}
}
// Try to add controls until successful. Needed for page refresh.
function createTryToInitInterval() {
export function createTryToInitInterval() {
const controlsInterval = setInterval(function () {
tryToInitControls(controlsInterval)
if(!tryToInitControls(controlsInterval)){
clearInterval(controlsInterval);
}
}, 200)
return controlsInterval;
}
@@ -88,40 +96,31 @@ function createTryToInitInterval() {
/**
*
* @param message {HTMLElement}
* @param intervalForClean {Number?}
*/
function addControlButton(message, intervalForClean) {
function addControlButton(message, chatBody) {
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));
} else if (intervalForClean) {
clearInterval(intervalForClean)
return true;
} else {
return false;
}
}
/**
* Function hide and mark messages
* @param intervalForClear {Number}
*/
function tryToInitControls(intervalForClear) {
const chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
export function tryToInitControls() {
let status = true;
const chatBody = getChatBody();
if(!chatBody) return false;
for (let item of chatBody.children) {
if (item.className.includes('im-mess-stack _im_mess_stack')) {
let messages = item.children[1].children[1].getElementsByClassName('im-mess im_in _im_mess');
for (let message of messages) {
addControlButton(message, intervalForClear)
status = addControlButton(message, chatBody)
}
}
}
return status;
}
(function init() {
const chatBody = document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
chatBody.addEventListener('DOMNodeInserted', addControls);
createTryToInitInterval();
})();

28
src/dom/hide_element.js Normal file
View File

@@ -0,0 +1,28 @@
import {getChatBody} from "../utils/getChatBody";
export function addNewMessageEventListener() {
const chatBody = getChatBody();
chrome.storage.sync.get('idToHide', function(data) {
let idToHide = data.idToHide;
chatBody.addEventListener('DOMNodeInserted', function(event) {
newMessageHandler(event.target, idToHide)
});
});
}
function newMessageHandler(message, idToHide) {
if (message.className === 'im-mess-stack _im_mess_stack ') {
chrome.storage.sync.get('idToHide', function(data) {
idToHide = data.idToHide;
});
chrome.storage.sync.get('isExtensionOn', function(data) {
if (data.isExtensionOn) {
if (message.dataset.peer === idToHide) {
message.style.display = "none";
}
}
});
}
}

20
src/dom/main.js Normal file
View File

@@ -0,0 +1,20 @@
import './dom.css'
import {createTryToInitInterval, hideExistingMessages, tryToInitControls} from "./controls";
import {UrlController} from "../utils/Url";
import {addNewMessageEventListener} from "./hide_element";
function init() {
const url = new UrlController();
url.onChange((oldUrl, newUrl) => {
// chrome.storage.sync.get('idToHide', function (data) {
// let idToHide = data.idToHide;
// hideExistingMessages(idToHide)
// });
if (tryToInitControls()) {
createTryToInitInterval();
addNewMessageEventListener();
}
})
}
init();

View File

@@ -2,7 +2,6 @@
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="popup.css">
</head>
<body>
<div class="header">
@@ -18,6 +17,5 @@
<div class="id_list">
<div id="idToHide"></div>
</div>
<script src="popup.js"></script>
</body>
</html>

View File

@@ -1,3 +1,5 @@
import './popup.css'
//let disableButton = document.getElementById('disableButton');
let disableCheckbox = document.getElementById('disableCheckbox');
let idToHideDisplay = document.getElementById('idToHide');
@@ -32,7 +34,7 @@ disableCheckbox.addEventListener('change', (event) => {
status.innerHTML = disableText;
}
chrome.storage.sync.set({isExtensionOn: isExtensionOn}, function() {
chrome.storage.sync.set({isExtensionOn}, function() {
console.log('isExtensionOn: '+isExtensionOn);
});
});

47
src/utils/Url.js Normal file
View File

@@ -0,0 +1,47 @@
const INTERVAL_TIME = 100;
export class UrlController {
constructor() {
this._changeListeners = [];
this._interval = null;
this._url = window.location.href;
}
onChange(cb) {
this._changeListeners.push(cb);
if (this._interval === null) {
this._createInterval();
}
}
removeEventListener(cb) {
this._changeListeners = this._changeListeners.filter(item=>item !== cb);
if(this._changeListeners.length === 0) {
this._clearInterval();
}
}
_intervalTick() {
const currentUrl = window.location.href;
if (currentUrl !== this.url) {
this._broadcast(this.url, currentUrl);
this.url = currentUrl;
}
}
_broadcast(oldUrl, newUrl) {
this._changeListeners.forEach(cb => cb(oldUrl, newUrl));
}
_createInterval() {
this.interval = setInterval(() => this._intervalTick(), INTERVAL_TIME)
}
_clearInterval() {
clearInterval(this.interval)
this.interval = null
}
}

3
src/utils/getChatBody.js Normal file
View File

@@ -0,0 +1,3 @@
export function getChatBody() {
return document.getElementsByClassName("_im_peer_history im-page-chat-contain")[0];
}

40
webpack.config.js Normal file
View File

@@ -0,0 +1,40 @@
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: {
dom: './src/dom/main.js',
background: './src/background/background.js',
popup: './src/popup/popup.js'
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'extension/dist')
},
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}
]
},
plugins: [new HtmlWebpackPlugin({
template: "./src/popup/popup.html",
filename: "popup.html",
chunks: ['popup']
})]
}