Web Twitter の初期選択タブを「フォロー中」にする Chrome Extension を作りました

Chrome Extension Twitter JavaScript

chrome.google.com

最近の変更で https://twitter.com/home を開くと初期選択タブが「おすすめ」になってしまい、毎回手動で「フォロー中」に切り替えるのが面倒で Chrome 拡張を作りました。ソースコードは GitHub で公開しています。

Tweak New Twitterという拡張もあって、これでも同じようなことはできるんですが、おすすめタブが消えてしまいます。おすすめタブは残しておきたいし、その他の機能は不要なので起動時にタブをフォロー中にするだけの拡張を作りました。

挙動としては単純で、https://twitter.com/home にアクセスした時に自動でフォロー中タブになっています。おすすめタブも残っているので、おすすめタブが見たくなったらおすすめタブをクリックして普通に閲覧ができます。

ガッと作ったのでバグがあるかもしれませんが、手元では動作しているのでよければ使ってみてください。

ソースコード

github.com

コードは GitHub に公開しています。

最初実装しようとした時は document_end でおすすめタブに切り替えたらいいかな〜と思ったんですが、 Twitter が SPA なためか? document_end や DOMContentLoaded ではうまく動作せず body を observe して div[role="tablist"] を検知したらフォロー中タブをクリックしています。

var tablistObserver;
const bodyCallback = () => {
  const tablist = document.querySelector('div[role="tablist"]');
  if (!tablist) {
    return;
  }

  const followingTab = [...tablist.children].find(c => c.textContent === 'フォロー中' || c.textContent === 'Following');
  const aTag = followingTab.getElementsByTagName('a')[0];
  aTag.click();
  tablistObserver.disconnect();
  tablistObserver = undefined;
};

const observeBody = () => {
  if (!tablistObserver) {
    observing = true;
    tablistObserver = new MutationObserver(bodyCallback);
    const body = document.querySelector('body')
    const config = { childList: true, subtree: true };
    tablistObserver.observe(body, config);
  }
}

また、これだけだと他のページから遷移してきた時にうまく動作しません。ページ遷移を検知するために head を監視して画面遷移を検知しています (本当は URL の変更を検知したかったのだが Chrome extension でそれをやるには面倒臭そうな感じがして head の監視で妥協した)

var firstHome = true;
const headCallback = () => {
  const isHome = location.pathname == '/home';
  if (firstHome && isHome) {
    observeBody();
    firstHome = false;
  }
}

const head = document.querySelector('head');
const observer = new MutationObserver(headCallback);
const config = { subtree: true, characterData: true, childList: true };
observer.observe(head, config);

このあたりの処理のせいで無駄に observe が発生してしまい重くなる懸念があり、また冪等性がない実装になっているのがあまり良くない。

審査について

Chrome 拡張には審査が必要で、一度 Reject された。

提供されている説明が、アイテムの機能を理解するのに十分でない。

とのことで、確かに説明が薄かったので説明を追加したところ審査が通りリリースされた。初回の審査は半日くらいかかったけど、アップデートの審査時間は数分でできているのでアプデでは機械的な審査しかしてなさそう。

おわり