chatgpt-smartnavbar
ChatGpt-SmartNavbarは、ChatGPTプラットフォームでプロンプトを管理および使用するプロセスを合理化および加速するように設計されたChrome拡張機能です。インタラクティブなNAVBAR、スマートドロップダウンメニューなどの機能を備えたユーザーエクスペリエンスを向上させ、迅速な迅速なアクセス、動的オプションフィルタリング、効率的なキーボードナビゲーションを強化します。この拡張機能は、迅速な作成、組織、および検索の速度と容易さを改善することに焦点を当てたモダンで直感的なインターフェイスを提供します。
特徴
- Dynamic Navbar ：chatgptのUIにレスポンシブでインタラクティブなNavbarを追加します。
- スマートドロップダウンメニュー：カスタマイズ可能なキーを入力した後、ユーザー入力に基づいてドロップダウンを動的に生成します（デフォルトは
<< ）。 - キーボードナビゲーション：矢印キーを使用してドロップダウンオプションをナビゲートし、「Enter」で選択します。
- プロンプトの作成と管理：ユーザーは、独自のプロンプトを作成して、迅速なアクセスのためにカスタムカテゴリに保存できます。
- プロンプトのカスタムカテゴリ：ユーザーは、独自のプロンプトカテゴリを作成、名前を変更、削除できます。プロンプトは、カテゴリ間で簡単に移動できます。
- プロンプト管理：ユーザーは、任意のカテゴリにプロンプトを追加、編集、削除して、組織を簡単にすることができます。
- シームレスなカテゴリの割り当て：直感的なインターフェイスを使用して、異なるカテゴリ間の迅速な割り当てと再割り当てを容易にします。
- Tailwind CSSスタイリング：Tailwind CSSを使用したクリーン、モダン、およびカスタマイズ可能なスタイリング。
- パフォーマンスに最適化：効率的なDOMオブザーバーを使用した高速でレスポンシブな相互作用。より多くのプロンプトとカテゴリが追加されるにつれて、パフォーマンスがスムーズに保つことを保証します。
- ユーザーの設定：拡張機能は、プロンプトカテゴリ、プロンプトオーダー、その他のカスタマイズなどのユーザー設定を節約し、セッション全体でパーソナライズされたエクスペリエンスを確保します。
新機能と改善
強化された検索機能：検索エンジンは、より柔軟で直感的な検索をサポートするようになりました。ユーザーは、スペース、部分的な単語、または複数の単語フラグメントが含まれている場合でも、IDを検索できます。たとえば、プロンプトカテゴリに「設計パターン」または「データベース統合」という名前の場合、ユーザーは以下を使用して検索できるようになりました。
-
Design -
Pat -
Dark -
Codeこれにより、より柔軟なマッチングロジックに基づいて結果を絞り込むことにより、検索エクスペリエンスが向上します。ドロップダウンは、ユーザーのクエリに最も近い一致を強調し、より速い選択を可能にします。
ドロップダウン動作の改善：ドロップダウンは、ユーザーがタイピングを開始すると、最も近い一致をインテリジェントにホバーするため、「Enter」を押すと最高の一致が自動的に選択されます。これは、偶然に無関係なオプションの選択を避けるのに役立ちます。さらに、オプションを挿入した後、ドロップダウンはより効率的に非アクティブになり、挿入後にカーソル配置を適切に処理して、検索トリガーキーに干渉しないようにします。
Newlineを使用したテキストのフォーマット：ドロップダウンメニューからオプションを選択した後、挿入されたテキストには自動的にNewlineが含まれます。これにより、カーソルが新しく挿入されたテキストの後ろに誤ってジャンプし、よりスムーズなタイピングエクスペリエンスを確保する問題が解決します。
カスタマイズ可能なドロップダウンアクティベーションキー：ユーザーは、デフォルト<<ではなくドロップダウンメニューをトリガーする独自のキーを設定できるようになりました。このカスタマイズは、拡張機能のポップアップで利用でき、さまざまなワークフローに対してより柔軟性を提供します。
エラー処理とUIの改善：拡張機能は、プロンプト、カテゴリ、またはアクティベーションキーに変更を保存するための生のアラートメッセージを表示しなくなりました。代わりに、通知は、邪魔にならない、視覚的に魅力的な方法で表示され、ユーザーエクスペリエンスが向上します。カテゴリIDとプロンプトの両方のインライン編集機能は同じポップアップウィンドウにあるため、異なるメニュー間でジャンプせずに両方の要素を簡単に変更できます。
将来の改善
- 洗練されたカーソルの動作：さらに改善は、複数のプロンプトが迅速に追加される複雑なシナリオであっても、プロンプト挿入後にカーソルが最適に配置されるようにすることに焦点を当てます。
- 改善されたユーザーインターフェイス：ポップアップメニューのデザインを合理化して、プロンプトとカテゴリの編集をさらに直感的にし、邪魔なアラートなしで保存するなどのアクションに対してより良い視覚フィードバックを追加します。
- 高度な検索機能：検索の改良を続けて、タイプミスの許容範囲や、より大きなプロンプトライブラリのより良いサポートなど、さらに柔軟なマッチングロジックを処理します。
- 推奨システム：ユーザーの動作に基づいて、最も頻繁に使用されるプロンプトの推奨機能を改善または追加します。これにより、速度と効率を最大化するための使用に基づいて、カテゴリとプロンプトを自動的に並べ替えます。
- デザインの強化：ドロップダウン、Navbar、およびポップアップのデザインを改善し、Tailwind CSSを使用してより洗練されたモダンなスタイルを追加して、より良いユーザーエクスペリエンスを提供します。
考慮すべき追加機能
- クラウド同期：クラウドストレージを使用して、複数のデバイスでユーザーがプロンプトとカテゴリを同期できるようにします。これにより、ユーザーエクスペリエンスが手動のエクスポート/インポートなしで環境全体で一貫していることが保証されます。
- エクスポートとインポートプロンプト：プロンプトとカテゴリをJSONファイルとしてエクスポートする機能を追加します。これは、後で拡張機能にインポートできます。これは、バックアップの目的や、他の人と迅速なコレクションを共有するために役立ちます。
- タグ付けとフィルタリング：プロンプトのタグ付けシステムを導入し、ユーザーがタグでフィルタリングおよび検索できるようにします。これは、プロンプトの大規模なコレクションをより効率的に管理するのに役立ちます。
- コンテキスト認識の推奨事項：会話のコンテキストに基づいて、役立つ可能性のあるプロンプトを推奨します。これにより、AIまたは基本的なキーワード検出を活用できます。
- AIアシストプロンプト作成：一般的な構造または作成した以前のプロンプトに基づいて、新しいプロンプトを作成するときに、ユーザーに提案または自動コンプリート機能を提供します。
- ダークモード：拡張機能のUIでダークモードのサポートを追加するため、低光環境で作業するユーザーにとって視覚的に快適になります。
- マルチプラットフォームのサポート：拡張機能の機能を拡張して、ChatGPTだけでなく、Claude、Geminiなどの他の人気のあるAIプラットフォームでも動作します。これにより、ユーザーは複数のAIサービスでプロンプトを管理および利用できるようになり、ChatGptを超えた汎用性と有用性が向上します。
インストール
前提条件
- node.js（バージョン12以降）
- NPM（ノードパッケージマネージャー）
アプリを構築します
拡張機能のCSSを構築するには、次のコマンドを使用します。
依存関係をインストールします：
Tailwind CSSを構築します：
使用法
- 上記の手順を使用して、拡張機能のCSSを構築します。
-
chrome://extensions/に移動することにより、拡張機能をChromeにロードします。 - 開発者モードを有効にし、[ロード]ロード」をクリックして、
distフォルダーを選択します。 - 拡張機能は、chatgptページ（https://chatgpt.com/*）でアクティブになります。
貢献
お気軽に問題を開き、プロジェクトを改善するためにプルリクエストを送信してください。コードの清潔さと読みやすさの観点から、必ずベストプラクティスに従ってください。
Chatgpt-Smartnavbarで生産性を向上させてください！
