shuhelohelo’s blog

Xamarin.Forms多めです.

SignalRを使って拡張機能経由でWebページを操作する

以前に記事を書いたリアルタイムチャットアプリ shuhelohelo.hatenablog.com

と,

Chrome拡張機能とサーバーをSignalRを使って接続する, shuhelohelo.hatenablog.com

の2つを使って,チャットアプリから送ったメッセージを拡張機能で受け取って,ウェブページのDOMを操作する.

サーバー側はメッセージを中継するだけなので特に変更はない.

拡張機能側もメッセージ受信時のイベントハンドラにDOMを操作する処理を追加するだけ.

以下のようにbody要素の背景色をチャットメッセージに入力した色に変更するようにする.

    //サーバーからのメッセージ受信時の処理
    connection.on('receive', function (message, from) { //サーバー側からこのreceiveが呼び出されたときに実行されるfunctionを登録する
        console.log(message);

        //メッセージが色名(blue,redなど)だった場合,背景色が変わる.
        $('body').css('background-color', message);
    });

この拡張機能Chromeにインストールして,適当なウェブページを開き,チャットサーバーを起動してメッセージを送る.

例えば,「red」,「yellow」などの色名をチャットで送ると以下のようにウェブページの背景色が変わる.

f:id:shuhelohelo:20191123111717p:plain