shuhelohelo https://blog.hatena.ne.jp/shuhelohelo/ shuhelohelo’s blog https://shuhelohelo.hatenablog.com/ SignalR WebExtension 以前に記事を書いたリアルタイムチャットアプリ shuhelohelo.hatenablog.com と, Chrome拡張機能とサーバーをSignalRを使って接続する, shuhelohelo.hatenablog.com の2つを使って,チャットアプリから送ったメッセージを拡張機能で受け取って,ウェブページのDOMを操作する. サーバー側はメッセージを中継するだけなので特に変更はない. 拡張機能側もメッセージ受信時のイベントハンドラにDOMを操作する処理を追加するだけ. 以下のようにbody要素の背景色をチャットメッセージに入力した色に変更するようにする. //サーバーからのメッセージ受信… 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fshuhelohelo.hatenablog.com%2Fentry%2F2019%2F11%2F23%2F111905" title="SignalRを使って拡張機能経由でWebページを操作する - shuhelohelo’s blog" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> https://cdn-ak.f.st-hatena.com/images/fotolife/s/shuhelohelo/20191123/20191123111717.png Hatena Blog https://hatena.blog 2019-11-23 11:19:05 rich https://shuhelohelo.hatenablog.com/entry/2019/11/23/111905 1.0 100%