如何用Tampermonkey移除sploop.io中所有<p class="description">标签及底部边框

生效逻辑说明 #

sploop.io的帽子菜单属于用户交互后才动态生成的DOM元素，页面初始加载时对应元素尚未渲染，因此直接在脚本加载阶段执行样式修改无法命中目标元素。以下脚本加入了元素监听逻辑，待菜单渲染后自动执行样式调整。

完整可运行代码 #

// ==UserScript==
// @name         Sploop.io Better Hat Menu
// @version      0.2
// @description  优化帽子菜单显示，隐藏描述和底部边框
// @author       s
// @match        https://sploop.io/
// @icon         none
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 原有全局隐藏元素逻辑
    document.getElementById('da-left')?.style = "display:none;"
    document.getElementById('da-right')?.style = "display:none;"
    document.getElementById('bottom-content')?.style = "display:none;"
    document.getElementById('alsoTryLink')?.style = "display:none;"
    document.getElementById('cross-promo')?.style = "display:none;"
    document.getElementById('google_play')?.style = "display:none;"
    document.getElementById('iogames')?.style = "display:none;"

    // 帽子菜单样式调整逻辑
    const adjustHatMenu = () => {
        const hatMenu = document.getElementById("hat-menu");
        const hatMenuContent = document.getElementById("hat_menu_content");
        if (hatMenu && hatMenuContent) {
            // 原有菜单样式修改
            hatMenu.style = "display: flex; opacity: 1; height: 320px; width: 400px; box-shadow: 0px 0px; border: 0px solid; border-radius: 0px; box-sizing: border-box; background: rgba(40, 45, 34, 0.3);";
            hatMenuContent.style = "width: 400px; background: rgb(20 20 20 / 0%); box-shadow: inset 0 5px 0 rgb(20 20 20 / 0%); margin: 20px 0 0px 0; border: 0px solid #141414";
            // 隐藏所有描述段落
            document.querySelectorAll('.description').forEach(el => el.style.display = 'none');
            // 移除菜单底部边框
            hatMenu.style.borderBottom = 'none';
            hatMenuContent.style.borderBottom = 'none';
        }
    }

    // 页面加载后定时检测菜单是否渲染，最多检测20次避免资源浪费
    let checkCount = 0;
    const checkTimer = setInterval(() => {
        adjustHatMenu();
        checkCount++;
        if (checkCount >= 20) clearInterval(checkTimer);
    }, 300);

    // 监听页面点击事件，每次打开菜单都自动重新应用样式
    document.body.addEventListener('click', () => setTimeout(adjustHatMenu, 100));
})();

修改点说明 #

• 新增可选链操作符?.避免找不到元素时控制台报错
• 加入定时检测逻辑，页面加载后自动等待菜单元素渲染完成再应用样式
• 新增描述段落批量隐藏逻辑
• 新增菜单底部边框移除配置
• 加入点击页面后重新应用样式的逻辑，保证每次打开菜单效果都生效

内容的提问来源于stack exchange，提问作者user17126282