我的脚本将在控制台中运行，但我无法让它在 Greasemonkey 中运行

Question

我正要用这个扯掉我的头发。 这段代码将在浏览器控制台中执行得很好，但它根本不会与 Greasemonkey 或 Tampermonkey 一起运行。 我都试过了，我不知道可能出了什么问题。

澄清附录：如下所述，我没有收到任何特定于脚本或 greaskmoney/tampermonkey 的错误。 我曾尝试使用 waitforKeyElements，但这似乎没有任何区别。 将触发一个简单的警报，因此我确信无论错误是什么，它似乎都是 javascript 特有的。

作为参考，我在这里找到了代码。

提前致谢。

// ==UserScript==
// @name            name
// @description     description
// @version         1
// @author          me
// @match           https://*.robertsspaceindustries.com/spectrum/community/SC/forum/*
// @icon            https://i.imgur.com/km9uoYJ.png
// ==/UserScript==

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? "rgb(" + [
    parseInt(result[1], 16),
    parseInt(result[2], 16),
    parseInt(result[3], 16)
  ].join(', ') + ")" : null;
}

// Function to change a color to another one
function colorChange(colorOld, colorNew, strict = false) {
  // If hex notation, convert to rgb
  if (colorOld.includes('#'))
    colorOld = hexToRgb(colorOld);
  // Loop through all elements styles
  [...document.getElementsByTagName('*')].forEach(elm => {
    let cStyle = getComputedStyle(elm);
    [...cStyle].forEach(prop => {
      // Escape if not a string
      if (typeof cStyle[prop] !== 'string') return;
      // Check if colorOld is in property
      if (cStyle[prop].includes(colorOld)){
        // If strict, colorOld is replaced only if it's the only value of the property
        if (!strict || cStyle[prop] === colorOld)
          elm.style[prop] = cStyle[prop].replace(colorOld, colorNew); // Replace color
      }
    })
  })
};

// function () {
//   colorChange('#182436', '#ff0000');
//   console.log('colorChange has run.');
// };

colorChange('#182436', '#ff0000');

Answer 1

最常见的问题 - 以及waitForKeyElements和/或 MutationObserver 解决的问题 - 是代码试图针对尚未添加到页面的元素运行。 （请记住，我们在这里谈论的是微秒......页面通常仍在呈现 JavaScript 正在执行，并且当 JavaScript 期望它们时，某些元素可能尚未准备好。） setTimeout ， waitForKeyElements和 MutationObserver 都是延迟的方法JavaScript 直到出现所需的元素。

您可以通过将代码包装在setTimeout() function 中来测试waitForKeyElements或 MutationObserver 是否是解决方案。

// ==UserScript==
// @name            name
// @description     description
// @version         1
// @author          me
// @match           https://*.robertsspaceindustries.com/spectrum/community/SC/forum/*
// @icon            https://i.imgur.com/km9uoYJ.png
// ==/UserScript==

(function() {
    'use strict';

    setTimeout( () => {

        colorChange('#182436', '#ff0000');

    }, 10000);  //10-sec delay

})();

function hexToRgb(hex) {
    //etc (removed for brevity)
}

function colorChange(colorOld, colorNew, strict = false) {
    //etc (removed for brevity)
};

setTimeout是执行此操作的旧方法，但它仍然有效，而且实现起来非常简单。 因此，将您的代码包装在 10 或 20 或 30 秒的setTimeout中，如果它运行，您就知道waitForKeyElements或 MutationObserver 是答案。

但是如果 30 或 120 秒的setTimeout不起作用，那么这不仅仅是等待将正确的元素添加到页面的问题，还有更多的事情要做。