DeviceManager/static/sandbox/index.html

<script>
  /** @type {Promise<unknown> | undefined} */
  let ongoingRequest = undefined;
  /** @type {(data: unknown) => void | undefined} */
  let resolveRequest = undefined;
  /** @type {MessageEventSource | undefined} */
  let source = undefined;

  /**
   * @param {string} channel
   * @param {unknown} args
   * @returns {Promise<unknown>}
   */
  async function post(channel, args) {
    while (ongoingRequest) {
      await ongoingRequest;
    }
    ongoingRequest = new Promise((resolve) => {
      resolveRequest = resolve;
      source?.postMessage([channel, args], { targetOrigin: "*" });
    });
    ongoingRequest.then(() => {
      ongoingRequest = undefined;
    });
    return ongoingRequest;
  }

  /**
   * @param {MessageEvent<import('../../src/routes/plugin/plugin-types').ChannelEventData>} event
   */
  function onMessage(event) {
    if ("response" in event.data) {
      resolveRequest?.(event.data.response);
    } else {
      source = event.source ?? undefined;

      const Action = event.data.actionCodes;
      Object.assign(
        Action,
        Object.fromEntries(
          Object.values(event.data.actionCodes)
            .filter((it) => !!it.id)
            .map((it) => [it.id, it]),
        ),
      );

      new Function("Action", "Chara", event.data.script)(
        Action,
        Object.fromEntries(
          event.data.charaChannels.map((name) => [
            name,
            (...args) => post(name, args),
          ]),
        ),
      );
    }
  }

  window.addEventListener("message", onMessage);
</script>