强制 Tampermonkey 稍后运行/执行脚本

Question

如何强制 Tampermonkey 在 AJAX 加载每个文档后运行/执行脚本？

我希望访问脚本中的这些元素并更改它们。但是，即使我在设置页面中将

@run-at

设置为

document-end

，它也会在文档未完全加载时执行。 而且，它发生在这个特定的网站上！

我尝试了这些方法，但没有成功：

1. Onload 事件。
2. 我尝试使用

   while

   语句来检查是否所有文档都已加载，然后继续执行我的脚本，但它崩溃并陷入无限循环。
3. 我尝试控制台执行一个函数（但控制台无法访问）。

那我该怎么办？

Answer 1

您想要的内容正在通过 AJAX 加载，因此您需要在脚本中使用 AJAX 补偿技术。

最简单的方法是使用 waitForKeyElements()。 比如：

// ==UserScript==
// @name     _YOUR_SCRIPT_NAME
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements (
    "jQUERY SELECTOR TO THE NODE(S) YOU WANT",
    changeFontColor
);

function changeFontColor (jNode) {
    jNode.css ("color", "red");
}

Answer 2

如果您的脚本阻止页面加载，例如。在 Salesforce 站点上，将脚本的有效负载放入 setTimeout() 回调函数中。 在此示例中，我想要覆盖的背景颜色样式是由原始页面的 javascript 设置的，该 javascript 在 TamperMonkey 完成之前拒绝运行。此脚本中的 setTimeout 让 TamperMonkey 运行完成并且页面继续加载，但在延迟一秒后运行有效负载（我对 GM_addStyle() 的调用）。

:
// @grant  GM_addStyle
// @run-at document-idle
:
(function() {
    'use strict';
    setTimeout(function(){
           GM_addStyle(":root {--lwc-brandBackgroundPrimary:rgba(255, 176, 41, 1);}");
           GM_addStyle(":root {--lwc-brandBackgroundDark:rgba(237, 60, 24, 1);}");
           }, 1*1000);
})();

Answer 3

另一个解决方案是检查关键元素是否存在，如果不存在则稍后重试：

function myFunction() {
    var targetElement = document.querySelector("desired-element-property")

    if (targetElement == null) {
        // The element is not loaded yet, try again later
        setTimeout(myFunction, 500)
    } else {
        // The element is there, we can execute our code
        …
    }
};

window.addEventListener('load', function() {
    setTimeout(myFunction, 500)
}, false);