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

llew8vvj  于 12个月前  发布在  jQuery
关注(0)|答案(1)|浏览(143)

我试图写一个在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网站比其他?我宁愿它的工作,而无需手动右键单击,并运行脚本,一旦我每次到达相应的页面。

qojgxg4l

qojgxg4l1#

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

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来观察这个特定的元素。然后,直接在这个影子上应用一次调整。

相关问题