はじめに
拡張機能を開発している中でTwitterのAPIの情報を取得するのに困って調べてみましたが、
調べた感じ詳しいやり方がよく分からなかったので調べて出てきた情報を元に調査しました。
注意
2023/12/11時点で検証した内容です。
今後Twitter側で変更があった場合に使えなくなる可能性があります。
また、この記事では任意のツイートの情報を取得するわけではなく、
現在アクセスしているページの中にあるツイートの情報を取得するものです。
得られる情報は内部APIから取得したデータと同等と思われます。
Twitter内部APIにはアクセスしない方がいい
まず、Twitterの内部APIにはアクセスしないほうがいいです。
Twitter側の変更でAPIの通信に必要なパラメータが変更された際、
凍結やShadowBANの危険性があるので特に理由がない限りやめておいた方がいいです。
そのため、今回はアクセスしたページにある情報を使ってツイートの情報などを取得します。
仕組み
Twitterでは、React Propsにデータを保存しています。(多分)
このReact Propsにアクセスすることで、データを取得できます。
ツイートの取得方法
ツイートの大本のオブジェクトには、data-testid="cellInnerDiv"というプロパティが付けられています。
そのため、まずは取得したいツイートのオブジェクトを取得しましょう。
(ここでは仮にtweetelementという変数に保存したと思います。)
その後、データが保存されているエレメントを取得するにはこのようなquerySelectorを使用します。
(tweetdataelemはお好きな変数名に変えてください。)
const tweetdataelem = tweetelement.querySelector("div[role='group'][id]");
それでは次に、React Propsを取得していきましょう。
この場合、このようなコードで取得できるようです。
const reactPropsName = Object.getOwnPropertyNames(tweetdataelem).filter((n) => n.startsWith("__reactProps$"))[0];
const reactProps = tweetdataelem[reactPropsName];
後はReact Props内のツイートデータを取得すれば終わりです。
const tweetdata = tweetdataelem.children[1].props.retweetWithCommentLink.state.quotedStatus
取得した内容は辞書型として使用できます。
ブックマーク数や、そのツイートの投稿者の固定ツイなどまで取得できます。
ユーザーの取得方法(プロフィール画面)
こちらの場合、data-testid="UserName"というプロパティが付いたエレメントを取得してください。(ここでは仮にUsernameという変数名にします)
後はさっきと同じくReactPropsを取得してください。
後はReact Props内のユーザーデータを取得すれば終わりです。
reactProps.children[1].props.user;
内容はツイートデータ内のuserに入っているものと同じとなります。
おわり
今回は備忘録として書いてみました。
以上です。
クレジット
こちらのGithubリポジトリを参考に調べています。
https://github.com/Robot-Inventor/shadowban-scanner
また、こちらのページも参考にしています。
https://zenn.dev/roboin/articles/5744ef1ba48c03#react-propsの取得方法
ほとんどこの2ページのコードを参考にしています。ありがとうございます。
(この2つのページがなければ今頃ネット上で彷徨っていました。)