☰

x.com DEMO mode

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

  1. // ==UserScript==
  2. // @name       x.com DEMO mode
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Blur usernames and IDs on X.com for DEMO mode, with hover to reveal or hide
  6. // @author       Grok & https://x.com/scavenger869
  7. // @match        https://x.com/*
  8. // @grant        GM_addStyle
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // 添加CSS样式，控制模糊和悬浮效果
  16.     GM_addStyle(`
  17.         /* 默认模糊效果 */
  18.         button[data-testid="SideNav_AccountSwitcher_Button"] > div:nth-child(2) {
  19.             filter: blur(5px);
  20.             transition: filter 0.3s ease; /* 平滑过渡效果 */
  21.         }
  22.  
  23.         /* 选项1：鼠标悬浮时移除模糊效果 */
  24.         button[data-testid="SideNav_AccountSwitcher_Button"] > div:nth-child(2):hover {
  25.             filter: blur(0);
  26.         }
  27.  
  28.         /* 选项2：鼠标悬浮时隐藏元素（注释掉选项1后启用） */
  29.         /*
  30.         button[data-testid="SideNav_AccountSwitcher_Button"] > div:nth-child(2):hover {
  31.             display: none;
  32.         }
  33.         */
  34.     `);
  35.  
  36.     // 函数：确保元素被正确处理（如果需要额外的JavaScript逻辑）
  37.     function applyBlur() {
  38.         const usernameElements = document.querySelectorAll('button[data-testid="SideNav_AccountSwitcher_Button"] > div:nth-child(2)');
  39.         usernameElements.forEach(element => {
  40.             // 确保元素有模糊效果（CSS已处理，这里可以留空）
  41.             // 如果需要额外的JavaScript逻辑，可以在这里添加
  42.         });
  43.     }
  44.  
  45.     // 初次运行
  46.     applyBlur();
  47.  
  48.     // 使用MutationObserver监听页面变化
  49.     const observer = new MutationObserver((mutations) => {
  50.         mutations.forEach(() => {
  51.             applyBlur(); // 每次页面有变化时重新处理
  52.         });
  53.     });
  54.  
  55.     // 观察整个文档的变化
  56.     observer.observe(document.body, {
  57.         childList: true,
  58.         subtree: true
  59.     });
  60. })();