如何用TamperMonkey修改Chrome中Google Hangouts扩展CSS移除SMS徽章

嘿，我懂你这种明明CSS规则正确，但TamperMonkey就是不生效的 frustration！别慌，咱们一步步排查解决：

1. 把@match规则写全 #

Google Hangouts（包括现在的Google Chat）的访问URL可能有几种形式，确保你的脚本覆盖所有可能的地址：

// @match        https://hangouts.google.com/*
// @match        https://chat.google.com/*

如果还是不行，可以补充加上// @include *hangouts.google.com*，@include的匹配范围更宽泛，有时候能解决@match没覆盖到的边缘情况。

2. 提升CSS规则的优先级 #

页面本身的内置CSS可能有更高的优先级，直接把你的规则加上!important强制生效，这是最常见的解决办法：

.Dkouue { display: none !important; }

3. 确保脚本在页面完全加载后运行 #

如果脚本执行太早，DOM里的SMS徽章元素还没渲染出来，CSS自然没法生效。在TamperMonkey的元数据里加上：

// @run-at       document-idle

这个选项会等页面所有资源加载完成后再执行脚本，保证目标元素已经存在于DOM中。

4. 确认CSS选择器没失效 #

Google经常会悄悄更新页面的类名，说不定.Dkouue已经被换掉了！重新打开开发者工具（F12），找到那个SMS徽章元素，右键复制它的CSS选择器，替换掉原来的.Dkouue。

5. 用MutationObserver处理动态加载的元素 #

如果Hangouts是滚动加载新会话的动态渲染模式，静态注入的CSS可能没法作用到后来出现的元素上。这时候可以用MutationObserver监听DOM变化，动态隐藏徽章：

完整的TamperMonkey脚本示例：

// ==UserScript==
// @name         Hide Hangouts SMS Badge
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Remove SMS badge from Hangouts avatar icons
// @author       You
// @match        https://hangouts.google.com/*
// @match        https://chat.google.com/*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(function() {
    'use strict';

    // 注入基础CSS样式
    const style = document.createElement('style');
    style.textContent = '.Dkouue { display: none !important; }';
    document.head.appendChild(style);

    // 监听DOM变化，处理动态加载的徽章元素
    const observer = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            if (mutation.addedNodes.length) {
                document.querySelectorAll('.Dkouue').forEach(badge => {
                    badge.style.display = 'none';
                });
            }
        });
    });

    // 监听整个body及其子树的元素变化
    observer.observe(document.body, { childList: true, subtree: true });
})();

按照上面的步骤试一遍，应该就能顺利隐藏那个烦人的SMS徽章啦！

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