Detect react event from Tampermonkey

Question

I'm enhancing a React front end with Tampermonkey , by adding highlights to show cursor location in a grid, and allowing users to directly enter data , rather than then enter data.

After 2 or 3 cursor moves or data entry the grid refreshes or updates - no page change - and looses the highlighting I set up.

I'd like to catch the refresh/update and reset the highlighting.

I'm a noob..

The network tab shows post events so I tried https://jsbin.com/dixelocazo/edit?js,console var open = window.XMLHttpRequest.prototype.open,
send = window.XMLHttpRequest.prototype.send;

to try and use POST events to detect the refresh. No joy !

I also looked at ajax events.

No luck :(

Can someone point me in the right direction here ?

Once I catch the event, I can then reset the highlighting to fix the problem

Answer 1

Since normally the userscripts run in a sandbox, JavaScript functions or objects cannot be used directly by default, here's what you can do:

Disable the sandbox:

// @grant none

You won't be able to use any GM functions, though.

---

Run in the page context via unsafeWindow:

const __send = unsafeWindow.XMLHttpRequest.prototype.send;
unsafeWindow.XMLHttpRequest.prototype.send = function () {
  this.addEventListener('loadend', e => {
    console.log('intercepted', e);
  }, {once: true});
  __send.apply(this, arguments);
};

---

Use MutationObserver to detect changes in page DOM:

const observer = new MutationObserver(mutations => {
  const matched = [];
  for (const {addedNodes} of mutations) {
    for (const n of addedNodes) {
      if (!n.tagName)
        continue;
      if (n.matches('.prey:not(.my-highlight)')) {
        matched.push(n);
      } else if (n.firstElementChild) {
        matched.push(...n.querySelectorAll('.prey:not(.my-highlight)'));
      }
    }
  }
  // process the matched elements
  for (const el of matched) {
    el.classList.add('my-highlight');
  }
});
observer.observe(document.querySelector('.surviving-ancestor') || document.body, {
  subtree: true,
  childList: true,
});

• .surviving-ancestor means the element that isn't replaced/recreated by the page script. In devtools element inspector it's the one that isn't highlighted temporarily during DOM updates.
• See also Performance of MutationObserver.