Grok Conversation Highlighter with Dynamic Selection ユーザースクリプト

概要

この「Grok Conversation Highlighter with Dynamic Selection」ユーザースクリプトは、x.com 上の Grok 会話ページに特化して設計されています。このスクリプトは、特定の会話に存在する灰色で囲まれたハイライトされた項目を動的に見つけ出し、そこにある「もっと見る」ボタンをクリックし、そのボタンをシアン色でハイライトすることで、ユーザーの操作を支援します。また、会話を削除するためのカスタムボタンも追加します。

機能

このスクリプトは、以下の主要な機能を提供します。

• 会話削除ボタンの追加: Grok のページ上の特定の領域に、ゴミ箱アイコン付きのカスタム削除ボタンを挿入します。
  • この削除ボタンがクリックされると、「チャット履歴」ボタンをクリックしようとし、その後 processHistoryPane 関数を呼び出します。
• processHistoryPane 関数: この関数がスクリプトの中核ロジックを担います。
  • 外部の履歴コンテナが表示されるのを待機します。
  • 特定の灰色のラッパー (div.r-bqz1g2) を見つけるために、内部の履歴ペインを自動スクロールします。初期状態で見つからない場合は、複数回スクロールを試行します。
  • 灰色のラッパーが見つかると、その親となる <a> 要素を特定します。
  • リンクのハイライト表示: 特定された親 <a> 要素は、背景がオレンジ色、文字色が白色、パディング、角丸が適用され、表示領域にスムーズにスクロールされます。
  • このハイライトされたリンク内にある「もっと見る」ボタンを待機します。
  • 「もっと見る」ボタンをクリックし、その後、そのボタンをシアン色の背景、白色の文字色、パディング、角丸でスタイル設定します。
• イベントリスナー: ネイティブの「チャット履歴」ボタンがクリックされた場合にも processHistoryPane が再実行されるように、イベントリスナーが設定されています。

動作環境

• ターゲットウェブサイト: このユーザースクリプトは、x.com 上の Grok 会話ページに特化して動作するように設計されています。
  • URL パターン: https://x.com/i/grok?conversation=*
• ブラウザ拡張機能: Tampermonkey などのユーザースクリプトマネージャーで使用することを意図しています。

技術詳細 (バージョン 1.20)

• 動的な要素検出: waitFor 関数を使用して、DOM 内に特定の要素が出現するまで待機し、要素の動的なロードに対応します。
• DOM操作の深度: querySelector や closest などの標準 DOM メソッドを駆使して、必要な要素を正確に特定し、スタイルを適用します。
• CSSスタイルの直接適用: JavaScript を介して直接 CSS スタイルを適用し、ユーザーインターフェースを視覚的に強化します。
• スクロール操作: scrollBy や scrollIntoView を使用して、目的の要素がユーザーの視界に入るようにページを操作します。