repaint-detector/detectRepaint.js

a library for styling the DOM while it is being repainted

function detectRepaint() {
  const observer = new MutationObserver((mutations) => {
    const colors = ["green", "red", "blue", "yellow"];
    mutations.forEach((mutation) => {
      const target = mutation.target;

      if (target) {
        const randomColor = colors[Math.floor(Math.random() * colors.length)];
        target.style.border = `2px solid ${randomColor}`;
      }
    });
  });

  observer.observe(document.body, {
    attributes: true,
    childList: true,
    subtree: true,
  });
}

// Automatically execute the function when the script is loaded
detectRepaint();