JSFiddle - React, Tailwind, and code Playground

HTML

<div id=chatbot>
  <iframe id=frame>

  </iframe>
</div>

JavaScript

const frame = document.getElementById( "frame" );
frame.src = URL.createObjectURL( new Blob( [ `
  <div id="target"></div>
  <script>
    const target_el = document.querySelector("#target");
    setInterval( () => target_el.append("hello - "), 1000 );
  <\/script>
` ], { type: "text/html" } ) );
function cb() {
  console.log( "caught a new mutation" );
}
frame.onload = function( evt ) {
  const iframeBody = frame.contentDocument?.body;
  if( !iframeBody ) {
    // this means we are in a cross-origin document...
    return;
  }
  const observer = new MutationObserver( cb );
  observer.observe( iframeBody, { childList: true, subtree: true } );
};