夜になると #安倍やめろ #〇〇法案に反対します #東京五輪の中止を求めます などの政治的な発言をハッシュタグに付けてトレンドに入れる遊びをしている方々がたくさんいて非常にうざい。

個人的にはわざわざTwitterのトレンドを見に行くようなことはしないが、サイドに出てくるのはどうしても目に入ってきてしまうので、こいつらを非表示にしていきます。

ハッシュタグのパターン

いくつかのユーザーを調べてみた結果、
#〇〇〇〇〇〇ます ってパターンのハッシュタグを消せば８割方いけそう。

「#」から始まって、「ます」で終わる文字列を正規表現にするとこんな感じ。
/^#.+ます$/

const ngList = [
    /^#.+ます$/,
    '#安倍やめろ',
    'オリンピック',
];

後からでも追加できるように配列形式にしました。

TwitterのDOM取得

idやclassに振られている名前はデプロイ時に生成されている系っぽく簡単に変わってしまいそうなので、
一番変更が少なそうな aria-label を使わせてもらいます。
アクセシビリティに配慮しているページはこういうときにも便利
document.querySelectorAll('[aria-label="タイムライン: トレンド"] > div > div')

目当ての要素を探しだした後、最初は
element.remove(); でDOMごと削除してしまったら、モジュールの更新時にエラーになってしまったので、
element.style.display = 'none'; という感じで非表示対応にしました。

完成形

removeTrend.js

(() => {
  const ngList = [
    /^#.+ます$/,
    '#安倍やめろ',
    'オリンピック',
  ];

  setInterval(() => {
    document.querySelectorAll('[aria-label="タイムライン: トレンド"] > div > div').forEach((element) => {
      const tag = element.querySelector('[dir="ltr"]');
      if (!tag) {
        return;
      }

      ngList.forEach((ng) => {
        if (tag.textContent.match(ng)) {
          element.style.display = 'none';
        }
      });
    });
  }, 500);
})();

ちゃんと消えた。

Chrome Extension 化

Google Chromeの機能拡張として読み込ませる。
manifest.json を作成して chrome://extensions のページから追加します。

manifest.json

{
    "manifest_version": 2,
    "name": "remove trend",
    "version": "1.0",
    "description": "my extension",
    "icons": {
        "86": "images/icon.png"
    },
    "content_scripts": [
        {
            "matches": [
                "https://twitter.com/*"
            ],
            "js": [
                "removeTrend.js"
            ]
        }
    ]
}

これで twitter.com を開いたときに常にスクリプトが実行されるようになります。