Twitterタイムラインの整形

• 要は広告を消したいわけだけど、探したらそういうchrome拡張は既にあった
  • Hide Twitter Ads - Block Promoted Tweets
• ただし、これを使っててもちょっとまだ不満があったので参考にして自作した
  • https://github.com/miyaoka/twitter-ad-cleaner
  • （あくまで自分用であって、ストアには登録しない）

問題点

Hide Twitter Adsを使っていて感じた問題点

プロモツイートのタイトル部分「Promoted Tweet」が残る

（日本語設定の場合だとこのタイトル部分は存在しない模様）

before

• タイトル + 広告

after

• タイトルだけ残ってる（下のやつは普通のツイート）

ツイートじゃないやつも消したい

Who to follow

Topics to follow

ページ遷移直後には消去されない

• スクロールすれば消えるけどちょっと気になる

Script ソース

• Hide Twitter Adsのソースが公開されていたのでどういう処理か見た
• https://github.com/ryanckulp/twitter_ad_blocker/blob/bbc6c642011b288002ad5548264b58c819463532/content.js
• 49行だけでシンプル

イベント

• この拡張では3つのイベントで消去を実行していた
  • load時
  • scroll時
  • Performance entry type の largest-contentful-paint 時
• 試してみると、loadイベントはそもそも発生していなかった（content scriptの実行のほうが遅い）ので不要

Twitterのタイムライン表示完了のタイミング

• PerformanceObserverを使い、LCPのタイミングを監視していた

ページ遷移のタイミング

• js的にURLの変更とかって検知できないんだっけって思ったけど、なんか調べても無さそうだった
• この拡張では対応してなかったけど、これもPerformanceObserverで検知できそう

PerformanceObserverとは

• IntersectionObserverやMutationObserver、ResizeObserverなどはあるのを知っていたけど、これは知らなかった
• https://developer.mozilla.org/ja/docs/Web/API/PerformanceObserver
• PerformanceObserver.supportedEntryTypesでサポートされているentryTypeの一覧が取得できる
  • 現環境だと['element', 'event', 'first-input', 'largest-contentful-paint', 'layout-shift', 'longtask', 'mark', 'measure', 'navigation', 'paint', 'resource']の11個

PerformanceEntry

new PerformanceObserver((list) => {
  console.log(list.getEntries().map((entry) => entry.entryType));
}).observe({
  entryTypes: PerformanceObserver.supportedEntryTypes.slice(),
});

どういうものがあるのか全エントリを監視してみる

resource読み込みが多くて邪魔なので、これは監視に含めないようにして再度実行

new PerformanceObserver((list) => {
  console.log(list.getEntries().map((entry) => entry.entryType));
}).observe({
  entryTypes: PerformanceObserver.supportedEntryTypes.filter(
    (entryType) => entryType !== "resource"
  ),
});

• LCPは初回読み込み時のみ
• ページ遷移後のタイミングを知るにはlongtaskかlayout-shiftを見るのが良さそう