jquery Tampermonkey脚本看不到aplog加载的shadow-root(打开)元素

我试图写一个在Chrome的网站，我在工作中使用所有的时间Tampermonkey脚本。我希望该脚本删除某类或标题按钮上的禁用属性。这似乎对我来说是一个很简单的任务，但我已经击中了砖墙，由于该网站使用Ajax相当严重。
当我第一次加载网站时，有一个标题，一个左手侧边栏，占据屏幕其余部分的主应用程序窗口是空白的。
Header and footer only
用户将点击标题或侧边栏中的一个可用选项，它会通过aplogic将内容加载到应用程序主窗口中。应用程序主窗口有一个标题，其中包含新标签，我可以在打开标签和关闭标签之间切换。应用程序主窗口主体是所有内容显示的地方，根据我正在处理的内容，有许多不同的格式。
With main application content loaded的
我已经能够成功地执行一个选择器的按钮，出现在标题和侧边栏和禁用/启用他们。

**编辑：**我今天玩了一下，发现在HTML中的几个地方包含了#shadow-root (open)，所以我开始研究这是什么。直到今天我做了一些研究，我才意识到影子DOM树是与主文档DOM树分开呈现的。这就解释了为什么它没有触发我的函数。我做了一些进一步的测试，能够在第一次出现#shadow-root (open)之前在主应用程序窗口中的ajaxed内容上触发我的函数。

这是我的Tampermonkey脚本，到目前为止，它需要jQuery和waitForKeyElements()，我通过其他关于堆栈溢出的问题找到了这些内容：

// ==Userscript==
// @name     Enable buttons
// @match    my.website.url.org
// @require  https://code.jquery.com/jquery-3.6.4.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @version  0.1
// ==/Userscript==

(function() {
    waitForKeyElements ('button.btn.ripple.primary', modifyButtons, false);

    function modifyButtons(jNode) {
        console.log ("~~~~~~~~ Button has been encountered ~~~~~~~~");
        var buttons = document.querySelectorAll('button.btn.ripple.primary');
        
        for (var i=0; i<buttons.length; i++) {
            buttons[i].disabled = false;
            console.log(i + " buttons touched and enabled.");
        }
    }
})();

字符串
这是我试图修改的按钮的HTML：

#shadow-root (open)
<!---->
<button type="button" title="Create" class="btn ripple primary" disabled>
    <span>Create</span>
</button>
<!---->

型
我也试过：

waitForKeyElements ('button[title="Create"]', modifyButtons, false);

型
这两个都不会触发modifyScript函数，即使我通过右键菜单在正确的页面上手动运行脚本。
在标题和侧边栏中有一些按钮，我已经成功地触发了modifybrowser函数来测试我的脚本。下面是其中一个侧边栏按钮的HTML：

<button title="Search" class="pull-right blue__btn sat-stroked-button">
    <span class="sat-button-wrapper">
        Search
    </span>
</button>

型
在侧边栏中有六个带有这些类的按钮，我能够在所有六个按钮上触发modifykeyboard函数：

waitForKeyElements ('button.pull-right.blue__btn.sat-stroked-button', modifyButtons, false);

型
我能够通过以下方式在侧边栏中的一个特定按钮上触发modifykeyboard功能：

waitForKeyElements ('button[title="Search"]', modifyButtons, false);

型
在此之后，我已经乱了buttons[i].disabled = false;和buttons[i].disabled = true;，它完成了我需要它时，我得到了它在侧边栏中的按钮触发。我只需要它实际看到并触发按钮在主应用程序窗口在这个阶段。
1.如何让Tampermonkey脚本看到#shadow-root (open)元素通过apache加载到主应用程序窗口中？
1.是否有任何特定的Tampermonkey运行在（文档开始，文档体，文档结束，文档空闲，或上下文菜单）设置，这是更适合aerodynamics网站比其他？我宁愿它的工作，而无需手动右键单击，并运行脚本，一旦我每次到达相应的页面。

您应该尝试创建一个突变观察器，寻找适当的影子根的选择器，然后观察这些根以进行动态更新。

MutationObserver(function (mutations) {
  for (let mutation of mutations) {
    try {
      if (mutation.type === "childList") {
        for (let node of mutation.addedNodes) {
          if (node.nodeType != Node.ELEMENT_NODE) {
            continue;
          }
          applyTweaks(node, DYNAMIC_TWEAKS, true);
        }
      } else if (mutation.type === "attributes") {
        applyTweaks(mutation.target, DYNAMIC_TWEAKS, true, true);
      }
    } catch (e) {
      // Catch exceptions for individual mutations so other mutations are still handled.
      console.log("Exception while handling mutation: " + e);
    }
  }
});

字符串
你可以用特定的选择器观察一个影子根来调用它，然后在element.shadowRoot上调用observer.observe来观察这个特定的元素。然后，直接在这个影子上应用一次调整。

jquery Tampermonkey脚本看不到aplog加载的shadow-root(打开)元素

1条答案

相关问题

热门标签

最新问答