☰

MPP Image Support

Удаляет элементы чата с [img="url"] и заменяет их на <img> для Multiplayer Piano.

目前为 2025-01-11 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         MPP Image Support
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.0
  5. // @license      MIT
  6. // @description  Удаляет элементы чата с [img="url"] и заменяет их на <img> для Multiplayer Piano.
  7. // @author       gtnntg
  8. // @match        https://multiplayerpiano.net/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Функция для проверки, является ли ссылка изображением
  16.     function isImageUrl(url) {
  17.         const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
  18.         return imageExtensions.some(ext => url.toLowerCase().endsWith(ext));
  19.     }
  20.  
  21.     // Функция для обработки сообщений
  22.     function processMessages() {
  23.         // Находим все элементы <li>, которые еще не обработаны
  24.         const messages = document.querySelectorAll('li:not([data-processed="true"])');
  25.  
  26.         messages.forEach(message => {
  27.             const textElement = message.querySelector('.message');
  28.             if (!textElement) return; // Если текстового элемента нет, пропускаем
  29.  
  30.             const content = textElement.textContent; // Получаем текст сообщения
  31.  
  32.             // Проверяем, содержит ли текст тег [img="url"]
  33.             const imgTagRegex = /\[img="(.*?)"\]/;
  34.             const match = content.match(imgTagRegex);
  35.  
  36.             if (match) {
  37.                 const url = match[1]; // Получаем URL из тега
  38.                 if (isImageUrl(url)) {
  39.                     // Создаем контейнер для изображения
  40.                     const imgContainer = document.createElement('div');
  41.                     imgContainer.style.marginTop = '10px';
  42.  
  43.                     // Создаем элемент <img>
  44.                     const imgElement = document.createElement('img');
  45.                     imgElement.src = url;
  46.                     imgElement.alt = "Image";
  47.                     imgElement.style.maxWidth = "300px";
  48.                     imgElement.style.maxHeight = "300px";
  49.                     imgElement.style.display = "block";
  50.  
  51.                     // Добавляем изображение в контейнер
  52.                     imgContainer.appendChild(imgElement);
  53.  
  54.                     // Удаляем оригинальное текстовое сообщение
  55.                     textElement.remove();
  56.  
  57.                     // Добавляем изображение в сообщение (в начало)
  58.                     message.appendChild(imgContainer);
  59.  
  60.                     // Перемещаем контейнер с изображением в конец <li>
  61.                     message.appendChild(imgContainer);
  62.                 }
  63.             }
  64.  
  65.             // Помечаем сообщение как обработанное
  66.             message.setAttribute('data-processed', 'true');
  67.         });
  68.     }
  69.  
  70.     // Автоматическая обработка новых сообщений
  71.     const observer = new MutationObserver(() => {
  72.         processMessages(); // Запускаем обработку при добавлении новых сообщений
  73.     });
  74.  
  75.     // Наблюдаем за изменениями в основном контейнере чата
  76.     const chatContainer = document.querySelector('#chat'); // Укажи ID или класс контейнера чата
  77.     if (chatContainer) {
  78.         observer.observe(chatContainer, { childList: true, subtree: true });
  79.         console.log("Tampermonkey скрипт для корректного размещения изображений активирован.");
  80.     }
  81. })();