MutationObserver re-triggers on your own injected DOM — guard against it

Today I learned that a MutationObserver watching childList/subtree on a page you don't control will happily fire again when your own injected UI is the thing that just changed the DOM. Without a guard, that's an infinite loop: inject → observer fires → the new node looks like fresh host content → inject again.

const DASHBOARD_ID = "dispatcher-dashboard";
 
function injectDashboard() {
  // Idempotency check — bail if we already injected it.
  if (document.getElementById(DASHBOARD_ID)) return;
 
  const dashboard = document.createElement("div");
  dashboard.id = DASHBOARD_ID;
  dashboard.textContent = "Pending: 0";
  document.body.appendChild(dashboard);
}
 
const observer = new MutationObserver(() => injectDashboard());
observer.observe(document.body, { childList: true, subtree: true });
 
injectDashboard();

The getElementById check inside injectDashboard is what breaks the loop. The observer callback can fire as often as it wants — every re-entrant call is a cheap no-op instead of a fresh appendChild that triggers the observer all over again.

This came up while injecting an operational dashboard into a dispatch platform's page: the host app re-renders parts of its UI on every new order, so the observer fires constantly. Without the guard, the dashboard flickered and CPU usage climbed during busy shifts — a single if fixed both.