Twitch emoji blocking via a channel with a management interface and context menu (via Tampermonkey)
目前為
// ==UserScript==
// @name Control Emotes Panel 2.6.2| (C) tapeavion
// @version 2.6.2
// @description Twitch emoji blocking via a channel with a management interface and context menu (via Tampermonkey)
// @author Gullampis810
// @license MIT
// @match https://www.twitch.tv/*
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @icon https://raw.githubusercontent.com/sopernik566/icons/refs/heads/main/7BTVEmotesPanel256.ico
// @namespace http://tampermonkey.net/
// ==/UserScript==
(function () {
'use strict';
let blockedEmotes = [];
let blockedChannels = [];
// Функция для безопасного получения и парсинга данных
function loadData(key, defaultValue) {
const rawData = GM_getValue(key, defaultValue);
try {
return typeof rawData === 'string' ? JSON.parse(rawData) : rawData;
} catch (e) {
console.error(`Ошибка при парсинге ${key}:`, e);
return defaultValue; // Возвращаем значение по умолчанию в случае ошибки
}
}
// Загружаем данные при старте
blockedEmotes = loadData("blockedEmotes", []);
blockedChannels = loadData("blockedChannels", []);
console.log("[DEBUG] Загружены blockedEmotes:", blockedEmotes);
console.log("[DEBUG] Загружены blockedChannels:", blockedChannels);
let isPanelOpen = GM_getValue('isPanelOpen', false);
//=== Функция для перемещения панели ===//
function makePanelDraggable(panel) {
let offsetX = 0, offsetY = 0, isDragging = false;
// Создаем заголовок, за который можно перетаскивать
const dragHandle = document.createElement('div');
dragHandle.style.width = '100%';
dragHandle.style.height = '625px';
dragHandle.style.background = 'rgba(0, 0, 0, 0.0)';
dragHandle.style.cursor = 'grab';
dragHandle.style.position = 'absolute';
dragHandle.style.top = '0';
dragHandle.style.left = '0';
dragHandle.style.zIndex = '-1';
dragHandle.style.borderRadius = '8px 8px 0 0';
panel.appendChild(dragHandle);
// Начало перемещения
dragHandle.addEventListener('mousedown', (e) => {
isDragging = true;
offsetX = e.clientX - panel.getBoundingClientRect().left;
offsetY = e.clientY - panel.getBoundingClientRect().top;
dragHandle.style.cursor = 'grabbing';
});
// Перемещение панели
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
panel.style.left = `${e.clientX - offsetX}px`;
panel.style.top = `${e.clientY - offsetY}px`;
});
// Остановка перемещения
document.addEventListener('mouseup', () => {
isDragging = false;
dragHandle.style.cursor = 'grab';
});
}
//===================================== Панель управления =======================================//
const controlPanel = document.createElement('div');
controlPanel.style.position = 'fixed'; // Фиксируем панель на экране
controlPanel.style.bottom = '124px'; // Располагаем панель на 124px от нижней границы экрана
controlPanel.style.right = '380px'; // Располагаем панель на 310px от правой границы экрана
controlPanel.style.width = '690px'; // Ширина панели
controlPanel.style.height = '625px'; // Высота панели
controlPanel.style.backgroundColor = '#5c5065'; // Цвет фона панели
controlPanel.style.background = '-webkit-linear-gradient(270deg, hsla(50, 76%, 56%, 1) 0%, hsla(32, 83%, 49%, 1) 25%, hsla(0, 37%, 37%, 1) 59%, hsla(276, 47%, 24%, 1) 79%, hsla(261, 11%, 53%, 1) 100%)'; // Применяем градиентный фон
controlPanel.style.border = '1px solid #ccc'; // Цвет и стиль границы панели
controlPanel.style.borderRadius = '8px'; // Скругляем углы панели
controlPanel.style.padding = '10px'; // Отступы внутри панели
controlPanel.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)'; // Добавляем тень панели
controlPanel.style.zIndex = 10000; // Устанавливаем высокий z-index, чтобы панель была поверх других элементов
controlPanel.style.fontFamily = 'Arial, sans-serif'; // Шрифт текста на панели
controlPanel.style.transition = 'height 0.3s ease'; // Плавное изменение высоты при изменении
controlPanel.style.overflow = 'hidden'; // Скрытие содержимого, если оно выходит за пределы панели
// Добавляем панель в DOM и активируем перетаскивание
document.body.appendChild(controlPanel);
makePanelDraggable(controlPanel);
//---------------Текст с Названием листа список ------------------------//
const title = document.createElement('h4');
title.innerText = 'list of BlockedEmotes v.2.6.2';
title.style.margin = '-5px 0px 10px'; // Обновленный стиль margin
title.style.color = '#2a1e38'; // Обновленный цвет
title.style.position = 'relative'; // Устанавливаем позицию относительно
title.style.top = '-51px'; // Сдвиг по вертикали
controlPanel.appendChild(title);
//--------------- Список заблокированных каналов ------------------//
const list = document.createElement('ul');
list.id = 'blockedList';
list.style.border = '1px solid #ffffff'; // Белая граница
list.style.borderRadius = '0px 0px 8px 8px'; // Скругление углов
list.style.boxShadow = 'rgb(0 0 0 / 67%) -18px 69px 40px 0 inset'; // Вставка тени в контейнер
list.style.listStyle = 'none'; // Убираем стандартные маркеры списка
list.style.padding = '0'; // Убираем отступы
list.style.margin = '-14px 0px 10px'; // Отступ снизу
list.style.maxHeight = '400px'; // Устанавливаем максимальную высоту
list.style.height = '400px'; // Высота списка
list.style.overflowY = 'auto'; // Включаем вертикальную прокрутку
//==================================== ГРАДИЕНТ ФОН СПИСОК =================================================//
// Добавляем линейный градиент фона с кроссбраузерностью
list.style.background = 'linear-gradient(45deg, hsla(292, 44%, 16%, 1) 0%, hsla(173, 29%, 48%, 1) 100%)';
list.style.background = '-moz-linear-gradient(45deg, hsla(292, 44%, 16%, 1) 0%, hsla(173, 29%, 48%, 1) 100%)'; // Для Firefox
list.style.background = '-webkit-linear-gradient(45deg, hsla(292, 44%, 16%, 1) 0%, hsla(173, 29%, 48%, 1) 100%)'; // Для Safari и Chrome
list.style.filter = 'progid: DXImageTransform.Microsoft.gradient(startColorstr="#36173b", endColorstr="#589F97", GradientType=1)'; // Для старых версий IE
list.style.color = '#fff'; // Белый цвет текста
//========== кастомный scroll bar для списка =============//
const style = document.createElement('style');
style.innerHTML = `
#blockedList::-webkit-scrollbar {
width: 25px; /* Ширина скроллбара */
}
#blockedList::-webkit-scrollbar-thumb {
background-color: #C1A5EF; /* Цвет бегунка */
border-radius: 8px; /* Скругление бегунка */
border: 3px solid #4F3E6A; /* Внутренний отступ (цвет трека) */
height: 80px; /* Высота бегунка */
}
#blockedList::-webkit-scrollbar-thumb:hover {
background-color: #C6AEFF; /* Цвет бегунка при наведении */
}
#blockedList::-webkit-scrollbar-thumb:active {
background-color: #B097C9; /* Цвет бегунка при активном состоянии */
}
#blockedList::-webkit-scrollbar-track {
background: #455565; /* Цвет трека */
border-radius: 0px 0px 8px 0px; /* Скругление только нижнего правого угла */
}
#blockedList::-webkit-scrollbar-track:hover {
background-color: #455565; /* Цвет трека при наведении */
}
#blockedList::-webkit-scrollbar-track:active {
background-color: #455565; /* Цвет трека при активном состоянии */
}
`;
document.head.appendChild(style);
// hover blocked-item элемент списка //
const hoverStyle = document.createElement('style');
hoverStyle.innerHTML = `
.blocked-item {
transition: background-color 0.3s ease, color 0.3s ease ;
}
.blocked-item:hover {
background-color:rgba(214, 56, 56, 0.52) ;
color: #42d13a ;
}
.blocked-item:hover span { // text подсветка названия смайла и платформы //
color: #42d13a ;
}
.blocked-item:hover button {
background:rgb(99, 37, 37);
}
.new-item {
background-color:rgba(40, 168, 40, 0.68); /* Зеленый фон для нового элемента */
transition: background-color 0.3s ease;
}
.new-item:hover {
background-color: #3a2252; /* Ховер-эффект перекрывает зеленый фон */
color: #af7fcf;
}
.new-item:hover span {
color: #af7fcf;
}
.new-item:hover button {
background: #552a2a;
}
`;
document.head.appendChild(hoverStyle);
document.head.appendChild(style);
const buttonColor = '#907cad'; // Общий цвет для кнопок
const buttonShadow = '0 4px 8px rgba(0, 0, 0, 0.6)'; // Тень для кнопок (60% прозрачности)
// Функция для обновления списка заблокированных каналов
// Переменные для хранения ID заблокированных элементов
let blockedEmoteIDs = new Set();
let blockedChannelIDs = new Set();
let newlyAddedIds = new Set();
function updateBlockedList() {
list.innerHTML = '';
// Очистка и обновление Set для быстрого поиска ID
blockedEmoteIDs.clear();
blockedChannelIDs.clear();
function createListItem(channel, isNew = false) {
const item = document.createElement('li');
item.className = 'blocked-item';
item.dataset.id = channel.id; // Уникальный ID для списка
if (isNew) {
item.classList.add('new-item');
setTimeout(() => {
item.classList.remove('new-item'); // Убираем подсветку через 25 секунд
}, 1800000); // 1800000 миллисекунд = 30 минут
}
item.style.display = 'flex';
item.style.flexDirection = 'column';
item.style.padding = '5px';
item.style.borderBottom = '1px solid #eee';
const topRow = document.createElement('div');
topRow.style.display = 'flex';
topRow.style.justifyContent = 'space-between';
topRow.style.alignItems = 'center';
const channelName = document.createElement('span');
if (channel.platform === 'TwitchChannel') {
channelName.innerText = `${channel.platform} > name emote: ${channel.emoteName}`; // Полное название
} else {
channelName.innerText = `${channel.platform} > ${channel.emoteName}`;
}
channelName.style.flex = '1';
channelName.style.fontSize = '14px';
channelName.style.fontWeight = 'bold';
channelName.style.whiteSpace = 'nowrap';
channelName.style.overflow = 'hidden';
channelName.style.textOverflow = 'ellipsis';
topRow.appendChild(channelName);
const dateInfo = document.createElement('span');
const date = new Date(channel.date);
dateInfo.innerText = isNaN(date.getTime())
? 'Unknown Date'
: date.toLocaleString('en-GB', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' });
dateInfo.style.marginRight = '30px';
dateInfo.style.fontSize = '14px';
dateInfo.style.color = '#ffffff';
topRow.appendChild(dateInfo);
const removeButton = document.createElement('button');
removeButton.innerText = 'Delete';
removeButton.style.background = '#ff4d4d';
removeButton.style.color = '#fff';
removeButton.style.height = '35px';
removeButton.style.width = '75px';
removeButton.style.fontWeight = 'bold';
removeButton.style.fontSize = '16px';
removeButton.style.border = 'none';
removeButton.style.borderRadius = '4px';
removeButton.style.cursor = 'pointer';
removeButton.style.boxShadow = buttonShadow;
removeButton.style.display = 'flex';
removeButton.style.alignItems = 'center';
removeButton.style.justifyContent = 'center';
removeButton.onmouseover = function () {
removeButton.style.background = '-webkit-linear-gradient(135deg, hsla(359, 91%, 65%, 1) 0%, hsla(358, 76%, 16%, 1) 56%, hsla(359, 61%, 19%, 1) 98%, hsla(0, 100%, 65%, 1) 100%)';
};
removeButton.onmouseout = function () {
removeButton.style.background = '#ff4d4d';
};
removeButton.onclick = function () {
if (channel.platform === 'TwitchChannel') {
blockedChannels = blockedChannels.filter(c => c.id !== channel.id);
blockedChannelIDs.delete(channel.id);
GM_setValue("blockedChannels", JSON.stringify(blockedChannels, null, 2));
} else {
blockedEmotes = blockedEmotes.filter(c => c.id !== channel.id);
blockedEmoteIDs.delete(channel.id);
GM_setValue("blockedEmotes", JSON.stringify(blockedEmotes, null, 2));
}
newlyAddedIds.delete(channel.id);
updateBlockedList();
updateCounter();
showEmoteForChannel(channel); // Передаем объект channel
};
topRow.appendChild(removeButton);
item.appendChild(topRow);
const channelLink = document.createElement('span');
channelLink.innerText = `(prefix: ${channel.name})`; // Префикс
channelLink.style.fontSize = '14px';
channelLink.style.color = '#ffffff';
channelLink.style.wordBreak = 'break-word';
channelLink.style.marginTop = '1px';
item.appendChild(channelLink);
return item;
}
// Заполняем списки и обновляем Set
blockedChannels.forEach(channel => {
blockedChannelIDs.add(channel.id);
const isNew = newlyAddedIds.has(channel.id) && Array.from(newlyAddedIds).pop() === channel.id;
list.appendChild(createListItem(channel, isNew));
});
blockedEmotes.forEach(channel => {
blockedEmoteIDs.add(channel.id);
const isNew = newlyAddedIds.has(channel.id) && Array.from(newlyAddedIds).pop() === channel.id;
list.appendChild(createListItem(channel, isNew));
});
// Прокручиваем к последнему добавленному элементу
if (newlyAddedIds.size > 0) {
const lastAddedId = Array.from(newlyAddedIds).pop();
const newItem = list.querySelector(`[data-id="${lastAddedId}"]`);
if (newItem) {
newItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
// Очищаем список новых ID после отображения
newlyAddedIds.clear();
}
// Добавляем список в панель управления
controlPanel.appendChild(list);
//================= Функционал для добавления нового канала в список заблокированных ==================//
const inputContainer = document.createElement('div');
inputContainer.style.display = 'flex';
inputContainer.style.gap = '5px';
const input = document.createElement('input');
input.type = 'text';
input.placeholder = 'type to add channel ';
input.style.background = '#192427';
input.style.color = '#b69dcf';
input.style.flex = '1';
input.style.fontWeight = 'bold'; // Жирный текст
input.style.height = '35px'; // Отступ между кнопкой и поисковой строкой
input.style.padding = '5px';
input.style.border = '1px solid #b69dcf';
input.style.borderRadius = '4px';
input.style.marginTop = '15px'; // Отступ между кнопкой и поисковой строкой
// Добавление тени с фиолетовым цветом (35% прозрачности) внутрь
input.style.boxShadow = '#4c2a5e 0px 4px 6px inset'; // Тень фиолетового цвета внутри
//================== Add it Button =====================//
// ==================== Кнопка добавления ===================== //
const addButton = document.createElement('button');
addButton.innerText = 'Add it';
addButton.style.background = buttonColor;
addButton.style.marginTop = '15px'; // Отступ между кнопкой и поисковой строкой
addButton.style.color = '#fff';
addButton.style.border = 'none';
addButton.style.width = '72px';
addButton.style.borderRadius = '4px';
addButton.style.padding = '5px 10px';
addButton.style.cursor = 'pointer';
addButton.style.boxShadow = buttonShadow; // Тень для кнопки "Add it"
// Увеличиваем размер текста и делаем его жирным
addButton.style.fontSize = '16px'; // Увеличиваем размер текста
addButton.style.fontWeight = 'bold'; // Жирный текст
// Генерация уникального ID
function generateID() {
return `emote_${Date.now()}`; // Генерация ID на основе времени
}
addButton.onclick = (event) => {
event.preventDefault();
const channel = input.value.trim();
const platform = platformSelect.value;
if (channel) {
let emoteName = channel;
let emoteUrl = channel;
const emoteId = generateRandomID();
// Проверка на дублирование
const isDuplicate = platform === 'TwitchChannel'
? blockedChannels.some(e => e.name === channel && e.platform === platform)
: blockedEmotes.some(e => e.emoteUrl === channel && e.platform === platform);
if (isDuplicate) {
console.log(`%c[DEBUG] %cChannel/Emote already blocked: ${channel}`,
'color: rgb(255, 165, 0); font-weight: bold;',
'color: rgb(255, 165, 0);');
return;
}
if (platform === '7tv' || platform === 'bttTV' || platform === 'ffz') {
const img = document.querySelector(`img[src="${channel}"]`);
if (img) {
emoteName = img.alt || channel.split('/').pop();
emoteUrl = img.src || channel;
}
const newEmote = {
id: emoteId,
name: emoteUrl,
platform: platform,
emoteName: emoteName,
emoteUrl: emoteUrl,
date: new Date().toISOString()
};
blockedEmotes.push(newEmote);
blockedEmoteIDs.add(emoteId);
newlyAddedIds.add(emoteId);
GM_setValue("blockedEmotes", JSON.stringify(blockedEmotes, null, 2));
console.log(`%c[DEBUG] %cAdded to blockedEmotes:`,
'color: rgb(0, 255, 0); font-weight: bold;',
'color: rgb(0, 255, 0);', newEmote);
} else if (platform === 'TwitchChannel') {
const prefix = channel.split(/[^a-zA-Z0-9]/)[0];
emoteUrl = prefix;
const newChannel = {
id: emoteId,
name: emoteUrl,
platform: platform,
emoteName: emoteName,
emoteUrl: emoteUrl,
date: new Date().toISOString()
};
blockedChannels.push(newChannel);
blockedChannelIDs.add(emoteId);
newlyAddedIds.add(emoteId);
GM_setValue("blockedChannels", JSON.stringify(blockedChannels, null, 2));
console.log(`%c[DEBUG] %cAdded to blockedChannels:`,
'color: rgb(0, 255, 0); font-weight: bold;',
'color: rgb(0, 255, 0);', newChannel);
}
const chatContainer = document.querySelector('.chat-scrollable-area__message-container');
if (chatContainer) {
toggleEmotesInNode(chatContainer);
}
updateBlockedList();
updateCounter();
input.value = '';
}
};
// ==================== Создание выпадающего списка платформ ===================== //
const platformSelect = document.createElement('select');
platformSelect.style.marginTop = '15px'; // Отступ между кнопкой и поисковой строкой
platformSelect.style.height = '35px'; // Высота выпадающего списка
platformSelect.style.border = '1px solid #c1a5ef';
platformSelect.style.background = '#192427';
platformSelect.style.borderRadius = '4px';
platformSelect.style.padding = '5px';
platformSelect.style.fontWeight = 'bold'; // Жирный текст
platformSelect.style.color = ' #b69dcf';
const platforms = ['TwitchChannel', '7tv', 'bttTV', 'ffz'];
platforms.forEach(platform => {
const option = document.createElement('option');
option.value = platform;
option.innerText = platform;
platformSelect.appendChild(option);
});
// ==================== Подсказки для выбора платформы ===================== //
platformSelect.addEventListener('change', () => {
const placeholderText = {
'TwitchChannel': 'insert channel prefix',
'7tv': 'please put here link: https://cdn.7tv.app/emote/00000000000000000000000000/2x.webp',
'bttTV': 'please put here link: https://cdn.betterttv.net/emote/000000000000000000000000/2x.webp',
'ffz': 'please put here link: https://cdn.frankerfacez.com/emote/0000/2'
};
input.placeholder = placeholderText[platformSelect.value];
});
// ==================== Добавление выпадающего списка в контейнер ===================== //
inputContainer.appendChild(platformSelect);
//----------------Единый контейнер для кнопок -------------------------//
const buttonContainer = document.createElement('div');
buttonContainer.style.display = 'flex'; // Используем flexbox для расположения кнопок в строку
buttonContainer.style.gap = '6px'; // Задаем промежуток между кнопками
buttonContainer.style.marginTop = '12px'; // Отступ сверху для контейнера кнопок
buttonContainer.style.fontWeight = 'bold'; // Жирный текст для контейнера кнопок
buttonContainer.style.fontSize = '16px'; // Размер шрифта для кнопок
buttonContainer.style.width = '190%'; // Ширина кнопок (увеличена для эффекта растяжения
//-------------- Кнопка "Delete all" ------------------------//
const clearAllButton = document.createElement('button');
clearAllButton.innerText = 'Delete all'; // Текст на кнопке
clearAllButton.style.background = buttonColor; // Цвет фона кнопки
clearAllButton.style.color = '#fff'; // Цвет текста кнопки
clearAllButton.style.border = 'none'; // Убираем бордер у кнопки
clearAllButton.style.borderRadius = '4px'; // Скругленные углы кнопки
clearAllButton.style.padding = '5px 10px'; // Отступы внутри кнопки
clearAllButton.style.cursor = 'pointer'; // Курсор в виде руки при наведении
clearAllButton.style.boxShadow = buttonShadow; // Тень для кнопки "Delete all"
buttonContainer.appendChild(clearAllButton); // Добавляем кнопку в контейнер
// Обработчик события для кнопки "Delete all"
clearAllButton.onclick = () => {
blockedEmotes = [];
blockedChannels = [];
GM_setValue("blockedEmotes", JSON.stringify(blockedEmotes, null, 2));
GM_setValue("blockedChannels", JSON.stringify(blockedChannels, null, 2));
console.log("[DEBUG] Очищены blockedEmotes и blockedChannels");
updateBlockedList();
updateCounter();
};
//----------------- export Button --------------------//
const exportButton = document.createElement('button');
exportButton.innerText = 'Export';
exportButton.style.background = buttonColor;
exportButton.style.color = '#fff';
exportButton.style.border = 'none';
exportButton.style.borderRadius = '4px';
exportButton.style.padding = '5px 10px';
exportButton.style.cursor = 'pointer';
exportButton.style.boxShadow = buttonShadow; // Тень для кнопки "Export"
buttonContainer.appendChild(exportButton);
exportButton.onclick = () => {
const combinedData = {
blockedEmotes: blockedEmotes,
blockedChannels: blockedChannels
};
const blob = new Blob([JSON.stringify(combinedData, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = 'blocked_data.json';
link.click();
URL.revokeObjectURL(url);
console.log("[DEBUG] Экспортированы данные:", combinedData);
};
//================= importButton ========================//
// Перемещаем создание fileInput в глобальную область, чтобы избежать дублирования
let fileInput = null;
// Функция для создания кнопки "Import"
function createImportButton() {
const button = document.createElement('button');
button.innerText = 'Import';
button.style.background = buttonColor;
button.style.color = '#fff';
button.style.border = 'none';
button.style.borderRadius = '4px';
button.style.padding = '5px 10px';
button.style.cursor = 'pointer';
button.style.boxShadow = buttonShadow;
return button;
}
// Функция для создания или переиспользования элемента input типа "file"
function createFileInput() {
if (!fileInput) {
fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.accept = 'application/json';
fileInput.style.display = 'none';
fileInput.onchange = handleFileChange;
document.body.appendChild(fileInput);
}
return fileInput;
}
// Инициализация кнопки "Import"
const importButton = createImportButton();
buttonContainer.appendChild(importButton);
importButton.onclick = () => {
const input = createFileInput();
input.value = ''; // Сбрасываем значение для повторного выбора файла
input.click();
};
// Обработка изменений файла
function handleFileChange(event) {
const file = event.target.files[0];
if (!file) {
console.log("[DEBUG] Файл не выбран");
return;
}
const reader = new FileReader();
reader.onload = handleFileLoad;
reader.onerror = () => {
console.error("[DEBUG] Ошибка чтения файла");
alert('Ошибка при чтении файла!');
};
reader.readAsText(file);
}
// Обработка загрузки файла
function handleFileLoad(event) {
try {
const importedData = JSON.parse(event.target.result);
if (!importedData || (!importedData.blockedEmotes && !importedData.blockedChannels)) {
throw new Error('Неверный формат файла! Ожидается объект с blockedEmotes и/или blockedChannels');
}
processImportedData(importedData);
updateInterface();
console.log("[DEBUG] Импорт успешно завершен");
} catch (err) {
console.error('[DEBUG] Ошибка при парсинге файла:', err);
alert(`Ошибка импорта: ${err.message}`);
}
}
// Обработка импортированных данных
function processImportedData(importedData) {
blockedEmotes = [];
blockedChannels = [];
blockedEmoteIDs.clear();
blockedChannelIDs.clear();
newlyAddedIds.clear();
if (Array.isArray(importedData.blockedEmotes)) {
importedData.blockedEmotes.forEach(emote => {
const newId = emote.id && !blockedEmoteIDs.has(emote.id) && !blockedChannelIDs.has(emote.id)
? emote.id
: generateRandomID();
const newEmote = {
id: newId,
name: emote.name || emote.emoteUrl || '',
platform: emote.platform || 'unknown',
emoteName: emote.emoteName || getDefaultEmoteName(emote),
emoteUrl: emote.emoteUrl || emote.name || '',
date: emote.date || new Date().toISOString()
};
blockedEmotes.push(newEmote);
blockedEmoteIDs.add(newId);
newlyAddedIds.add(newId);
});
}
if (Array.isArray(importedData.blockedChannels)) {
importedData.blockedChannels.forEach(channel => {
const newId = channel.id && !blockedChannelIDs.has(channel.id) && !blockedEmoteIDs.has(channel.id)
? channel.id
: generateRandomID();
const newChannel = {
id: newId,
name: channel.name || channel.emoteUrl || '',
platform: channel.platform || 'TwitchChannel',
emoteName: channel.emoteName || getDefaultEmoteName(channel),
emoteUrl: channel.emoteUrl || channel.name || '',
date: channel.date || new Date().toISOString()
};
blockedChannels.push(newChannel);
blockedChannelIDs.add(newId);
newlyAddedIds.add(newId);
});
}
GM_setValue("blockedEmotes", JSON.stringify(blockedEmotes, null, 2));
GM_setValue("blockedChannels", JSON.stringify(blockedChannels, null, 2));
console.log("[DEBUG] Импортированы blockedEmotes:", blockedEmotes);
console.log("[DEBUG] Импортированы blockedChannels:", blockedChannels);
}
// Функция обновления интерфейса
function updateInterface() {
blockedEmotes = loadData("blockedEmotes", []);
blockedChannels = loadData("blockedChannels", []);
blockedEmoteIDs.clear();
blockedChannelIDs.clear();
blockedEmotes.forEach(emote => blockedEmoteIDs.add(emote.id));
blockedChannels.forEach(channel => blockedChannelIDs.add(channel.id));
updateBlockedList();
updateCounter();
const chatContainer = document.querySelector('.chat-scrollable-area__message-container');
if (chatContainer) {
toggleEmotesInNode(chatContainer); // Используем toggleEmotesInNode вместо hideEmotesForChannel
} else {
console.log(
"%c[DEBUG]%c Контейнер чата не найден при обновлении интерфейса",
'color:rgb(218, 93, 9); font-weight: bold;',
'color: rgb(218, 93, 9);'
);
}
}
// Функция скрытия эмодзи в чате
function hideEmotesForChannel(chatContainer) {
console.log("[DEBUG] Запуск hideEmotesForChannel");
const emotes = chatContainer.querySelectorAll('.chat-line__message img, .chat-line__message .emote, .chat-line__message .bttv-emote, .chat-line__message .seventv-emote');
emotes.forEach(emote => {
const emoteUrl = emote.src || '';
const emoteAlt = emote.getAttribute('alt') || '';
let blockedEntry = null;
// Проверяем, заблокирован ли эмодзи
if (emoteUrl.includes('7tv.app')) {
blockedEntry = blockedEmotes.find(e => e.platform === '7tv' && e.emoteUrl === emoteUrl);
} else if (emoteUrl.includes('betterttv.net')) {
blockedEntry = blockedEmotes.find(e => e.platform === 'bttTV' && e.emoteUrl === emoteUrl);
} else if (emoteAlt) {
blockedEntry = blockedChannels.find(e => e.platform === 'TwitchChannel' && emoteAlt.startsWith(e.name));
}
// Устанавливаем data-emote-id, если эмодзи заблокирован
if (blockedEntry && !emote.getAttribute('data-emote-id')) {
emote.setAttribute('data-emote-id', blockedEntry.id);
}
const emoteId = emote.getAttribute('data-emote-id');
const isBlocked = emoteId && (blockedChannels.some(e => e.id === emoteId) || blockedEmotes.some(e => e.id === emoteId));
// Скрываем или показываем эмодзи
emote.style.display = isBlocked ? 'none' : '';
console.log(`[DEBUG] Эмодзи ${emoteAlt || emoteUrl} (ID: ${emoteId || 'не установлен'}) ${isBlocked ? 'скрыт' : 'показан'}`);
});
}
// Функция получения имени эмотикона по умолчанию
function getDefaultEmoteName(channel) {
if (channel.platform === '7tv' || channel.platform === 'bttTV') {
return channel.name.split('/').slice(-2, -1)[0] || 'No Name';
} else if (channel.platform === 'ffz') {
return channel.emoteName || channel.name.split('/').pop() || 'No Name';
} else if (channel.platform === 'TwitchChannel') {
return channel.name.split(/[^a-zA-Z0-9]/)[0] || 'No Name';
} else {
return 'No Name';
}
}
// Добавляем кнопку "Unblock All Emotes" в контейнер кнопок
const unblockAllButton = document.createElement('button');
unblockAllButton.innerText = 'Unblock All Emotes';
unblockAllButton.style.background = buttonColor;
unblockAllButton.style.color = '#fff';
unblockAllButton.style.border = 'none';
unblockAllButton.style.borderRadius = '4px';
unblockAllButton.style.padding = '5px 10px';
unblockAllButton.style.cursor = 'pointer';
unblockAllButton.style.boxShadow = buttonShadow; // Тень для кнопки "Unblock All Emotes"
buttonContainer.appendChild(unblockAllButton);
// Добавляем кнопку "Back To Block All Emotes" в контейнер кнопок
const blockAllButton = document.createElement('button');
blockAllButton.innerText = 'Back To Block All Emotes';
blockAllButton.style.background = buttonColor;
blockAllButton.style.color = '#fff';
blockAllButton.style.border = 'none';
blockAllButton.style.borderRadius = '4px';
blockAllButton.style.padding = '5px 10px';
blockAllButton.style.cursor = 'pointer';
blockAllButton.style.boxShadow = buttonShadow; // Тень для кнопки "Back To Block All Emotes"
buttonContainer.appendChild(blockAllButton);
// Обработчик события для кнопки "Unblock All Emotes"
unblockAllButton.onclick = () => {
const unblockedEmotes = GM_getValue('unblockedEmotes', []);
const unblockedChannels = GM_getValue('unblockedChannels', []);
if (blockedEmotes.length > 0 || blockedChannels.length > 0) {
GM_setValue('unblockedEmotes', blockedEmotes);
GM_setValue('unblockedChannels', blockedChannels);
blockedEmotes = [];
blockedChannels = [];
GM_setValue('blockedEmotes', JSON.stringify(blockedEmotes, null, 2)); // Исправлено
GM_setValue('blockedChannels', JSON.stringify(blockedChannels, null, 2)); // Исправлено
console.log("[DEBUG] Разблокированы все: unblockedEmotes:", blockedEmotes, "unblockedChannels:", blockedChannels);
updateBlockedList();
updateCounter();
showAllEmotes();
}
};
// Функция для отображения всех смайлов в чате
function showAllEmotes() {
const chatContainer = document.querySelector('.chat-scrollable-area__message-container');
if (chatContainer) {
const emotes = chatContainer.querySelectorAll('.chat-line__message img, .chat-line__message .emote, .chat-line__message .bttv-emote, .chat-line__message .seventv-emote');
emotes.forEach(emote => {
emote.style.display = ''; // Сбросить стиль display для отображения смайлов
});
}
}
// Обработчик события для кнопки "Back To Block All Emotes"
blockAllButton.onclick = () => {
const unblockedEmotes = GM_getValue('unblockedEmotes', []);
const unblockedChannels = GM_getValue('unblockedChannels', []);
if (unblockedEmotes.length > 0 || unblockedChannels.length > 0) {
blockedEmotes = unblockedEmotes;
blockedChannels = unblockedChannels;
GM_setValue('blockedEmotes', JSON.stringify(blockedEmotes));
GM_setValue('blockedChannels', JSON.stringify(blockedChannels));
GM_setValue('unblockedEmotes', []);
GM_setValue('unblockedChannels', []);
console.log("[DEBUG] Заблокированы все обратно: blockedEmotes:", blockedEmotes, "blockedChannels:", blockedChannels);
// Обновляем список и счетчик
updateBlockedList();
updateCounter();
// Применяем скрытие эмодзи в чате
const chatContainer = document.querySelector('.chat-scrollable-area__message-container');
if (chatContainer) {
toggleEmotesInNode(chatContainer);
console.log("[DEBUG] Применено скрытие эмодзи после восстановления блокировки");
} else {
console.log(
"%c[DEBUG]%c Контейнер чата не найден при восстановлении блокировки",
'color:rgb(218, 93, 9); font-weight: bold;',
'color: rgb(218, 93, 9);'
);
}
}
};
//======================= Счётчик ========================//
const counter = document.createElement('div');
counter.style.display = 'inline-block';
counter.style.backgroundColor = '#b69dcf'; // Белый фон
counter.style.color = '#4c2a5e'; // Цвет текста (темно-фиолетовый)
counter.style.border = '3px solid #4c2a5e'; // Граница того же цвета, что и текст
counter.style.borderRadius = '8px'; // Радиус скругления границы
counter.style.padding = '6px 12px'; // Отступы для удобства
counter.style.marginLeft = '6px'; // Отступ слева для отделения от других элементов
counter.style.fontWeight = 'bold'; // Жирное начертание текста
counter.style.fontSize = '16px'; // Устанавливаем размер шрифта для лучшей видимости
counter.style.top = '2%'; // Обновленное положение сверху
counter.style.right = '2%'; // Обновленное положение справа
counter.style.position = 'absolute '; // Относительное позиционирование для точного расположения
buttonContainer.appendChild(counter);
// Функция для обновления счётчика
function updateCounter() {
const twitchCount = blockedChannels.length;
const bttvCount = blockedEmotes.filter(channel => channel.platform === 'bttTV').length;
const tv7Count = blockedEmotes.filter(channel => channel.platform === '7tv').length;
const ffzCount = blockedEmotes.filter(channel => channel.platform === 'ffz').length;
const totalCount = twitchCount + bttvCount + tv7Count + ffzCount;
counter.innerText = `Twitch: ${twitchCount} | BTTV: ${bttvCount} | 7TV: ${tv7Count} | FFZ: ${ffzCount} | Total: ${totalCount}`;
}
// Добавляем элементы на страницу
inputContainer.appendChild(input);
inputContainer.appendChild(addButton);
controlPanel.appendChild(inputContainer);
// Перемещаем контейнер кнопок вниз
controlPanel.appendChild(buttonContainer);
document.body.appendChild(controlPanel);
// Вызываем функцию обновления счётчика
updateCounter();
// Загружаем сохранённое состояние переключателя из хранилища
//============= Создаем кнопку "Open Blocker Emote" ===================//
const openPanelButton = document.createElement('button');
openPanelButton.innerText = 'Open Blocker Emote';
openPanelButton.style.fontWeight = 'bold';
openPanelButton.style.top = '22px';
openPanelButton.style.right = '1344px';
openPanelButton.style.position = 'fixed'; // Фиксированное положение
openPanelButton.style.width = '200px'; // Фиксированная ширина кнопки
openPanelButton.style.height = '41px'; // Фиксированная высота кнопки
openPanelButton.style.background = '#4c2a5e'; // Цвет кнопки
openPanelButton.style.color = '#bda3d7';
openPanelButton.style.border = 'none'; // Без границ
openPanelButton.style.borderRadius = '20px'; // Закругленные углы
openPanelButton.style.padding = '10px';
openPanelButton.style.cursor = 'pointer';
openPanelButton.style.zIndex = 10000; // Высокий z-index
openPanelButton.style.transition = 'background 0.3s ease'; // Плавное изменение фона
openPanelButton.style.display = 'flex';
openPanelButton.style.alignItems = 'center';
openPanelButton.style.justifyContent = 'space-between'; // Чтобы текст и переключатель были по разным краям
// Создаем контейнер для переключателя (темная рамка)
const switchContainer = document.createElement('div');
switchContainer.style.width = '44px'; // Увеличиваем ширину контейнера на 6px
switchContainer.style.height = '27px'; // Увеличиваем высоту контейнера на 6px
switchContainer.style.borderRadius = '13px'; // Скругленные углы
switchContainer.style.backgroundColor = '#ccb8eb5c'; // Темно-зелёная рамка для кружка
switchContainer.style.position = 'relative'; // Для абсолютного позиционирования кружка
switchContainer.style.transition = 'background 0.3s ease'; // Плавное изменение фона контейнера
openPanelButton.appendChild(switchContainer);
// Создаем фиолетовый кружок (переключатель)
const switchCircle = document.createElement('div');
switchCircle.style.width = '19px'; // Увеличиваем ширину кружка на 3px
switchCircle.style.height = '19px'; // Увеличиваем высоту кружка на 3px
switchCircle.style.borderRadius = '50%'; // Кружок
switchCircle.style.backgroundColor = '#4c2a5e'; // Фиолетовый цвет кружка
switchCircle.style.boxShadow = '0 2px 6px rgba(0, 0, 0, 0.8)'; // Тень для кружка
switchCircle.style.position = 'absolute'; // Абсолютное позиционирование внутри контейнера
switchCircle.style.top = '3px'; // Отступ сверху
switchCircle.style.left = '3px'; // Отступ слева
switchCircle.style.transition = 'transform 0.3s ease'; // Плавное движение
switchContainer.appendChild(switchCircle);
// Функция для обновления состояния переключателя
const updateSwitchState = () => {
if (isPanelOpen) {
openPanelButton.style.background = '#4c2a5e'; // Цвет кнопки при открытой панели
switchCircle.style.transform = 'translateX(20px)'; // Перемещаем кружок вправо
switchContainer.style.backgroundColor = '#bda3d7'; // Цвет контейнера в включённом состоянии
controlPanel.style.display = 'block'; // Показываем панель
controlPanel.style.height = '625px'; // Устанавливаем полную высоту
} else {
openPanelButton.style.background = '#4c2a5e'; // Цвет кнопки при закрытой панели
switchCircle.style.transform = 'translateX(0)'; // Перемещаем кружок влево
switchContainer.style.backgroundColor = '#ccb8eb5c'; // Цвет контейнера в выключенном состоянии
controlPanel.style.display = 'none'; // Скрываем панель
controlPanel.style.height = '0px'; // Сворачиваем панель
}
};
// Обработчик клика для переключения состояния панели
openPanelButton.onclick = () => {
isPanelOpen = !isPanelOpen; // Переключаем состояние
GM_setValue('isPanelOpen', isPanelOpen); // Сохраняем состояние
updateSwitchState(); // Обновляем видимость и переключатель
};
// Инициализация состояния при загрузке
window.addEventListener('load', () => {
document.body.appendChild(openPanelButton);
updateSwitchState(); // Устанавливаем начальное состояние панели и переключателя
const updateButtonPosition = () => {
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
openPanelButton.style.top = `${windowHeight * 0.005}px`; // 5% от высоты окна
openPanelButton.style.right = `${windowWidth * 0.2}px`; // 20% от ширины окна
};
updateButtonPosition();
window.addEventListener('resize', updateButtonPosition);
});
//=============== Запуск скрытия эмодзи в заблокированном списке ==================//
//=============== Генерация случайного ID ===============//
function generateRandomID() {
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const randomLength = Math.floor(Math.random() * 67) + 1; // Случайная длина от 1 до 68
let randomID = '';
for (let i = 0; i < randomLength; i++) {
randomID += characters.charAt(Math.floor(Math.random() * characters.length));
}
return `emote_${randomID}`;
}
// Дебаунс-функция
function debounce(func, wait) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
// Оптимизированная версия toggleEmotesInNode
const debouncedToggleEmotes = debounce(toggleEmotesInNode, 100);
function toggleEmotesInNode(node) {
try {
console.log(`%c[${new Date().toISOString()}] %c[DEBUG] %ctoggleEmotesInNode - starting`,
'color: rgb(63, 136, 219);',
'color: rgb(52, 163, 148); font-weight: bold;',
'color: rgb(38, 104, 95);');
const emotes = node.querySelectorAll('.chat-line__message img, .chat-line__message .emote, .chat-line__message .bttv-emote, .chat-line__message .seventv-emote, .chat-line__message--emote.ffz-emote');
emotes.forEach(emote => {
const emoteUrl = emote.src || emote.getAttribute('srcset')?.split(' ')[0] || '';
const emoteAlt = emote.getAttribute('alt') || '';
const dataProvider = emote.getAttribute('data-provider') || '';
let blockedEntry = null;
if (emoteUrl.includes('7tv.app')) {
blockedEntry = blockedEmotes.find(e => e.platform === '7tv' && e.emoteUrl === emoteUrl);
} else if (emoteUrl.includes('betterttv.net')) {
blockedEntry = blockedEmotes.find(e => e.platform === 'bttTV' && e.emoteUrl === emoteUrl);
} else if (emoteUrl.includes('frankerfacez.com')) {
blockedEntry = blockedEmotes.find(e => e.platform === 'ffz' && e.emoteUrl === emoteUrl);
} else if (emoteAlt && dataProvider === 'ffz') {
blockedEntry = blockedEmotes.find(e => e.platform === 'ffz' && e.emoteName === emoteAlt);
} else if (emoteAlt) {
blockedEntry = blockedChannels.find(e => e.platform === 'TwitchChannel' && emoteAlt.startsWith(e.name));
}
if (blockedEntry && !emote.getAttribute('data-emote-id')) {
emote.setAttribute('data-emote-id', blockedEntry.id);
}
const emoteId = emote.getAttribute('data-emote-id');
const isBlocked = emoteId && (blockedChannels.some(e => e.id === emoteId) || blockedEmotes.some(e => e.id === emoteId));
emote.style.display = isBlocked ? 'none' : '';
console.log(`%c[DEBUG] %cEmote ${emoteAlt || emoteUrl} (ID: ${emoteId || 'not set'}) ${isBlocked ? 'hidden' : 'visible'}, Platform: ${blockedEntry ? blockedEntry.platform : 'unknown'}`,
'color: rgb(35, 177, 202); font-weight: bold;',
'color: rgb(202, 145, 255);');
});
console.log(`%c[${new Date().toISOString()}] %c[DEBUG] %ctoggleEmotesInNode - completed`,
'color: rgb(58, 206, 144);',
'color: rgb(81, 112, 252); font-weight: bold;',
'color: rgb(56, 144, 185);');
} catch (error) {
console.error('[ERROR] Ошибка в toggleEmotesInNode:', error);
}
}
// Используем дебаунс в наблюдателе
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
mutation.addedNodes.forEach(node => {
if (node.nodeType === 1) {
console.log(`%cНовый узел добавлен в DOM`,
'color:rgb(29, 202, 136) ;');
debouncedToggleEmotes(node);
}
});
});
});
function observeChatContainer() {
const chatContainer = document.querySelector('.chat-scrollable-area__message-container');
if (chatContainer) {
// Успешно - зеленый цвет
console.log(
'%c[DEBUG]%c Контейнер чата найден, начинаем наблюдение',
'color: #00C4B4; font-weight: bold;', // Стиль для [DEBUG]
'color: #00C4B4;' // Стиль для остального текста
);
observer.disconnect(); // Останавливаем старое наблюдение
observer.observe(chatContainer, { childList: true, subtree: true });
toggleEmotesInNode(chatContainer); // Проверяем существующие сообщения
} else {
// Неуспешно - красный цвет
console.log(
'%c[DEBUG]%c Контейнер чата не найден, повторная попытка через 500мс',
'color: #FF5555; font-weight: bold;', // Стиль для [DEBUG]
'color: #FF5555;' // Стиль для остального текста
);
setTimeout(observeChatContainer, 500);
}
}
// Добавляем наблюдение за изменениями на более высоком уровне DOM
function startRootObserver() {
const rootObserver = new MutationObserver(() => {
const chatContainer = document.querySelector('.chat-scrollable-area__message-container');
// Состояние контейнера чата - зеленый если найден, красный если не найден
console.log(
'%c[DEBUG]%c RootObserver: контейнер чата %c' + (chatContainer ? 'найден' : 'не найден'),
'color: #1E90FF; font-weight: bold;', // Стиль для [DEBUG] (DodgerBlue)
'color: #1E90FF;', // Стиль для "RootObserver: контейнер чата"
`color: ${chatContainer ? '#00C4B4' : '#FF5555'}; font-weight: bold;` // Зеленый (#00C4B4) или красный (#FF5555) для статуса
);
if (chatContainer) {
observeChatContainer();
}
});
rootObserver.observe(document.body, { childList: true, subtree: true });
// Запуск RootObserver - синий цвет (информационный)
console.log(
'%c[DEBUG]%c RootObserver запущен',
'color: #1E90FF; font-weight: bold;', // Стиль для [DEBUG] (DodgerBlue)
'color: #1E90FF;' // Стиль для остального текста
);
}
// Запускаем наблюдение
startRootObserver();
let lastUrl = location.href;
function checkUrlChange() {
const currentUrl = location.href;
if (currentUrl !== lastUrl) {
console.log('[DEBUG] URL изменился, перезапускаем наблюдение за чатом');
ContextMenuManager.removeMenu(); // Удаляем контекстное меню
lastUrl = currentUrl;
observeChatContainer();
}
setTimeout(checkUrlChange, 1000);
}
checkUrlChange();
//=============== Контекстное меню ===============//
const contextMenuStyle = document.createElement('style');
contextMenuStyle.innerHTML = `
.custom-context-menu {
position: absolute;
background: #4c2a5e;
border: 1px solid #ccc;
padding: 5px;
z-index: 10002; /* Увеличен z-index для отображения поверх других элементов */
cursor: pointer;
color: #fff;
transition: background 0.3s ease;
user-select: none;
min-width: 150px; /* Минимальная ширина для читаемости */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Тень для выделения */
}
.custom-context-menu:hover {
background: #5a3a75;
}
`;
document.head.appendChild(contextMenuStyle);
const ContextMenuManager = {
menu: null,
isProcessing: false, // Флаг для предотвращения многократных нажатий
createMenu(event, emotePrefix, platform, emoteName) {
this.removeMenu();
const menu = document.createElement('div');
menu.className = 'custom-context-menu';
menu.style.top = `${event.pageY}px`;
menu.style.left = `${event.pageX}px`;
menu.innerText = `Block Emote (${emoteName || 'Unknown'})`;
console.log(`%c[${new Date().toISOString()}] %c[DEBUG] %cContext menu created at:`,
'color: rgb(85, 113, 165);',
'color: rgb(85, 113, 165); font-weight: bold;',
'color: rgb(85, 113, 165);', event.pageX, event.pageY);
document.body.appendChild(menu);
this.menu = menu;
menu.addEventListener('click', (e) => {
e.stopPropagation();
if (this.isProcessing) return; // Пропускаем, если обработка уже идет
this.isProcessing = true;
console.log(`%c[${new Date().toISOString()}] %c[DEBUG] %cBlocking emote: ${emoteName}`,
'color: rgb(209, 89, 129);',
'color: rgb(255, 50, 50); font-weight: bold;',
'color: rgb(209, 89, 129);');
this.blockEmote(emotePrefix, platform, emoteName);
this.removeMenu();
this.isProcessing = false;
});
document.addEventListener('click', (e) => {
if (!menu.contains(e.target)) this.removeMenu();
}, { once: true });
},
removeMenu() {
if (this.menu) {
console.log(`%c[${new Date().toISOString()}] %c[DEBUG] %cRemoving context menu`,
'color: rgb(209, 89, 129);',
'color: rgb(115, 2, 160); font-weight: bold;',
'color: white;');
this.menu.remove();
this.menu = null;
}
},
blockEmote(emotePrefix, platform, emoteName) {
const emoteId = generateRandomID();
const currentDateTime = new Date().toISOString();
const newEntry = {
id: emoteId,
name: emotePrefix, // Префикс (например, "guwu")
platform: platform,
emoteName: emoteName || emotePrefix.split('/').pop() || 'Unknown', // Полное название (например, "guwuPopcorn")
emoteUrl: platform === 'TwitchChannel' ? emotePrefix : emotePrefix, // Для Twitch используем префикс как URL
date: currentDateTime
};
const isDuplicate = platform === 'TwitchChannel'
? blockedChannels.some(e => e.name === newEntry.name && e.platform === newEntry.platform)
: blockedEmotes.some(e => e.emoteUrl === newEntry.emoteUrl && e.platform === newEntry.platform);
if (isDuplicate) {
console.log(`%c[DEBUG] %cEmote already blocked: ${newEntry.emoteName}`,
'color: rgb(255, 165, 0); font-weight: bold;',
'color: rgb(255, 165, 0);');
return;
}
if (platform === 'TwitchChannel') {
blockedChannels.push(newEntry);
blockedChannelIDs.add(emoteId);
newlyAddedIds.add(emoteId);
GM_setValue("blockedChannels", JSON.stringify(blockedChannels, null, 2));
console.log(`%c[DEBUG] %cAdded to blockedChannels:`,
'color: rgb(0, 255, 0); font-weight: bold;',
'color: rgb(0, 255, 0);', newEntry);
} else {
blockedEmotes.push(newEntry);
blockedEmoteIDs.add(emoteId);
newlyAddedIds.add(emoteId);
GM_setValue("blockedEmotes", JSON.stringify(blockedEmotes, null, 2));
console.log(`%c[DEBUG] %cAdded to blockedEmotes:`,
'color: rgb(0, 255, 0); font-weight: bold;',
'color: rgb(0, 255, 0);', newEntry);
}
const chatContainer = document.querySelector('.chat-scrollable-area__message-container');
if (chatContainer) {
toggleEmotesInNode(chatContainer);
}
updateBlockedList();
updateCounter();
}
};
//=============== Обработчик контекстного меню ===============//
document.addEventListener('contextmenu', (event) => {
const target = event.target;
if (target.tagName === 'IMG' && target.closest('.chat-line__message')) {
event.preventDefault();
const emoteUrl = target.src || target.getAttribute('srcset')?.split(' ')[0] || '';
const emoteAlt = target.getAttribute('alt') || '';
const dataProvider = target.getAttribute('data-provider') || '';
let emotePrefix = '';
let platform = '';
let emoteName = emoteAlt;
console.log(`[${new Date().toISOString()}] [DEBUG] Context menu triggered for:`, emoteUrl, emoteAlt, 'data-provider:', dataProvider);
// Определяем платформу с учетом data-provider и URL
if (dataProvider === 'bttv' && emoteUrl.includes('betterttv.net')) {
emotePrefix = emoteUrl || `https://cdn.betterttv.net/emote/${target.getAttribute('data-id')}/2x.webp`;
platform = 'bttTV';
console.log("[DEBUG] Detected bttv emote (via data-provider):", emotePrefix);
} else if (dataProvider === 'ffz' && emoteUrl.includes('frankerfacez.com')) {
emotePrefix = emoteUrl || `https://cdn.frankerfacez.com/emote/${target.getAttribute('data-id')}/2`;
platform = 'ffz';
emoteName = emoteAlt;
console.log("[DEBUG] Detected ffz emote (via data-provider):", emotePrefix);
} else if (dataProvider === 'ffz' && emoteUrl.includes('7tv.app')) {
emotePrefix = emoteUrl || `https://cdn.7tv.app/emote/${target.getAttribute('data-id')}/2x.webp`;
platform = '7tv';
console.log("[DEBUG] Detected 7tv emote (via data-provider):", emotePrefix);
} else if (emoteUrl.includes('betterttv.net')) {
emotePrefix = emoteUrl;
platform = 'bttTV';
console.log("[DEBUG] Detected bttv emote (via URL):", emoteUrl);
} else if (emoteUrl.includes('7tv.app')) {
emotePrefix = emoteUrl;
platform = '7tv';
console.log("[DEBUG] Detected 7tv emote (via URL):", emoteUrl);
} else if (emoteUrl.includes('frankerfacez.com')) {
emotePrefix = emoteUrl;
platform = 'ffz';
emoteName = emoteAlt;
console.log("[DEBUG] Detected ffz emote (via URL):", emoteUrl);
} else if (emoteAlt) {
// Извлекаем префикс для TwitchChannel
// Предполагаем, что префикс — это часть до первой заглавной буквы после букв нижнего регистра
const match = emoteAlt.match(/^([a-z]+)([A-Z].*)$/);
if (match) {
emotePrefix = match[1]; // Например, "guwu" из "guwuPopcorn"
emoteName = emoteAlt; // Полное название, например "guwuPopcorn"
} else {
// Если не удалось разделить, используем полное название как префикс
emotePrefix = emoteAlt.split(/[^a-zA-Z0-9]/)[0] || emoteAlt;
emoteName = emoteAlt;
}
platform = 'TwitchChannel';
console.log("[DEBUG] Detected TwitchChannel emote:", emoteAlt, "prefix:", emotePrefix);
}
if (emotePrefix && platform) {
console.log(`[DEBUG] Creating context menu for emote with prefix: ${emotePrefix}, platform: ${platform}`);
ContextMenuManager.createMenu(event, emotePrefix, platform, emoteName);
} else {
console.log("[DEBUG] Could not determine platform or prefix, using fallback TwitchChannel");
ContextMenuManager.createMenu(event, emoteAlt || emoteUrl, 'TwitchChannel', emoteAlt || 'Unknown');
}
}
});
//=============== Запуск ===============//
observeChatContainer();
//====================== Управление высотой панели =======================
function closePanel() {
isPanelOpen = false;
GM_setValue('isPanelOpen', isPanelOpen);
controlPanel.style.height = '0px'; // Плавно уменьшаем высоту
setTimeout(() => {
if (!isPanelOpen) controlPanel.style.display = 'none'; // Полностью скрываем после завершения анимации
}, 150); // Таймер соответствует времени анимации
}
//----------------- Анимация сворачивания панели-------------------------
function openPanel() {
isPanelOpen = true;
GM_setValue('isPanelOpen', isPanelOpen);
controlPanel.style.display = 'block'; // Делаем панель видимой
setTimeout(() => {
controlPanel.style.height = '625px'; // Плавно увеличиваем высоту
}, 0); // Устанавливаем высоту с задержкой для работы анимации
}
//========================== Переключение состояния панели Управления 'openPanelButton' ===============================
openPanelButton.onclick = () => {
isPanelOpen = !isPanelOpen; // Переключаем состояние панели (открыта/закрыта)
GM_setValue('isPanelOpen', isPanelOpen);
// Перемещаем переключатель (круглый элемент), когда панель открывается или закрывается
switchCircle.style.transform = isPanelOpen ? 'translateX(20px)' : 'translateX(0)';
// Меняем цвет фона контейнера в зависимости от состояния панели
switchContainer.style.backgroundColor = isPanelOpen ? '#bda3d7' : '#ccb8eb5c';
// Переключаем видимость панели: открываем или закрываем
if (isPanelOpen) {
openPanel(); // Вызов функции для открытия панели
} else {
closePanel(); // Вызов функции для закрытия панели
}
};
// Инициализация состояния
updateSwitchState(); // Убедимся, что переключатель синхронизирован с начальным состоянием
updateBlockedList();
updateCounter();
//============== Минипанель с кнопками сортировки по категориям =================//
const sortContainer = document.createElement('div');
sortContainer.style.display = 'flex';
sortContainer.style.justifyContent = 'space-between';
sortContainer.style.backgroundColor = 'rgb(89 51 114)';
sortContainer.style.padding = '5px';
sortContainer.style.marginBottom = '37px';
sortContainer.style.position = 'relative';
sortContainer.style.top = '57px';
sortContainer.style.borderRadius = '8px 8px 0 0'; // Закругление только верхних углов
sortContainer.style.border = '1px solid rgb(255, 255, 255)';
sortContainer.style.boxShadow = 'rgb(0 0 0 / 0%) 0px 15px 6px 0px'; // Использование RGBA для прозрачности
sortContainer.style.zIndex = 'inherit'; // Наследует z-index от родителя
// Определение начальных значений для currentSortOrder
let currentSortOrder = {
name: 'asc',
platform: 'asc',
date: 'asc'
};
// Кнопки сортировки
const sortByNameButton = document.createElement('button');
sortByNameButton.innerHTML = 'Name ▲';
sortByNameButton.style.cursor = 'pointer';
sortByNameButton.style.position = 'relative';
sortByNameButton.style.left = '13%';
sortByNameButton.onclick = () => {
const order = currentSortOrder.name === 'asc' ? 'desc' : 'asc';
currentSortOrder.name = order;
sortByNameButton.innerHTML = `Name ${order === 'asc' ? '▲' : '▼'}`; // Переключение стрелочки
sortblockedEmotes('name', order);
};
sortContainer.appendChild(sortByNameButton);
const sortByPlatformButton = document.createElement('button');
sortByPlatformButton.innerHTML = 'Platform ▲';
sortByPlatformButton.style.cursor = 'pointer';
sortByPlatformButton.style.position = 'relative';
sortByPlatformButton.style.right = '45%';
sortByPlatformButton.onclick = () => {
const order = currentSortOrder.platform === 'asc' ? 'desc' : 'asc';
currentSortOrder.platform = order;
sortByPlatformButton.innerHTML = `Platform ${order === 'asc' ? '▲' : '▼'}`;
sortblockedEmotes('platform', order);
};
sortContainer.appendChild(sortByPlatformButton);
const sortByDateButton = document.createElement('button');
sortByDateButton.innerHTML = 'Date ▲';
sortByDateButton.style.cursor = 'pointer';
sortByDateButton.style.top = '0px';
sortByDateButton.style.position = 'relative';
sortByDateButton.style.right = '21%';
sortByDateButton.onclick = () => {
const order = currentSortOrder.date === 'asc' ? 'desc' : 'asc';
currentSortOrder.date = order;
sortByDateButton.innerHTML = `Date ${order === 'asc' ? '▲' : '▼'}`;
sortblockedEmotes('date', order);
};
sortContainer.appendChild(sortByDateButton);
// Добавляем контейнер сортировки в панель управления
controlPanel.insertBefore(sortContainer, title);
//============== Функция для сортировки списка =================//
function sortblockedEmotes(criteria, order) {
const sortFunc = (a, b) => {
let comparison = 0;
if (criteria === 'name') {
comparison = a.emoteName.localeCompare(b.emoteName);
} else if (criteria === 'platform') {
comparison = a.platform.localeCompare(b.platform);
} else if (criteria === 'date') {
comparison = new Date(a.date) - new Date(b.date);
}
return order === 'asc' ? comparison : -comparison;
};
// Сортируем оба массива
blockedEmotes.sort(sortFunc);
blockedChannels.sort(sortFunc);
// Обновляем интерфейс после сортировки
updateBlockedList();
}
//============== Обработчики событий для кнопок =================//
const buttons = [addButton, clearAllButton, exportButton, importButton, unblockAllButton, blockAllButton];
buttons.forEach(button => {
button.onmouseover = function() {
button.style.background = '-webkit-linear-gradient(135deg, #443157 0%,rgb(90, 69, 122) 56%, #443157 98%, #443157 100%)'; // Изменение фона при наведении
};
button.onmouseout = function() {
button.style.background = buttonColor; // Возвращаем исходный цвет
};
});
console.log(getComputedStyle(controlPanel).display);
console.log("[DEBUG] Opening control panel...");
console.log("[DEBUG] Creating control panel...");
console.log("[DEBUG] Adding button...");
console.log("[DEBUG] Updating channel list...");
console.log("[DEBUG] Creating file input element...");
// Удаляем некорректные логи с event, так как они не в контексте события
console.log("[DEBUG] Processing imported channels...");
console.log("[DEBUG] Updating interface...");
console.log("[DEBUG] Showing all emotes in chat...");
console.log("[DEBUG] Blocking all emotes...");
console.log("[DEBUG] Hiding emotes for a channel...");
console.log(`%c[DEBUG] %cWaiting for chat container...`,
'color:rgb(255, 114, 173); font-weight: bold;', // Стиль для [DEBUG]
'color: rgb(255, 114, 173) ;'); // Стиль для остального текста
console.log("[DEBUG] Creating context menu...");
// Добавляем переменные для отслеживания состояния
let lastKnownBlockedCount = blockedEmotes.length + blockedChannels.length;
let lastCheckTime = Date.now();
let isRestarting = false;
// Функция проверки состояния блокировки
function checkBlockingStatus() {
console.log(`%c[WATCHDOG] %cПроверка состояния блокировки...`,
'color:rgb(221, 101, 175); font-weight: bold;',
'color: rgb(164, 207, 44) ;');
const chatContainer = document.querySelector('.chat-scrollable-area__message-container');
if (!chatContainer) {
console.log(
"%c[WATCHDOG]%c Контейнер чата не найден, перезапускаем наблюдение",
'color:rgb(172, 147, 223); font-weight: bold;',
'color: rgb(164, 207, 44) ;');
observeChatContainer(); // Перезапускаем наблюдение
return false;
}
const emotes = chatContainer.querySelectorAll('.chat-line__message img, .chat-line__message .emote, .chat-line__message .bttv-emote, .chat-line__message .seventv-emote');
if (emotes.length === 0) {
console.log("[WATCHDOG] Эмодзи в чате не найдены, пропускаем проверку");
return true;
}
let failureDetected = false;
emotes.forEach((emote, index) => {
if (index > 5) return;
const emoteId = emote.getAttribute('data-emote-id');
const shouldBeBlocked = emoteId && (blockedChannels.some(e => e.id === emoteId) || blockedEmotes.some(e => e.id === emoteId));
const isVisible = emote.style.display !== 'none';
if (shouldBeBlocked && isVisible) {
console.log(`[WATCHDOG] Обнаружен сбой: эмодзи с ID ${emoteId} должен быть скрыт, но виден!`);
failureDetected = true;
} else if (!shouldBeBlocked && !isVisible) {
console.log(`[WATCHDOG] Обнаружен сбой: эмодзи с ID ${emoteId} не должен быть скрыт, но скрыт!`);
failureDetected = true;
}
});
const currentBlockedCount = blockedEmotes.length + blockedChannels.length;
if (currentBlockedCount !== lastKnownBlockedCount) {
console.log(
`%c[WATCHDOG] %cКоличество заблокированных элементов изменилось: %c${lastKnownBlockedCount} -> ${currentBlockedCount}`,
'color: rgb(221, 101, 175); font-weight: bold;',
'color: rgb(164, 207, 44);',
'color: rgb(255, 165, 0); font-weight: bold;'
);
lastKnownBlockedCount = currentBlockedCount;
}
return !failureDetected;
}
function showNotification(message, duration = 3000) {
const notification = document.createElement('div');
notification.innerText = message;
notification.style.position = 'relative';
notification.style.bottom = '12%';
notification.style.maxWidth = '543px';
notification.style.left = '19%';
notification.style.backgroundColor = ' #4c2a5e';
notification.style.color = ' #fff ';
notification.style.padding = '10px';
notification.style.borderRadius = '5px';
notification.style.boxShadow = ' 1px 1px 7px 4px rgb(0, 0, 0) ';
notification.style.zIndex = '10001';
document.body.appendChild(notification);
setTimeout(() => {
notification.remove();
}, duration);
}
// Функция перезапуска логики блокировки
function restartBlockingLogic() {
if (isRestarting) return;
isRestarting = true;
// Перезапуск логики - оранжевый цвет (в процессе)
console.log(
'%c[WATCHDOG]%c Перезапуск логики блокировки...',
'color: #FF4500; font-weight: bold;', // Стиль для [WATCHDOG] (OrangeRed)
'color: #FF4500;' // Стиль для остального текста
);
showNotification("Lock failure detected, restart... - Обнаружен сбой блокировки, перезапуск...", 3000);
observer.disconnect();
const chatContainer = document.querySelector('.chat-scrollable-area__message-container');
if (chatContainer) {
const emotes = chatContainer.querySelectorAll('.chat-line__message img, .chat-line__message .emote, .chat-line__message .bttv-emote, .chat-line__message .seventv-emote');
emotes.forEach(emote => {
emote.style.display = '';
emote.removeAttribute('data-emote-id');
});
observeChatContainer();
toggleEmotesInNode(chatContainer);
} else {
observeChatContainer();
}
updateBlockedList();
updateCounter();
setTimeout(() => {
isRestarting = false;
// Перезапуск завершен - зеленый цвет (успех)
console.log(
'%c[WATCHDOG]%c Перезапуск завершен',
'color: #00C4B4; font-weight: bold;', // Стиль для [WATCHDOG] (Teal)
'color: #00C4B4;' // Стиль для остального текста
);
}, 1000); // Задержка для предотвращения спама
}
// Периодическая проверка состояния (watchdog)
function startWatchdog() {
setInterval(() => {
const currentTime = Date.now();
if (currentTime - lastCheckTime < 5000) return; // Проверяем не чаще, чем раз в 5 секунд
lastCheckTime = currentTime;
const isWorking = checkBlockingStatus();
if (!isWorking) {
// Обнаружен сбой - желтый цвет (предупреждение)
console.log(
'%c[WATCHDOG]%c Обнаружен сбой в работе блокировки, выполняется перезапуск...',
'color: #FFA500; font-weight: bold;', // Стиль для [WATCHDOG] (Orange)
'color: #FFA500;' // Стиль для остального текста
);
restartBlockingLogic();
} else {
console.log(`%c[WATCHDOG] %cБлокировка работает корректно!`,
'color:rgb(6, 167, 0); font-weight: bold;',
'color: rgb(164, 207, 44) ;');
}
}, 10000); // Проверяем каждые 10 секунд
}
// Запускаем watchdog
startWatchdog();
})();