Yapping拡張(Auto Yapping)
概要
Auto Yapping(Yapping-extension)は、Twitter/X の返信ボックスに「AI返信ボタン」を追加して、選んだLLMプロバイダで短い返信文を自動生成し、プレビューの確認後にワンクリックで返信欄へ挿入できる軽量ブラウザ拡張です。Groq(llama-3.1-8b-instant)、OpenAI(gpt-4o-mini)、Gemini(1.5-flash)などのプロバイダをプロバイダースイッチャーで切り替えられ、各プロバイダごとにAPIキーを保存できます。ユーザーはデフォルトのカスタムプロンプトを編集してローカルに同期し、オプション画面から設定を管理します。拡張は主にJavaScriptで実装され、manifest.json と content script によるDOM注入で動作します。
リポジトリの統計情報
- スター数: 3
- フォーク数: 0
- ウォッチャー数: 3
- コミット数: 3
- ファイル数: 7
- メインの言語: JavaScript
主な特徴
- Twitter/X の返信ボックスにAI返信ボタンを注入し、生成テキストのプレビューを表示してから挿入可能。
- Groq、OpenAI、Gemini など複数のLLMプロバイダをサポートし、プロバイダごとにAPIキーを管理。
- カスタムプロンプトを chrome.storage.sync で同期保存し、簡単にプロンプトを切り替えられる。
- オプションページを備え、プロバイダ設定やプロンプト編集が可能なシンプル設計。
技術的なポイント
この拡張は比較的シンプルなアーキテクチャで、主にコンテンツスクリプト(content.js)を使って Twitter/X のDOMにインタラクティブなUI要素を注入する方式を採っています。manifest.json はおそらく Manifest V3 に準拠しており、必要な権限(tabs、storage、activeTab 等)と content script のマッチングパターンを定義して、ツイートの返信フォームを検出してボタンを差し込む役割を果たします。
AI呼び出し部分は各プロバイダに対する抽象化が行われており、README に記載されているプロバイダ名(Groq、OpenAI、Gemini)とモデル名をキーとして切り替え可能です。ユーザーが入力したAPIキーやカスタムプロンプトは chrome.storage.sync に保存されるため、同一Googleアカウントでのブラウザ同期が有効な環境では設定を共有できます。生成フローは次のような流れです:返信ボタン押下 → 現在のツイート文脈と(オプションで)ユーザーのカスタムプロンプトを組み合わせてリクエストを構築 → 選択されたプロバイダのAPIへ非同期リクエスト → 戻り値を受けてプレビュー表示 → 確認後に返信欄へ挿入。また、ネットワーク失敗やAPI制限時の簡易エラーハンドリングが想定されており、拡張自体はUIの注入とリクエスト中の状態管理(ローディング表示など)に重きを置いています。
コード構成は軽量で、content.js がDOM監視(MutationObserver 等)で新しい返信ボックスを検出しボタンを付与、options.js と options.html が設定保存/読み込みUIを提供します。セキュリティ面ではAPIキーをブラウザストレージに格納するため、拡張をインストールするユーザーはキー管理に注意が必要です。将来的にはバックグラウンドワーカーを介したプロキシやキー暗号化の導入、より高度なコンテキスト生成(スレッド解析、トーン調整)などの拡張が考えられます。
プロジェクトの構成
主要なファイルとディレクトリ:
- README.md: プロジェクトの概要、使い方、サポートするプロバイダとモデル、機能説明を記載したドキュメント。
- content.js: Twitter/X のページに注入されるスクリプト。返信ボタンの作成・イベント登録、プレビュー表示、選択されたプロバイダへのリクエスト発行、生成テキストの挿入処理を担当。MutationObserver による返信フォーム検出や、非同期API呼び出し、UI状態(ローディング/エラーメッセージ)の管理が含まれる。
- manifest.json: 拡張のメタ情報、権限、コンテンツスクリプトのマッチング、オプションページやアイコンなどを定義。Manifest V3 想定の service_worker 設定や permissions が含まれる可能性が高い。
- options.html: ユーザーがプロバイダ設定(選択、APIキー入力)、デフォルトプロンプト編集を行うための設定画面。UI はシンプルで、各入力フォームと保存ボタンを備える。
- options.js: options.html と連携して chrome.storage.sync への読み書きを行い、プロバイダ毎のキー管理、プロンプトの保存・ロード、UIの初期化を担当。
- …他 2 ファイル(恐らくアイコンファイルや小さなユーティリティ、マニフェスト関連の補助ファイルなど) ファイル数が少ないため、拡張は学習用や個人ユースを想定した最小限の実装がなされており、機能追加やプロバイダ追加は比較的容易です。
まとめ
Twitter/X に手早くAI生成の短文返信を追加する、実用的で拡張しやすい軽量ブラウザ拡張です。
リポジトリ情報:
- 名前: Yapping-extension
- 説明: 説明なし
- スター数: 3
- 言語: JavaScript
- URL: https://github.com/Lo9ic/Yapping-extension
- オーナー: Lo9ic
- アバター: https://avatars.githubusercontent.com/u/31589259?v=4
READMEの抜粋:
Auto Yapping by Lo9ic
Browser extension for Twitter/X that adds an AI reply button to tweet reply boxes. Generates short, in-language replies using your chosen LLM provider.
Features
- Reply button injected into Twitter/X reply boxes with floating preview and one-click insert.
- Provider switcher with per-provider keys: Groq (llama-3.1-8b-instant), OpenAI (gpt-4o-mini), Gemini (1.5-flash).
- Custom prompt (blank by default) stored locally via
chrome.storage.sync. - Options page and tool…