Open6

Twitter webのタイムラインをchrome拡張で整形する

問題点

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

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

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

before

  • タイトル + 広告

after

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

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

Who to follow

Topics to follow

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

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

イベント

  • この拡張では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は初回読み込み時のみ
  • ページ遷移後のタイミングを知るにはlongtasklayout-shiftを見るのが良さそう
ログインするとコメントできます