ephemera.js

/**
 * Ephemeral Element Capture & Injection
 *
 * Usage:
 *   ephemera.startObserving();
 *   ephemera.trace(); // to see the captured HTML in the console
 *   ephemera.injectElement();
 */

const ephemera = {
  // --- config ---
  appMountPointID: 'appMountPoint',
  injectPointSelector: '[data-uia="loc"] > div',
  targetSelector: '.previewModal--wrapper',

  // --- state ---
  get appMountPoint() {
    return document.getElementById(ephemera.appMountPointID);
  },
  elementOuterHTML: null,
  observer: null,

  // --- API ---
  startObserving() {
    if (ephemera.observer) ephemera.observer.disconnect();
    ephemera.observer = new MutationObserver(() => {
      const el = ephemera.appMountPoint?.querySelector(ephemera.targetSelector);
      if (el) ephemera.elementOuterHTML = el.outerHTML;
    });
    ephemera.observer.observe(ephemera.appMountPoint, { childList: true, subtree: true });
  },

  stopObserving() {
    ephemera.observer?.disconnect();
  },

  trace() {
    console.log(`elementOuterHTML:\n${ephemera.elementOuterHTML}`);
  },

  injectElement() {
    if (!ephemera.elementOuterHTML) return console.warn('injectElement: no captured HTML');

    const temp = document.createElement('div');
    temp.innerHTML = ephemera.elementOuterHTML;

    const node = temp.firstElementChild;
    const container = ephemera.appMountPoint?.querySelector(ephemera.injectPointSelector);

    if (!container) return console.warn(`injectElement: container not found using ${ephemera.injectPointSelector}`);
    container.appendChild(node);
  },
};