この Google Chrome プラグインを使用して ChatGPT プロンプト テンプレートを作成する

ChatGPT を使用する場合、同じプロンプトまたは同じプロンプトの一部を繰り返す必要があることがよくあります。

同じことを何度も入力するのは非常に面倒です。特に ChatGPT がチャットの目的を忘れた場合、特定のダイアログのコンテキストで同じリクエストを繰り返す必要があります。最初に、標準のプロンプトをテキストのメモ帳にコピーしました。

たとえば、次のようなプロンプトがありました。

• 次の文章を英語で要約してください。

• 次のテキストが英語の場合はイタリア語に翻訳し、イタリア語の場合は英語に翻訳します。

• 次のテキストに基づいて詩を作成します。

• 私の名前はイリヤです。この会話で何と答えるかを考えてください。

しかし、毎回テキスト文書を開いて、必要なプロンプトをコピーして貼り付けるのも不便です。言うまでもなく、私は非常に怠け者で、同じ行動を繰り返すのが好きではありません。

そして、Google Chrome 用のプラグインを作成するというアイデアを思いつきました。このプラグインを使用すると、ボタンを押すと、必要なプロンプトがテキスト入力フィールドに挿入され、ChatGPT インターフェイスにボタンを直接追加できます。

このプラグインは複雑ではないので、ここでそのコードを共有します。

まず、プラグインを配置する場所にディレクトリを作成します。 /gptinsertという名前を付けます

このディレクトリ内に、48x48 ピクセルのアイコンをすぐに作成し、 icon.pngという名前を付けることができます。

その後、次の内容のファイルmanifest.jsonを作成します。

 { "manifest_version": 3, "name": "ChatGPT textarea buttons", "version": "1.0", "permissions": ["activeTab"], "content_scripts": [ { "matches": ["https://chat.openai.com/*"], "js": ["content.js"] } ], "icons": { "48": "icon.png" } }

その後、モジュールの作業を実行するファイルを作成します。これにcontent.js という名前を付け、 JavaScript で次のコードを追加します。

 const insertText = (text) => { // Check if the page has a textarea. const textarea = document.querySelector('textarea'); if (textarea) { const startPosition = textarea.selectionStart; // The position of the cursor at the beginning of the selected text. const endPosition = textarea.selectionEnd; // The position of the cursor at the end of the selected text. const originalText = textarea.value; // The original text in the textarea. const newText = originalText.slice(0, startPosition) + text + originalText.slice(endPosition); // The new text in the textarea. textarea.value = newText; // Insert the new text into the textarea. textarea.focus(); // Focus on the textarea. textarea.selectionEnd = startPosition + text.length; // Set the cursor position at the end of the inserted text. textarea.selectionStart = startPosition + text.length; // Set the cursor position at the beginning of the inserted text. } }; // Create a button. const addButton = (title,text) => { const button = document.createElement('button'); // Create a button. button.textContent = `${title}`; // Set the button text. button.addEventListener('click', (event) => { event.preventDefault(); insertText(text); // Insert text into the textarea. }); return button; }; // Add buttons to the page. const init = () => { // Check if the page has a textarea. const textarea = document.querySelector('textarea').parentElement; if (textarea && !document.querySelector('.textarea-buttons')) { // Create a container for the buttons. const container = document.createElement('div'); container.className = 'textarea-buttons'; container.style.display = 'flex'; container.style.gap = '5px'; container.style.marginTop = '5px'; // Add buttons to the container. container.appendChild(addButton('Summarize','Summarize the following text in English: ')); container.appendChild(addButton('Translate','If the following text is in English, translate it into Italian, and if in Italian, then into English: ')); container.appendChild(addButton('Poem','Create a poem based on the following text: ')); container.appendChild(addButton('Response','My name is Ilya, write that I can answer my interlocutor in this dialogue: ')); // Add the container below the textarea. textarea.parentNode.insertBefore(container, textarea.nextSibling); } }; init(); // If the page uses dynamic elements, periodically check and add buttons if necessary. setInterval(init, 1000);

次に、このプラグインを Google Chrome に追加する必要があります。このためには、 [メニュー] -> [設定] -> [拡張機能] -> [Unpacked をロード]に移動し、プラグイン/gptinsertを含むディレクトリを開き、 [フォルダーの選択]ボタンをクリックします。

この後、プラグインのロゴがブラウザのアドレスバーの横に表示されます。

これで、使えるようになりました。これを行うには、 https://chat.openai.com/を開いて新しいチャットを作成するだけです。その後、チャットの下部に 4 つのボタン (要約、翻訳、詩、応答) が表示されます。

たとえば、[要約] を押すと、「次のテキストを英語で要約してください:」というプロンプトが入力フィールドに表示されます。

この後、サポートされている言語でテキストを挿入すると、ChatGPT がその簡単な内容と意味を出力します。

たとえば、「応答」ボタンの動作を確認してみましょう。

新しいボタンを追加する必要がある場合は、次のコードをcontent.jsファイルに追加するだけです。

 container.appendChild(addButton('My button','My prompt text: '));

保存後、ブラウザを再起動するだけですべてが機能します。

このようにして、無制限の数のボタンとプロンプトを追加できます。頻繁に使用すると、作業が大幅にスピードアップし、利便性が向上します ;)

GitHub リンク: https://github.com/sinenko/ChatGptPromptInsert