preference.html

<style>
  textarea {
    overflow-y: scroll;
    height: 100px;
    resize: none;
    color: #000;
  }
</style>
<div class="p-4 bg-secondary rounded-lg flex flex-col mb-4">
  <div class="flex flex-col">
    <div class="pb-2">Sample package console</div>

    <textarea id="package_console"></textarea>
    <button
      id="button_send_message"
      class="flex items-center justify-center rounded focus:outline-none border-2 border-select bg-select hover:bg-select-saturate-10 hover:border-select-saturate-10 text-white px-2 py-0.5 mr-2"
    >
      Send echo message
    </button>
  </div>
</div>
<script>
  {
    const packageConsole = document.getElementById(
      "package_console"
    );
    const packageButton = document.getElementById(
      "button_send_message"
    );

    const messagePort = createPackageMessagePort(
      "package-sample-project"
    );
    messagePort.onmessage = (e) => {
      const data = e.data;
      packageConsole.value += data.message + "\r\n";
    };

    packageButton.onclick = function () {
      messagePort.postMessage({ type: "request-echo" });
    };

    messagePort.start();
  }
</script>