☰

StumbleChat Width Toggle

Adds a button to toggle the width of the chat and the size of images on StumbleChat rooms

当前为 2024-07-23 提交的版本，查看 最新版本。

// ==UserScript==
// @name         StumbleChat Width Toggle
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Adds a button to toggle the width of the chat and the size of images on StumbleChat rooms
// @author       You
// @match        https://stumblechat.com/room/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Select the sc-chat element
    var chatElement = document.querySelector('sc-chat');

    // Check if the element exists
    if (chatElement) {
        // Create a button element for box size
        var boxSizeButton = document.createElement('button');
        boxSizeButton.innerText = 'Box Size';
        boxSizeButton.style.position = 'fixed';
        boxSizeButton.style.top = '10px';
        boxSizeButton.style.right = '20px';
        boxSizeButton.style.zIndex = '1000';
        boxSizeButton.style.color = 'black';
        boxSizeButton.style.background = '#33FF3380';
        boxSizeButton.style.borderRadius = '5px';

        // Add the button to the document
        document.body.appendChild(boxSizeButton);

        // Add a click event listener to the box size button
        boxSizeButton.addEventListener('click', function() {
            // Toggle the width of the chat
            if (chatElement.style.width === '2000px') {
                chatElement.style.width = '500px';
            } else {
                chatElement.style.width = '2000px';
                // Set the width and height of images in the message-content class to twice their current size
                var images = document.querySelectorAll('.message-content img');
                images.forEach(function(image) {
                    image.width *= 2;
                    image.height *= 2;
                });
            }
        });

        // Create a button element for font size
        var fontSizeButton = document.createElement('button');
        fontSizeButton.innerText = 'Font Size';
        fontSizeButton.style.position = 'fixed';
        fontSizeButton.style.top = '10px';
        fontSizeButton.style.right = '120px';
        fontSizeButton.style.zIndex = '1000';
        fontSizeButton.style.color = 'black';
        fontSizeButton.style.background = '#33FF3380';
        fontSizeButton.style.borderRadius = '5px';

        // Add the button to the document
        document.body.appendChild(fontSizeButton);

        // Add a click event listener to the font size button
        fontSizeButton.addEventListener('click', function() {
            // Select all elements with the message class
            var messages = document.querySelectorAll('.message');

            // Toggle the font size of the messages
            messages.forEach(function(message) {
                if (message.style.fontSize === '1.5rem') {
                    message.style.fontSize = '1rem';
                } else {
                    message.style.fontSize = '1.5rem';
                }
            });
        });
    }
})();