移除指定元素和样式

删除app-info, divider元素,关闭高度限制,并禁用多个元素的过渡动画

// ==UserScript==
// @name         移除指定元素和样式
// @namespace    http://tampermonkey.net/
// @version      0.5
// @description  删除app-info, divider元素,关闭高度限制,并禁用多个元素的过渡动画
// @author       You
// @match        *://*.xiaohongshu.com/*
// @grant        none
// @run-at       document-start
// ==/UserScript==

(function() {
    'use strict';

    // 创建一个函数来执行DOM修改操作
    const modifyElements = () => {
        // 1. 查找并删除 .app-info 元素
        const appInfo = document.querySelector('.app-info');
        if (appInfo) {
            appInfo.remove();
            console.log('油猴脚本: .app-info 元素已删除。');
        }

        // 2. 查找 .channel-list 元素并移除其内联 height 样式
        const channelList = document.querySelector('.channel-list');
        if (channelList && channelList.style.height) {
            channelList.style.height = 'auto';
            console.log('油猴脚本: .channel-list 的 height 样式已关闭。');
        }

        // 3. 查找 .channel-list-content 元素并覆盖其 height 样式
        const channelListContent = document.querySelector('.channel-list-content');
        if (channelListContent) {
            channelListContent.style.height = 'auto';
            console.log('油猴脚本: .channel-list-content 的 height 样式已关闭。');
        }

        // 4. 查找并删除 .divider 元素
        const divider = document.querySelector('.channel-list .divider');
        if (divider) {
            divider.remove();
            console.log('油猴脚本: .divider 元素已删除。');
        }

        // 5. 禁用多个元素的过渡动画
        const elementsToModify = [
            '.note-container',
            '.note-detail-mask',
            '.close-circle',
            '.close-box'
        ];

        elementsToModify.forEach(selector => {
            const element = document.querySelector(selector);
            if (element) {
                // 通过设置内联样式并使用 !important 来确保覆盖所有其他样式规则
                element.style.setProperty('transition', 'none', 'important');
                console.log(`油猴脚本: ${selector} 的过渡动画已禁用。`);
            }
        });
    };

    // 由于现代网页内容可能是动态加载的,
    // 我们使用 MutationObserver 来监视DOM的变化。
    const observer = new MutationObserver((mutationsList, observer) => {
        for(const mutation of mutationsList) {
            if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                 modifyElements();
            }
        }
    });

    // 配置观察器以监视整个文档的子节点和后代节点变化
    const config = { childList: true, subtree: true };

    // 在文档加载完成后开始观察
    window.addEventListener('load', () => {
        modifyElements();
        observer.observe(document.body, config);
    });

})();