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」などの色名をチャットで送ると以下のようにウェブページの背景色が変わる.