BlazorからSSSExtentionを使う方法

内容は薄いですが、今後も追記予定です。
BlazorからJavascriptを使いたい人にも参考になるかも！？

window.SSSを取得したい

Chrome拡張機能のSSS-Extentionが既に導入されていることが前提です。

SSSについて詳しく知りたい方はこちら

手順としては以下のとおりです。

1. wwwrootディレクトリにjs/sss-extention.jsを追加(jsの名前は任意)
2. JSRuntimeの依存性注入
3. razorにてOnInitializedをオーバーライドする
4. 1で作成したjsファイルをimport
5. InvokeAsyncを使ってjsファイル内の関数を呼び出す

jsファイルの中身はざっくりこんな感じ

./wwwroot/js/sss-extention.js

export const getSssObject = () => {
    if (window.SSS) {
        alert('sss!');
        return window.SSS;
    } else {
        alert('not sss!');
        return null;
    }
}

window.SSSがあればwindow.SSSを返し、そうでなければnullが返却されるだけのコード(笑)

razor側はこんな感じ

index.razor

@inject IJSRuntime JSRuntime

protected override async void OnInitialized()
    {
        base.OnInitialized();
        var module = await JSRuntime.InvokeAsync<IJSObjectReference>(
            "import", "./js/sss-extention.js"
        );

        var obj = await module.InvokeAsync<SssExtention>("getSssObject");

        return;
    }

これでobjにJson形式のwindow.SSSが返却されます。
今回はSssExtentionで型指定を行っています。
C#はJsonをそのまま取得する方法がJObjectを使うくらいしか無いので今回はモデルクラスを
作ってデシリアライズすることにします。

SssExtention

public class SssExtention
    {
        public bool isSet { get; set; }
        public bool signedFrag { get; set; }
        public object signedTx { get; set; }
        public object encryptMessage { get; set; }
        public string activePublicKey { get; set; }
        public string activeAddress { get; set; }
        public string activeName { get; set; }
        public int activeNetworkType { get; set; }
    }

モデルクラスを作るのが面倒だと思う方はJSONを渡せば
いい感じにクラスを作ってくれるquicktypeを使ったり

もしくはChatGPTにJsonを渡して「C#用のモデルクラス作って」みたいな感じでも作れます。

今後の流れ

まだ実装途中なのでwindow.SSSがあるかどうかしか取得していませんが、
そのうち送金周りを追記する予定です。