I have the following javascript function:

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];
      }
    }
  }
}

I want it to work even after a page is fully loaded (in other words, work with dynamically generated html elements that appeared post-load by the page's js).

It could either be by running the function every x seconds or when a certain element xpath is detected within the page, or every time a certain image url is loaded within the browser (which is my main goal here).

What can I do to achieve this using javascript greasemonkey? I intend to make this work on Discord in particular.

Thank you.

CodePudding user response：

Have you tried running your code in the browser's terminal to see if it works without greasemonkey involved?

As to your question - you could either use setInterval to run given code every x amount of time or you could use the MutationObserver to monitor changes to the webpage's dom. In my opinion setInterval is good enough for the job, you can try learning how the MutationObserver works in the future.

So rewriting your code:

  // 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 = {
      imageurl1: 'imageurl2',
    };
    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);

You could make more complex version by tracking the img count and only doing the imageLookop if their number increases. This would be a big optimization and would allow you to run the query more frequently (though 5 minutes is pretty long interval, adjust as required).