ui.html

<!-- <h2>Rectangle Creator</h2>
<p>Count: <input id="count" value="5"></p>
<button id="create">Create</button>
<button id="cancel">Cancel</button> -->
<script>
  // Create an event handler to receive messages from the main
  // thread.
  window.onmessage = async (event) => {
    // Just get the bytes directly from the pluginMessage since
    // that's the only type of message we'll receive in this
    // plugin. In more complex plugins, you'll want to check the
    // type of the message.
    const bytes = event.data.pluginMessage

    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')

    const imageData = await decode(canvas, ctx, bytes)
    const pixels = imageData.data

    // Do the actual work of inverting the colors.
    for (let i = 0; i < pixels.length; i += 4) {
      pixels[i + 0] = 255 - pixels[i + 0]
      pixels[i + 1] = 255 - pixels[i + 1]
      pixels[i + 2] = 255 - pixels[i + 2]
      // Don't invert the alpha channel.
    }

    const newBytes = await encode(canvas, ctx, imageData)
    window.parent.postMessage({pluginMessage: newBytes}, '*')
  }
</script>