Tampermonkey脚本无法选中DevTools可定位的Twitter页CSS元素

编写适配Twitter站点的Tampermonkey脚本时，需选取Twitter搜索页侧边栏的顶部div元素：

• 在Chrome DevTools中，可通过CSS选择器正常定位该元素
• 运行Tampermonkey脚本时，document.querySelector查询结果始终返回null/undefined，无法获取目标元素

使用的原始脚本代码如下：

// ==UserScript==
// @name         twitter
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://twitter.com/*
// @run-at       document-end
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twitter.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let container = document.querySelector(".css-1dbjc4n.r-vacyoi.r-ttdzmv");
    console.log(container);
})();

• Twitter是单页应用（SPA），页面内容全靠前端JS异步渲染插入。脚本设置的@run-at document-end触发时机，仅代表初始静态DOM加载完成，此时侧边栏目标元素还未被渲染到页面中，直接查询必然返回空。
• 所用的CSS选择器.css-1dbjc4n.r-vacyoi.r-ttdzmv是构建工具生成的随机哈希类名，这类类名会随Twitter每次前端发版重新生成，本身稳定性极差，哪怕临时调试能命中，后续版本更新会直接失效。

1. 不要在脚本初始化阶段直接查询元素，通过MutationObserver监听DOM变化，等目标元素渲染插入页面后再执行获取逻辑，性能远优于setTimeout固定轮询。
2. 弃用随机哈希类名选择器，优先使用元素自带的固定属性（如role、aria-label、data-testid、稳定的DOM层级关系）编写选择器，保证选择器长期可用。

修复后的参考代码：

// ==UserScript==
// @name         twitter
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://twitter.com/*
// @run-at       document-end
// @icon         https://www.google.com/s2/favicons?sz=64&domain=twitter.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    /**
     * 等待指定元素渲染完成
     * @param {string} selector CSS选择器
     * @param {number} timeout 超时时间，单位毫秒
     * @returns {Promise<HTMLElement>}
     */
    function waitForElement(selector, timeout = 10000) {
        return new Promise((resolve, reject) => {
            // 首次查询，元素已存在直接返回
            const existEl = document.querySelector(selector);
            if (existEl) return resolve(existEl);

            const observer = new MutationObserver(() => {
                const target = document.querySelector(selector);
                if (target) {
                    observer.disconnect();
                    resolve(target);
                }
            });

            // 监听DOM树变化
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });

            // 超时兜底
            setTimeout(() => {
                observer.disconnect();
                reject(new Error('元素查找超时'));
            }, timeout);
        });
    }

    // 替换为基于固定属性的稳定选择器，示例为搜索侧边栏区域的通用定位逻辑，可根据实际需求调整
    const targetSelector = '[role="complementary"][aria-label*="搜索"] > div:first-child';
    waitForElement(targetSelector)
        .then(container => {
            console.log('获取目标元素成功', container);
            // 后续元素操作逻辑写在这里
        })
        .catch(err => console.error(err));
})();

提示：编写Twitter站点的选择器时，优先查看元素是否带无障碍相关属性（role/aria-label/data-testid），这类属性是开发阶段固定写死的，不会随构建、版本迭代随意变更，定位稳定性远高于随机类名。

内容的提问来源于stack exchange，提问作者Jimmy Xee