X（旧Twitter）でホバーカード内のフォロー解除ボタンを無効化して誤クリックを防止した話

えきちょー（0番のりば）

2025年2月13日 10:25

(1) 前置き

突然ですがみなさん。
パソコンでX（旧Twitter）をブラウジングしていてこんな経験はないだろうか？

PCブラウザで X を閲覧中に…
TLや通知画面で意図せずユーザーアイコンにマウスオーバーしたことで…
突然ホバーカードがポップアップ表示されて…
誤操作で【フォロー解除】ボタンを押してしまった！

きっと……いや、絶対あるあるのはず。
ちなみに私は3日連続でやっちゃいました。

「そもそも、こんな頻繁に表示される場所に、一度はフォローやフォロバした人のフォロー解除ボタンって要らなくね？」

八つ当たりも甚だしいが、Xで検索してみるとそれなりに同意見や被害が見受けられたので一定の賛同は得られそうだった。

解決策がないかググってみたけど、すぐには見つからず……

ので。

ブラウザの拡張機能【Tampermonkey】を使って ホバーカード内のフォロー解除ボタンの非活性化する処理 を自作することにしました。

挙動としては、フォロー解除ボタンを見えなくするか、押せなくすればいいだけだからね。ユーザースクリプトでごにょごにょします。

(2) 実装用コード（ユーザースクリプト）

さて、前置きはここまで。
【Tampermonkey】等に下記ユーザースクリプトを追加するだけ。

// ==UserScript==
// @name         X（Twitter）フォロー解除ボタン無効化（ホバーカード内のみ）
// @namespace    https://zeroban-noriba.com/
// @version      1.0
// @description  ホバーカード内のフォロー解除ボタンを無効化して誤クリックを防止
// @match        https://*.x.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // ボタンを無効化する関数
    function disableUnfollowButtonsInHoverCards() {
        // data-testidがhoverCardParentの要素を取得
        const hoverCards = document.querySelectorAll('[data-testid="hoverCardParent"]');
        hoverCards.forEach(hoverCard => {
            // ホバーカード内のdata-testidが-unfollowで終わるボタンを取得
            const unfollowButtons = hoverCard.querySelectorAll('button[data-testid$="-unfollow"]');
            unfollowButtons.forEach(button => {
                // aria-disabled属性をtrueに設定して無効化を示す
                button.setAttribute('aria-disabled', 'true');
                // クリックイベントを無効化
                button.addEventListener('click', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    alert('このボタンは無効化されています。');
                });
                // 視覚的に無効化を示すためのスタイルを適用
                button.style.opacity = '0.5';
                button.style.pointerEvents = 'none';
            });
        });
    }

    // DOMの変化を監視して、新しいホバーカードが追加されたら無効化
    const observer = new MutationObserver(disableUnfollowButtonsInHoverCards);
    observer.observe(document.body, { childList: true, subtree: true });

    // 初回実行
    disableUnfollowButtonsInHoverCards();
})();

※2025年2月12日時点では正常に動作しています

これでホバーカード内のフォロー解除ボタンだけが非活性になって押せなくなります！やったー！

(3) 拡張機能【Tampermonkey】ってなんぞ？

拡張機能や Tampermonkey の詳しい説明や導入方法は省きます。
どちらも知らない人はググってみよう！
ここでは「概要」と「よくある設定漏れ」についてだけ解説します。

「Tampermonkey」って？

ウェブブラウザで動作するユーザースクリプトマネージャーの一つ。例えば、特定のサイトのレイアウトを変えたり、不要な要素を非表示にしたり、便利な機能を追加したりできるブラウザの拡張機能。

「Tampermonkey」が動かない！

ユーザースクリプトを動作させるには、ブラウザの設定から【デベロッパーモード】をONにする必要があります。
Chromeの場合は下記の通り。

アドレスバーに「chrome://extensions」と入力
右上のデベロッパーモードをONにする

これでユーザースクリプトが動作するようになります。

(4) フォロー解除したい時は？

今回のユーザースクリプトでは、あくまで
「ホバーカード内のフォロー解除ボタンを無効化しただけ」
なので、フォローを外したいユーザーのプロフィールまたはフォローやフォロワーの一覧画面にいけば普通にフォロー解除できます。
もしくは Tampermonkey を一時的に無効 にすればOK。

(5) ご利用は自己責任で！

最後に、Xのサービスやユーザーに悪影響を与えるものでもなく、あくまで 特定のボタンの誤クリックを防止する目的 なので大丈夫だとは思うけど、ご利用は自己責任でお願いします。

これでタイムラインや通知一覧でイライラする日々とはおさらばだ！
おしまい。

▼えきちょー｜X
https://x.com/zeroban_noriba