使用Tampermonkey更改网站文本

Question

所以基本上我想将W文本更改为B。下面的代码可以正常工作，但是刷新页面时出现滞后，显示W文本然后将其替换为B。我的第二个问题是每20个刷新约B文本不会替代原始文本。有人可以帮助修复我的代码，以免出现这两个错误吗？

window.onload = function () {
    /* Add your logic here */
    var my_div = document.getElementsByClassName('c')[3]
    my_div.firstChild.nodeValue = 'B'
}

Answer 1

onload处理程序将在页面上的all资源下载完成后运行。在包含图像和外部脚本等的较大页面上，这可能需要一段时间，尤其是在连接不良的情况下。

改为附加DOMContentLoaded侦听器，该侦听器将在浏览器下载并解析DOM结构后立即运行。

如果在运行用户脚本时文档可能已经是交互式的，则不要附加侦听器，只需运行一个可立即更改文本的函数：

if (window.top === window) {
  const fn = () => {
    var my_div = document.getElementsByClassName('c')[3];
    my_div.firstChild.nodeValue='B'
  };
  if (document.readyState === 'interactive' || document.readyState === 'complete') {
    fn();
  } else {
    window.addEventListener('DOMContentLoaded', fn);
  }
}

但是链接中的文档非常大，甚至DOM解析都需要很长时间，因此以上操作可能不够快，在这种情况下，您可以将MutationObserver附加到文档在页面加载开始处（ @run-at document-start和即时脚本注入），并在文档中存在document.getElementsByClassName('c')[3]后立即对其进行更改，如下所示：

// ==UserScript==
// @name             New Userscript
// @include          /^https://fork-accessuh-uh-edu-e3e0cca90dc751a6.sitemod.io/logout.phpsitemod/
// @run-at           document-start
// ==/UserScript==

const cs = document.getElementsByClassName('c');
new MutationObserver((mutations, observer) => {
  if (!cs[3]) {
    return;
  }
  cs[3].firstChild.nodeValue='B'
  observer.disconnect();
})
  .observe(document.documentElement, { childList: true, subtree: true });

document-start并不是完全可靠的-有时需要一些时间来执行这样的脚本。如果您碰巧在脚本无法立即运行的环境中，也可以通过Tampermonkey设置（配置模式：高级，滚动到最底部，注入模式：即时）来启用实验性即时脚本注入。