我正在尝试在 Chrome 中为我在工作中一直使用的网站编写 Tampermonkey 脚本。我希望脚本删除某个类或标题的按钮上的禁用属性。在我看来,这似乎是一项非常简单的任务,但由于该网站大量使用 Ajax,我遇到了麻烦。
当我第一次加载网站时,有一个标题,一个左侧边栏,占据屏幕其余部分的主应用程序窗口是空白的。
用户将单击标题或侧边栏中的可用选项之一,并通过 ajax 将内容加载到主应用程序窗口中。主应用程序窗口有一个标题,其中包含新选项卡出现的选项卡,我可以在打开的选项卡和关闭选项卡之间切换。主应用程序窗口主体是所有内容出现的地方,根据我正在处理的内容,有许多不同的格式。
我已经能够成功地为标题和侧边栏中出现的按钮执行选择器并禁用/启用它们。对于通过 ajax 加载到主应用程序窗口的任何按钮,我无法获得任何选择器查询结果。我还尝试将我的 Tampermonkey 脚本设置为通过“上下文菜单”运行。当我导航到我试图修补的按钮所在的页面并右键单击 -> Tampermonkey -> 启用按钮时,它找不到按钮。
到目前为止,这是我的 Tampermonkey 脚本,它需要 JQuery 和 waitForKeyElements(),这是我通过关于 ajax 内容的堆栈溢出的其他问题发现的:
// ==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
// @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:
<button type="button" title="Create" class="btn ripple primary" disabled>
<span>Create</span>
</button>
我也试过:
waitForKeyElements ('button[title="Create"]', modifyButtons, false);
这些都不会触发 modifyButtons 功能,即使我通过右键单击菜单在正确的页面上手动运行脚本。
标题和侧边栏中有按钮,我已成功触发 modifyButtons 函数来测试我的脚本。这是侧边栏按钮之一的 HTML:
<button title="Search" class="pull-right blue__btn sat-stroked-button">
<span class="sat-button-wrapper">
Search
</span>
</button>
这些类的侧边栏中有六个按钮,我能够在所有六个按钮上触发 modifyButtons 函数:
waitForKeyElements ('button.pull-right.blue__btn.sat-stroked-button', modifyButtons, false);
我能够通过以下方式在侧边栏中的一个特定按钮上触发 modifyButtons 函数:
waitForKeyElements ('button[title="Search"]', modifyButtons, false);
过去,我已经弄乱了
buttons[i].disabled = false;
和 buttons[i].disabled = true;
当我让它触发侧边栏中的按钮时,它完成了我需要的东西。我只需要它在这个阶段实际看到并触发主应用程序窗口中的按钮。