Twitterアカウント位置をユーザー名に表示するChrome拡張
概要
Twitter Account Location Flag Chrome Extensionは、Twitter/Xのユーザー名の横に国旗の絵文字を表示するブラウザ拡張です。各アカウントのプロフィールに記載されている「location」フィールドを取得するために、TwitterのGraphQL APIをクライアントサイドから問い合わせます。動的に読み込まれるタイムライン(インフィニットスクロール)やページ遷移にも対応するように設計されており、取得結果はローカルでキャッシュして不要なAPI呼び出しを減らします。拡張はシンプルかつ軽量で、DOMの監視と差分挿入でユーザー名要素にフラグを付与します。(約300字)
リポジトリの統計情報
- スター数: 6
- フォーク数: 3
- ウォッチャー数: 6
- コミット数: 4
- ファイル数: 8
- メインの言語: JavaScript
主な特徴
- TwitterのGraphQL APIをクライアントサイドで呼び出してアカウントのlocationを取得
- 取得したlocation文字列を元に国旗の絵文字を表示
- インフィニットスクロールなど動的に追加されるコンテンツにも対応
- ローカルでのキャッシュによりAPIコールを抑制
技術的なポイント
この拡張は基本的にコンテンツスクリプト(content.js)中心に動作します。DOM上のユーザー名要素を検出し、該当するアカウントの識別子(ユーザーIDやスクリーンネーム)を使ってTwitterのGraphQLエンドポイントへフェッチを行い、プロフィールのlocationフィールドを取得します。locationは任意のテキストであるため、そのまま国情報に対応付けるのではなく、countryFlags.jsに含まれる国名や地域名のマッピング表と突き合わせることで、最も近い国旗絵文字を選定します。
動的コンテンツ対応はMutationObserverを用いてDOM変化を監視するか、定期的にページ内の未処理要素をスキャンする方式で実装されていることが想定されます。API呼び出しの回数を抑えるため、拡張は取得結果をローカルストレージあるいはインメモリのキャッシュに保持し、既に解決済みのアカウントについては再問い合わせを行いません。キャッシュはキーをユーザーIDやスクリーンネームにし、必要に応じてTTL(有効期限)を設けることで古い情報の再取得を制御できます。
技術的な課題としては、TwitterのGraphQL APIが非公開仕様であり、エンドポイントやレスポンス形式が予告なく変更される点、そしてlocationフィールド自体がユーザーの任意入力で曖昧かつ多言語混在になる点が挙げられます。これに対する実用的な対策としては、部分一致や正規表現、多言語の国名リスト、曖昧マッチの重み付けなどを導入することが有効です。さらに、将来的に認証が必要になるケースやレート制限に備え、バックグラウンドスクリプトやキューイング、リトライ戦略を実装しておくと堅牢性が増します。
拡張の設計はクライアント完結型のシンプルモデルであり、拡張自体は軽量ですが、プライバシー面ではユーザーが閲覧するアカウント情報に対して外部APIコールが発生する点に留意が必要です。manifest.json(拡張の権限)やCSP、クロスオリジンリクエストの扱いも実際に動作させる際は確認してください。(約700字)
プロジェクトの構成
主要なファイルとディレクトリ:
- .gitignore: file
- README.md: file
- content.js: file
- countryFlags.js: file
- manifest.json: file
…他 3 ファイル
(content.js)
- DOMのスキャン、MutationObserverによる動的要素検出、Twitter GraphQL APIへのfetch、取得結果から国旗を生成してユーザー名横に挿入する処理がここにまとまっている想定です。
(countryFlags.js)
- 国名・地域名と対応する絵文字フラグのマッピングを保持。多言語や別名を含めてマッチングのベースデータになっています。
(manifest.json)
- 拡張のメタ情報、権限、コンテンツスクリプトの適用先(Twitterドメイン)などを定義します。Chrome拡張(Manifest V2/V3)に準拠した記述が含まれます。
まとめ
クライアント側で完結する手軽なChrome拡張で、Twitterのプロフィールlocationを可視化してUXを改善する実用的なツールです。(約50字)
リポジトリ情報:
- 名前: twitter-account-location-in-username
- 説明: 説明なし
- スター数: 6
- 言語: JavaScript
- URL: https://github.com/RhysSullivan/twitter-account-location-in-username
- オーナー: RhysSullivan
- アバター: https://avatars.githubusercontent.com/u/39114868?v=4
READMEの抜粋:
Twitter Account Location Flag Chrome Extension
A Chrome extension that displays country flag emojis next to Twitter/X usernames based on the account’s location information.
Features
- Automatically detects usernames on Twitter/X pages
- Queries Twitter’s GraphQL API to get account location information
- Displays the corresponding country flag emoji next to usernames
- Works with dynamically loaded content (infinite scroll)
- Caches location data to minimize API calls
Installation
1…