☰

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.3
// @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
        var toggleButton = document.createElement('button');
        toggleButton.innerText = 'Toggle Width';
        toggleButton.style.position = 'fixed';
        toggleButton.style.top = '10px';
        toggleButton.style.right = '10px';
        toggleButton.style.zIndex = '1000';
        toggleButton.style.color = 'black';
        toggleButton.style.background = '#33FF3380';
        toggleButton.style.borderRadius = '5px';

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

        // Add a click event listener to the button
        toggleButton.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;
                });
            }
        });
    }
})();