x.com DEMO mode

Blur usernames and IDs on X.com for DEMO mode, with hover to reveal or hide

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

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

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name       x.com DEMO mode
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Blur usernames and IDs on X.com for DEMO mode, with hover to reveal or hide
// @author       Grok & https://x.com/scavenger869
// @match        https://x.com/*
// @grant        GM_addStyle
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // 添加CSS样式,控制模糊和悬浮效果
    GM_addStyle(`
        /* 默认模糊效果 */
        button[data-testid="SideNav_AccountSwitcher_Button"] > div:nth-child(2) {
            filter: blur(5px);
            transition: filter 0.3s ease; /* 平滑过渡效果 */
        }

        /* 选项1:鼠标悬浮时移除模糊效果 */
        button[data-testid="SideNav_AccountSwitcher_Button"] > div:nth-child(2):hover {
            filter: blur(0);
        }

        /* 选项2:鼠标悬浮时隐藏元素(注释掉选项1后启用) */
        /*
        button[data-testid="SideNav_AccountSwitcher_Button"] > div:nth-child(2):hover {
            display: none;
        }
        */
    `);

    // 函数:确保元素被正确处理(如果需要额外的JavaScript逻辑)
    function applyBlur() {
        const usernameElements = document.querySelectorAll('button[data-testid="SideNav_AccountSwitcher_Button"] > div:nth-child(2)');
        usernameElements.forEach(element => {
            // 确保元素有模糊效果(CSS已处理,这里可以留空)
            // 如果需要额外的JavaScript逻辑,可以在这里添加
        });
    }

    // 初次运行
    applyBlur();

    // 使用MutationObserver监听页面变化
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(() => {
            applyBlur(); // 每次页面有变化时重新处理
        });
    });

    // 观察整个文档的变化
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();