无法在开发工具中选择带有篡改猴子的 css 元素

Question

我今天很沮丧在推特搜索页面的侧边栏中选择顶部 div。 我可以在 chrome 开发工具中执行此操作，但在使用篡改猴子时它返回 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);
})();

Answer 1

感谢@wOxxOm，我做了一些研究，发现这些代码有效。 从这里

let classes = ".css-1dbjc4n.r-vacyoi.r-ttdzmv";
    function isElement(addedNode, selector, callback) {
      if (typeof addedNode.querySelector === 'function' && addedNode.querySelector(selector)) {
        callback();
      }
    }

    var elementReadyObserver = new MutationObserver(function (mutations) {
      for (var i=0, numMutations=mutations.length; i<numMutations; i++) {
        for (var j=0, numNodes=mutations[i].addedNodes.length; j<numNodes; j++) {
          isElement(mutations[i].addedNodes[j], classes, function() {
            elementReadyObserver.disconnect();
            // ... and do what you want to do with the element you've been observing
              console.log("i found it");
              let parentDiv = document.querySelector(classes);
              console.log(parentDiv);
              parentDiv.insertBefore(newDiv,parentDiv.firstChild);
          });
        }
      }
    });
    elementReadyObserver.observe(document.body, {attributes: true, subtree: true, childList: true});