X(Twitter)のタイムラインで画像・動画付きツイートを非表示にする

X(Twitter) でテキスト主体のタイムラインを見たい時、画像や動画付きツイートが邪魔になることがある。「画像のみ表示」の逆で、画像・動画付きツイートを非表示にしてテキストだけを表示する方法。

何ができるか

画像・動画が含まれるツイートを自動で非表示
テキストのみのツイートだけが表示される
読み物としてのタイムラインに集中できる
ワンクリックで ON/OFF 切り替え可能（拡張機能版）

方法1: ブックマークレット版

インストール不要で、ブックマークレットを作成するだけ。

手順

Chrome で新しいブックマークを作成（ブックマークバーを右クリック → 「ページを追加」）
名前を「Twitter テキストのみ」などに設定
URL に以下のコードを貼り付け：

javascript:(function(){const id='twitter-text-only';let s=document.getElementById(id);if(s){s.remove();}else{s=document.createElement('style');s.id=id;s.textContent='div[data-testid="cellInnerDiv"]:has(article):has(div[data-testid="tweetPhoto"]),div[data-testid="cellInnerDiv"]:has(article):has(video){display:none!important;}';document.head.appendChild(s);}})();

使い方

X(Twitter) のタイムラインを開く
作成したブックマークレットをクリック
画像・動画付きツイートが非表示になる
もう一度クリックすると解除される（トグル動作）

方法2: Chrome 拡張機能版

ページを開くたびに自動で適用される拡張機能を作成する。

1. フォルダ構成

twitter-text-only-filter/
├── manifest.json
├── content.js
├── popup.html
└── popup.js

2. manifest.json

{
  "manifest_version": 3,
  "name": "Twitter Text Only Filter",
  "version": "1.0",
  "description": "X(Twitter)で画像・動画付きツイートを非表示にしてテキストのみ表示",
  "permissions": ["storage", "activeTab"],
  "content_scripts": [
    {
      "matches": ["https://x.com/*", "https://twitter.com/*"],
      "js": ["content.js"],
      "run_at": "document_end"
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

3. content.js

chrome.storage.sync.get(['enabled'], function(result) {
  if (result.enabled) applyFilter();
});

chrome.storage.onChanged.addListener(function(changes) {
  if (changes.enabled) {
    changes.enabled.newValue ? applyFilter() : removeFilter();
  }
});

function applyFilter() {
  const existing = document.getElementById('twitter-text-only-filter');
  if (existing) existing.remove();

  const style = document.createElement('style');
  style.id = 'twitter-text-only-filter';
  style.textContent = `
    div[data-testid="cellInnerDiv"]:has(article):has(div[data-testid="tweetPhoto"]),
    div[data-testid="cellInnerDiv"]:has(article):has(video) {
      display: none !important;
    }
  `;
  document.head.appendChild(style);
}

function removeFilter() {
  const style = document.getElementById('twitter-text-only-filter');
  if (style) style.remove();
}

4. popup.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { width: 200px; padding: 15px; font-family: sans-serif; }
    label { display: flex; align-items: center; cursor: pointer; }
    input[type="checkbox"] { margin-right: 8px; }
  </style>
</head>
<body>
  <label>
    <input type="checkbox" id="toggle">
    テキストのみ表示
  </label>
  <script src="popup.js"></script>
</body>
</html>

5. popup.js

const toggle = document.getElementById('toggle');
chrome.storage.sync.get(['enabled'], function(result) {
  toggle.checked = result.enabled || false;
});
toggle.addEventListener('change', function() {
  chrome.storage.sync.set({ enabled: toggle.checked });
});

6. 拡張機能のインストール

Chrome で chrome://extensions/ を開く
右上の「デベロッパーモード」をオン
「パッケージ化されていない拡張機能を読み込む」をクリック
作成したフォルダを選択

仕組み

CSS の :has() 擬似クラスで、画像・動画を含むツイートを特定して非表示にしている。

div[data-testid="tweetPhoto"] を持つセル → 画像付きツイート
video 要素を持つセル → 動画付きツイート

注意

X(Twitter) の仕様変更で将来的に動作しなくなる可能性がある。
ブックマークレット版はページをリロードすると解除される。