【electron+typescript】webviewタグ内部コンテンツのwindow.onmessageへメッセージを送信する方法

とりあえず、レンダラーからwebview(preload)へはsendメソッドでメッセージを通知できました。
electronjs.org
…そこからpostMessageと同様にwebコンテンツ側のonmessageにメッセージを通知させようとした際に、どハマりしたのでメモ。

☆やりたいイメージ

☆preload.js

webviewタグのpreload属性に設定するJavaScriptでの処理。

const ipc = require("electron").ipcRenderer;
ipc.on("ping", (event, arg) => {
    // messageイベントに送信するEventオブジェクトの作成
    // 書き込み可能なdataプロパティを作成するため
    interface CustomEvent extends Event {
        /**
         * メッセージ
         */
        data: string;
    }
    const messageEvent: CustomEvent = new Event("message") as CustomEvent;
    messageEvent.data = arg;
    window.dispatchEvent(messageEvent);
});

ちなみにwebview→レンダラーへのメッセージ送信方法はこちらを参考にしました。
stackoverflow.com
他にもちらほら類似の記事がありましたが、レンダラー→webviewへの方法については全然記事がなかった。同じような事をしようとしている方の参考になれば幸いです。

☆蛇足

ちなみにバニラ.jsでは試していませんが、typescriptみたくアサーションを気にする必要はないので、Eventインスタンスを作った後に直接dataプロパティを設定できるかと思います。

typescriptを使い始めたばかりなのですが、Typeアサーション面倒臭いですねー。Swiftでも似たような事に頭を悩ませたりしたような気がします。無秩序なバニラやjQueryに慣れると厳密に型を意識しないといけないのは面倒です。

ElectronとHTML5で作るGUIアプリ入門 るてんのプチ技術書