ユーザースクリプト「ChatGPT Profile Badge」

概要 (Overview)

ChatGPTのウェブページにおいて、ユーザー情報が表示される箇所に任意の文字列（数文字程度のテキストや絵文字）を「バッジ」として追加表示するユーザースクリプトです。

導入 (Installation)

  1. Tampermonkey などのユーザースクリプトマネージャーをブラウザにインストールします。
  2. このリポジリのGitHub RAW URLにアクセスすると、スクリプトのインストールが開始されます。

設定 (Configuration)

v0.2.0から、ユーザースクリプトのメニューコマンドを通じてバッジのテキストを簡単設定できるようになりました。

  1. ブラウザのツールバーにあるTampermonkeyのアイコンをクリックします。
  2. 表示されるメニューから「Set Badge Text」を選択します。
  3. プロンプトが表示されたら、バッジとして表示したいテキストを入力し、「OK」をクリックします。
    • テキストを空にすると、バッジは非表示になります。
    • 設定は即座に反映されます。

この設定はTampermonkeyが提供するストレージに保存されます。

技術仕様 (Technical Specifications)

本スクリプトの実装に関する技術的な意思決定です。

パフォーマンス設計 (Performance Design)

バッジはページの初期表示に必須ではないため、ページの読み込みパフォーマンスに影響を与えないよう、MutationObserver を用いて非同期で描画処理を行います。これにより、目的のUI要素がDOMに出現した後に、遅延してバッジの描画が開始されます。

DOMセレクタ戦略 (DOM Selector Strategy)

ChatGPTのUIはクラス名が動的に変更される可能性があるため、セレクタは安定性を重視して選択されています。

ユーザー情報を示すプロファイルボタンは複数存在する可能性があるため、以下の手順で正確な要素を特定します。

  1. document.querySelectorAll('[data-testid="accounts-profile-button"]') を使用して、全てのプロファイルボタン要素を取得します。
  2. 取得したボタン要素を走査し、ユーザー名やプラン情報を含む .min-w-0 クラスの子要素を持つボタンを特定します。これが、バッジを注入する対象となる正しいプロファイルボタンです。
  3. 特定されたプロファイルボタンの内部で、ユーザー名が直接含まれる div.min-w-0 > div.flex という構造的セレクタを用いて注入箇所（nameContainer）を特定します。

このアプローチは、誤ったプロファイルボタンへの注入を防ぎ、より堅牢なバッジ表示を目指すものです。

描画ロジック (Rendering Logic)

開発 (Development)

プロジェクト構造 (Project Structure)

.
├── chatgpt-profile-badge.md      # この仕様書 (This document)
├── chatgpt-profile-badge.user.js # ユーザースクリプト本体 (The userscript source)
└── samples/                      # テスト用のサンプルファイル (Sample files for testing)
    ├── ...
    └── preprocess.py

テスト (Testing)

UIの変更やデバッグは、samples/ ディレクトリ内のHTMLファイルを用いて行います。これらのファイルは、開発効率向上のために前処理（不要な要素の削除など）が可能です。

前処理を行うには、samples/ ディレクトリで以下のコマンドを実行します。

pip install beautifulsoup4
python preprocess.py <target_html_file>

詳細は samples/samples.md を参照してください。

貢献ガイドライン (Contribution Guidelines)

メタデータ規約 (Metadata Conventions)

バージョン管理 (Versioning)

配布 (Distribution)

Install
v0.2.6