Twitter の「興味関心」をお掃除する

更新: Web

勝手に追加される X の「興味関心」を一括で外す Chrome 拡張機能の作り方を紹介します。

目次

Twitter (現X) の「興味関心」という設定は、表示内容のカスタマイズに使用されます。しかし意図せずビューポートに入れてしまったツイートに関連するトピックがいつの間にか追加されてしまうことがよくあります。

その結果、「おすすめ」のタブには興味のないポストが陳列され、それらを見てしまうとさらに興味のないトピックがお節介にも追加されるという悪循環に陥り、気がつけば強い言葉でビューを稼ぐポストのリストへ荒廃します。

Chrome 拡張機能を作る

「興味関心」の設定ページを開いた際に、あらかじめ指定した項目以外のチェックボックスを自動的に外す Chrome 拡張機能を作成します。チェックボックスを 1 つ外すごとに API エンドポイントへリクエストが送信されるため、短時間に多くのチェックを外そうとするとレートリミットに抵触してしまいます。そのため、時間はかかりますが、数秒おきに 1 つずつチェックを外すように実装します。

事前準備

設定のページ に行ってコンソールに以下の内容を貼り付けます。

console.log([...new Set([...document.querySelectorAll("div:has(> div[dir]):has(> div > input[type='checkbox'])")].map(el => `"${el.querySelector("div[dir]").textContent}",`))].join("\n"))

貼り付けが初めての場合はペーストする際に確認が求められますが、それを済ませてから貼りつけます。実行すると現在のチェックの状態に関わらず ON/OFF 設定可能な項目の一覧が表示されます。興味のあるトピック以外の行を削除してメモ帳にでも控えておきます。

コード

必要なファイルは以下の 2 つです。

twitter/manifest.json
{
  "name": "twitter",
  "description": "",
  "version": "0.0.1",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["https://x.com/settings/your_twitter_data/twitter_interests"],
      "js": [
        "browser.js"
      ]
    }
  ]
}
twitter/browser.js
const ALLOWED_TOPICS = new Set([
  // ここにさっき控えておいた興味のあるトピックのリストを貼り付ける。
])

const main = async () => {
  const topicEls = document.querySelectorAll("div:has(> div[dir]):has(> div > input[type='checkbox'])")

  if (!topicEls.length) {
    setTimeout(main, 2_000)
  }

  let clicked = false

  for (const topicEl of topicEls) {
    topicEl.scrollIntoView()
    topicEl.style.border = "blue 2px solid"

    if (clicked) {
      await new Promise(resolve => setTimeout(resolve, Math.round(5_000 * Math.random()) + 5_000))
    }

    const topicName = topicEl.querySelector("div[dir]").textContent
    const topicInput = topicEl.querySelector("div > input[type='checkbox']")
    clicked = false

    if (ALLOWED_TOPICS.has(topicName)) {
      if (!topicInput.checked) {
        topicInput.click()
        clicked = true
      }
    }
    else if (topicInput.checked) {
      topicInput.click()
      clicked = true
      topicEl.style.border = "red 2px solid"
      console.log(`OFF: ${topicName}`)
    }
  }
}

setTimeout(main, 3_000)

上記 2 つのコードを 1 つのフォルダー (今回は twitter) にまとめてわかりやすい場所において置きます。

インストール

Chrome 拡張機能の管理ページに行き、右上の「デベロッパーモード」を ON にします。そうしたら「パッケージ化されていない拡張機能を読み込む」というボタンを押下してさっき作ったフォルダーを選択します。

実行

Twitter 設定のページに行けば自動的にチェックを外す処理が実行されます。スキップされた項目は青枠、ON/OFF した項目は赤枠で囲まれます。設定ページをブックマークに保存しておき、定期的にお掃除してあげると良いと思います。