TweetDeckでツイートに含まれるリンク先の内容を表示するユーザスクリプト

Twitterでリンクを含むツイートをすると,リンク先の内容がカードとして表示されることがある.これはTwitter Cardと呼ばれており,リンク先のページが対応している場合に表示される.

f:id:sienori:20200624004341p:plain

しかし,公式クライアントであるTweetDeckではカードが表示されないので不便.

f:id:sienori:20200624004643p:plain

そこで,TweetDeckでツイートにカードを表示するためのユーザスクリプトを書いた.

gist.github.com

Greasemonkeyなどのブラウザ拡張機能にこのスクリプトを追加するとカードが表示されるようになる.

f:id:sienori:20200624004553p:plain

仕組みとしては,MutationObserverを利用してカラム上のツイートの追加を監視し,追加されたツイートにURLが含まれる場合はカードの内容をiframeとして追加する.カードの内容はhttps://twitter.com/i/cards/tfw/v1/ツイートIDというURLで得られる.このiframeは,読み込まれるとカードの情報をpostMessageで親フレームに通知する.具体的には,読み込みが開始されるとreadyというメッセージを送り,描画されるとresizeCardというメッセージでコンテンツの高さを送る.ユーザスクリプトからiframeの中身にアクセスすることは出来ないので,ここで得られた高さ情報をもとにiframeのリサイズを行っている.……のだが,場合によってresizeCardのメッセージが送られてこないことがあり,リサイズできず高さが初期値のままとなる.なぜresizeCardが発火しないのかは謎.不格好なので直したいが,とりあえず表示はされるので我慢して使っている.