ESP3D-WEBUI/extensions_samples/capabilities.html

<script type="text/javascript">
  function sendMessage(msg){ 
      window.parent.postMessage(msg, '*');
  }
  
  function onclickBtn(){
  const selectElement = document.getElementById('request_id'); 
  id_requested = selectElement.value
  sendMessage({type:'capabilities', target:'webui', id:document.getElementById('request_id').value,});
  }

  function processMessage(eventMsg){
        if (eventMsg.data.type  && (!eventMsg.data.id||eventMsg.data.id==document.getElementById('request_id').value)){
            if (eventMsg.data.type=="capabilities"){
                const line =  eventMsg.data.content
                const resultPanel = document.getElementById("output");
                    let res = JSON.stringify(line.response," ","\n")
                    while (res.includes("\n\n")) {
						res = res.replace("\n\n", "\n");
					  }
                    resultPanel.innerHTML = res;
                           
            }
        }
    }


  window.onload = (event) => {
    window.addEventListener("message", processMessage, false);
  }
    
</script>

<div class="container">
	<select id="request_id" class="form-select column">
	<option value="connection">connection</option>
	<option value="features">features</option>
	<option value="interface">interface</option>
	<option value="settings">settings</option>
	</select>
    <button class="btn m-1" onclick="onclickBtn();">Capabilities</button>
    <pre class="container m-2" id="output">
    </pre>
</div>