我的腳本將在控制台中運行，但我無法讓它在 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不起作用，那么這不僅僅是等待將正確的元素添加到頁面的問題，還有更多的事情要做。