【API不要】Twitterのリストを無料で出力する方法(自分用メモ)

はじめに

要素を特定できるクラスが全然なくて、多分、
人によってクラス名が違う可能性もありますので、他の方の環境でも動作することは保証できません。

何が問題か

ツイッターのリストって、エクスポートできないんですよ。
Twitter APIでリスト出力は可能なんですが、Basic以上のプラン契約が必要で、べらぼうにお金が必要なんですね。
ネットでリスト出力できるスクリプトも有料販売されていますが、私の場合、リストに登録しているユーザー数は100人程度なので、別にAPIやスクリプト使うほどのことでもないなと思いまして。
なんとか無料でできないかと模索した結果、できました。

実装

let resultArray = [];

function processElements() {
    const elements = document.querySelectorAll('div.css-175oi2r[data-testid="cellInnerDiv"]');

    elements.forEach(element => {
        const linkElement = element.querySelector('a.css-175oi2r.r-1wbh5a2.r-dnmrzs.r-1ny4l3l.r-1loqt21');
        const userElement = element.querySelector('div.css-146c3p1.r-dnmrzs > span.css-1jxf684');

        if (linkElement && userElement) {
            const link = linkElement.getAttribute('href');
            const user_id = userElement.textContent.trim();

            if (!resultArray.some(item => item.link === link)) {
                resultArray.push({ link, user_id });
            }
        }
    });
}

function logResults() {
    console.log(resultArray);
}

window.addEventListener('wheel', () => {
    processElements();
    logResults();
});

このスクリプトの仕組みについて

• マウスをスクロールするたびに実行します
• Twitterのリスト要素に対してループ処理をおこないます
• TwitterのアカウントリンクとアカウントIDをobjectにセットし、配列に格納します
• 当該のアカウントリンクをすでに追加済の場合は、配列にセットしません
• ループ処理完了後、コンソールログに配列を出力します

使い方

1. PCで、Webサイト版のTwitterに、ご自身のアカウントでログインします
   • ブラウザはChromeを推奨します。
2. 左サイドバーから三点リーダ(もっと見る)をクリックします
3. リストをクリックします
4. エクスポートしたい自分のリストをクリックします
5. リストを編集をクリックします
6. メンバーを管理をクリックします
   
7. 上記の画面の、一番上のユーザーが表示されている状態で、F12キーを押して開発者ツールを開きます
8. コンソール画面に、上の実装したスクリプトをコピペします
9. ゆっくり、リストの最後までマウススクロールします
   
10. コンソールログにユーザーのアカウントリンク先と、アカウントIDがリストアップされるので、右クリック > Copy Object をクリックします
11. 後はそのリストをいい感じに料理してください

以上