IThome Pro

优化ithome网页端浏览效果

As of 19. 08. 2024. See the latest version.

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name         IThome Pro
// @version      1.0
// @description  优化ithome网页端浏览效果
// @match        https://www.ithome.com/*
// @run-at       document-start
// @namespace https://greasyfork.org/users/1354671
// ==/UserScript==

(function() {
    'use strict';

    // Function to keep the page active by simulating clicks
    function keepPageActive() {
        const event = new MouseEvent('click', {
            view: window,
            bubbles: true,
            cancelable: true,
            clientX: 0, // 点击页面左上角,通常是空白区域
            clientY: 0
        });
        document.dispatchEvent(event);
    }

    // Set an interval to keep the page active every 0.1 seconds
    const intervalId = setInterval(keepPageActive, 100);

    // Stop the interval after 10 seconds
    setTimeout(() => {
        clearInterval(intervalId);
    }, 10000);

    // Redirect from homepage to blog page
    if (window.location.href === 'https://www.ithome.com/') {
        const style = document.createElement('style');
        style.innerHTML = `body { display: none; }`;
        document.head.appendChild(style);
        window.location.replace('https://www.ithome.com/blog/');
        return;
    }

    // Initial CSS to hide elements before page load
    const style = document.createElement('style');
    style.innerHTML = `
        #nav, #top, #tt, #list > div.fr.fx:last-child, #side_func,
        #dt > div.fl.content:first-child > div.cv:first-child, #dt > div.fr.fx:last-child,
        #dt > div.fl.content:first-child > div.newsgrade:nth-child(6),
        #dt > div.fl.content:first-child > div.shareto:nth-child(7),
        #dt > div.fl.content:first-child > iframe.dajia:nth-child(10),
        #rm-login-modal > div.modal.has-title.loaded,
        #dt > div.fl.content:first-child > div.related_post:nth-child(8),
        #dt > div.fl.content:first-child > div.newserror:nth-child(5),
        #paragraph > p.ad-tips:last-child, #postcomment3, #fls, #fi, #lns,
        #paragraph > div.tougao-user:nth-child(2), #login-guide-box, .dajia,
        [id^="ad-id-"] {
            display: none !important;
        }
    `;
    document.head.appendChild(style);

    // Function to hide elements based on AdGuard rules
    function hideElements() {
        const selectors = [
            '#nav', '#top', '#tt', '#list > div.fr.fx:last-child', '#side_func',
            '#dt > div.fl.content:first-child > div.cv:first-child', '#dt > div.fr.fx:last-child',
            '#dt > div.fl.content:first-child > div.newsgrade:nth-child(6)',
            '#dt > div.fl.content:first-child > div.shareto:nth-child(7)',
            '#dt > div.fl.content:first-child > iframe.dajia:nth-child(10)',
            '#rm-login-modal > div.modal.has-title.loaded',
            '#dt > div.fl.content:first-child > div.related_post:nth-child(8)',
            '#dt > div.fl.content:first-child > div.newserror:nth-child(5)',
            '#paragraph > p.ad-tips:last-child', '#postcomment3', '#fls', '#fi', '#lns',
            '#paragraph > div.tougao-user:nth-child(2)', '#login-guide-box', '.dajia',
            '[id^="ad-id-"]'
        ];

        selectors.forEach(selector => {
            document.querySelectorAll(selector).forEach(element => {
                element.style.display = 'none';
            });
        });
    }

    // Function to process and set rounded images
    function processImage(image) {
        if (image.classList.contains('ruanmei-emoji') && image.classList.contains('emoji')) return;
        if (image.id === 'image-viewer' || image.classList.contains('zoomed')) return;

        if (image.closest('a.img')) {
            const anchor = image.closest('a.img');
            anchor.style.border = '3px solid #CCC';
            anchor.style.borderRadius = '12px';
            anchor.style.display = 'inline-block';
            anchor.style.overflow = 'hidden';
        } else if (image.closest('.ithome_super_player')) {
            const videoPlayer = image.closest('.ithome_super_player');
            const wrapper = document.createElement('div');
            wrapper.style.border = '3px solid #CCC';
            wrapper.style.borderRadius = '12px';
            wrapper.style.overflow = 'hidden';
            wrapper.style.maxWidth = '400px';
            wrapper.style.display = 'block';
            wrapper.style.margin = '0 auto';
            videoPlayer.parentNode.insertBefore(wrapper, videoPlayer);
            wrapper.appendChild(videoPlayer);
        } else {
            image.style.borderRadius = '12px';
            image.style.border = '3px solid #CCC';
            if (image.width >= 30 && image.height > 150) {
                image.style.display = 'inline';
                image.style.maxWidth = '400px';
                image.style.height = 'auto';
                image.style.objectFit = 'cover';
                image.style.overflow = 'hidden';
            }
        }
    }

    // Function to set rounded images on all img elements
    function setRoundedImages() {
        document.querySelectorAll('img').forEach(image => processImage(image));
    }

    // Function to wrap images in <p> tags
    function wrapImagesInP() {
        if (window.location.href.startsWith('https://www.ithome.com/blog/')) return;
        document.querySelectorAll('img').forEach(image => {
            if (image.classList.contains('ruanmei-emoji') && image.classList.contains('emoji')) return;
            if (image.classList.contains('ithome_super_player')) return;
            if (image.parentNode.tagName.toLowerCase() === 'p' && image.parentNode.children.length === 1) return;
            const p = document.createElement('p');
            p.style.textAlign = 'center';
            p.style.margin = '0';
            p.setAttribute('data-vmark', 'f5e8');
            image.parentNode.insertBefore(p, image);
            p.appendChild(image);
        });
    }

    // Function to set rounded corners for comments
    function setRounded() {
        const roundeds = document.querySelectorAll(
            '.comm_list ul.list li.entry ul.reply, .content .post_content blockquote, ' +
            '.add_comm input#btnComment, .card, span.card'
        );
        roundeds.forEach(rounded => rounded.style.borderRadius = '12px');

        document.querySelectorAll('.add_comm').forEach(addCommElement => {
            addCommElement.style.borderRadius = '0px 0px 12px 12px';
        });

        document.querySelectorAll('.card, span.card').forEach(card => {
            card.style.borderRadius = '12px';
            card.style.transform = 'scale(0.8)';
        });
    }

    // Function to remove specific ads
    function removeAds() {
        document.querySelectorAll('div.bb.clearfix > div.fl > ul.bl > li').forEach(element => {
            if (element.querySelector('div.c > div.m:empty')) element.remove();
        });
    }

    // Automatically click the "Load More" button
    function autoClickLoadMore() {
        const loadMoreButton = document.querySelector('a.more');
        if (loadMoreButton) loadMoreButton.click();
    }

    // Observe DOM changes and apply styles/changes dynamically
    function observeDOM() {
        const observer = new MutationObserver(mutationsList => {
            for (const mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    setRoundedImages();
                    wrapImagesInP();
                    setRounded();
                    removeAds();
                    hideElements();
                }
            }
        });

        observer.observe(document.body, { childList: true, subtree: true });
    }

    // Load all images immediately
    function loadAllImages() {
        if (window.location.href.startsWith('https://www.ithome.com/blog/')) return;
        document.querySelectorAll('img').forEach(image => {
            if (image.hasAttribute('data-src')) {
                image.setAttribute('src', image.getAttribute('data-src'));
                image.removeAttribute('data-src');
            }
            if (image.hasAttribute('data-original')) {
                image.setAttribute('src', image.getAttribute('data-original'));
                image.removeAttribute('data-original');
            }
            if (image.hasAttribute('loading')) {
                image.removeAttribute('loading');
            }
        });
    }

    // Event listeners
    window.addEventListener('scroll', autoClickLoadMore);
    window.addEventListener('load', function() {
        hideElements();
        setRoundedImages();
        wrapImagesInP();
        setRounded();
        removeAds();
        loadAllImages();
        observeDOM();
    });
})();