ui.html

<h3>Please Enter Your API Key</h3>
<p><input id="api-key-input" class="api-key-input" placeholder="API Key" required pattern="^(waka_)?[0-9A-Fa-f]{8}-[0-9A-Fa-f]{4}-4[0-9A-Fa-f]{3}-[89ABab][0-9A-Fa-f]{3}-[0-9A-Fa-f]{12}$" /></p>
<button id="enter">Enter</button>
<script>
  // Handle Input
  document.getElementById('enter').onclick = () => {
    const textbox = document.getElementById('api-key-input');
    const apiKey = textbox.value;
    if (textbox.checkValidity()) {
      parent.postMessage(
        {
          pluginMessage: {
            type: 'update-api-key',
            apiKey
          }
        },
        '*'
      );
    }
  };

  // Handle Heartbeats
  window.onmessage = async (event) => {
    if (event.data.pluginMessage.type === 'heartbeat') {
      let data = event.data.pluginMessage.data;
      await fetch('https://wakatime.com/api/v1/users/current/heartbeats', {
        type: 'POST',
        mode: 'no-cors',
        contentType: 'application/json',
        dataType: 'json',
        headers: {
          Authorization: `Basic ${btoa(data.apiKey)}`
        },
        data: {
          time: data.time / 1000,
          entity: data.file,
          type: 'file',
          project: data.project,
          language: data.language,
          is_write: data.isWrite ? true : false,
          lines: data.lines,
          plugin: `figma-wakatime/${data.VERSION}`
        }
      });
    }
  };
</script>
<style>
  .api-key-input:invalid {
    border: red solid 3px;
  }
  .api-key-input:valid {
    border: green solid 3px;
  }
</style>