Twitter タイムラインの自動リフレッシュを Electron アプリで実現

デスクトップでは Twitter を PWA で使っていますが、タイムラインが自動更新されないのがちょっと・・と思っていました。

かなり前に Electron で作ってた Twitter client

blog.kondoumh.com

このアプリに自動リフレッシュを組み込んでみようと思いました。定期的にホームボタンの click イベントを発火させるのが簡単そうです。

f:id:kondoumh:20200308134720p:plain

Chrome の DevTools で調べるとこのボタンは SVG 画像を a タグで囲んだもので、"data-testid" という属性を持っていました。DevTools の console では以下のようなコードで発火させられました。

document.querySelector("a[data-testid]").click();

Electron WebView では executeJavaScript メソッドで上記のコードを実行できます。

function clickHome() {
  webview.executeJavaScript('document.querySelector("a[data-testid]").click();');
}

あとは、setInterval で適当な間隔でこのfunction を呼び出せば、懐かしい感じにタイムラインが自動で流れていくようになりました。

追記) タイムライン以外の検索や通知の画面でリフレッシュされるのがうざいので、さらに調べたところ、メインカラムのタイトルが 「ホームタイムライン」になっているのがタイムライン選択状態のようです。そこで以下のようなコードを executeJavaScript に渡すといい感じにタイムラインの時だけリフレッシュしてくれるようになりました。

if (document.querySelector("h1[aria-level]").innerHTML === "ホームタイムライン") {
  document.querySelector("a[data-testid]").click();
}

Twitter 側のデザイン変更にとても弱そうな方式ではありますが。

github.com