通过GreaseMonKey脚本动态更换页面元素（甚至页面加载）

Question

我具有以下JavaScript函数：

function actionFunction() {
  let lookup_table = {
    'imageurl1': "imageurl2",
  };

  for (let image of document.getElementsByTagName("img")) {
    for (let query in lookup_table) {
      if (image.src == query) {
        image.src = lookup_table[query];
      }
    }
  }
}

即使在一个页面被满载后，我也希望它能正常工作（换句话说，使用该页面JS后负载出现的动态生成的HTML元素）。

它可以是每x秒运行函数，也可以是在页面中检测到某个元素XPATH时，或者每次在浏览器中加载某个图像URL时（这是我在这里的主要目标）。

使用JavaScript + GreaseMonKey我该怎么做？ 谢谢。

Answer 1

您是否尝试过在浏览器的终端运行代码，以查看涉及GreaseMonKey的无需涉及的情况吗？

至于您的问题 - 您可以使用setInterval每一个x量的时间运行给定代码，或者可以使用突变处理器来监视对网页dom的更改。在我看来，SetInterval足以完成这项工作，您可以尝试学习突变处理器将来的工作方式。

因此，重写您的代码：

  // arrow function - doesn't lose this value and execution context
  // setInterval executes in a different context than the enclosing scope which makes functions lose this reference
  // which results in being unable to access the document object
  // and also window as they all descend from global scope which is lost
  // you also wouldn't be able to use console object
  // fortunately we have arrow functions
  // because arrow functions establish this based on the scope the arrow function is defined within
  // which in most cases is global scope
  // so we have access to all objects and their methods

  const doImageLookup = () => {
    const lookup_table = {
    'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png': 'https://www.google.com/logos/doodles/2022/gama-pehlwans-144th-birthday-6753651837109412-2x.png',
};
    const imgElementsCollection = document.getElementsByTagName('img');
    [...imgElementsCollection].forEach((imgElement) => {
      Object.entries(lookup_table).forEach(([key, value]) => {
        const query = key; // key and value describe object's properties
        const replacement = value; // here object is used in an unusual way, i would advise to use array of {query, replacement} objects instead
        if (imgElement.src === query) {
          imgElement.src = replacement;
        }
      });
    });
  };
  const FIVE_MINUTES = 300000; // ms
  setInterval(doImageLookup, FIVE_MINUTES);

您可以通过跟踪IMG计数来制作更复杂的版本，并且只有在数字增加的情况下才能执行Imagelookop。这将是一个很大的优化，可以使您更频繁地运行查询（尽管5分钟的间隔很长，请根据需要进行调整）。