paint-brush
Erstellen Sie ChatGPT-Eingabeaufforderungsvorlagen mit diesem Google Chrome-Pluginvon@sinenko
2,639 Lesungen
2,639 Lesungen

Erstellen Sie ChatGPT-Eingabeaufforderungsvorlagen mit diesem Google Chrome-Plugin

von Ilya Sinenko5m2023/06/02
Read on Terminal Reader
Read this story w/o Javascript

Zu lang; Lesen

Mit dem ChatGPT-Plugin von Ilya können Sie Schaltflächen direkt zur Chat-Oberfläche hinzufügen. Die erforderliche Eingabeaufforderung wird in das Texteingabefeld eingefügt. Das Plugin ist nicht kompliziert und ich werde seinen Code hier mit Ihnen teilen. Der Code ist in JavaScript geschrieben und kann von GitHub heruntergeladen werden.
featured image - Erstellen Sie ChatGPT-Eingabeaufforderungsvorlagen mit diesem Google Chrome-Plugin
Ilya Sinenko HackerNoon profile picture

Wenn Sie ChatGPT verwenden, müssen Sie sehr oft dieselben Eingabeaufforderungen oder Teile derselben Eingabeaufforderungen wiederholen.


Es kann sehr nervig sein, immer wieder das Gleiche einzugeben, insbesondere wenn ChatGPT den Zweck des Chats vergisst und Sie die gleiche Anfrage im Kontext dieses oder jenes Dialogs wiederholen müssen. Zunächst habe ich Standardaufforderungen in einen Textnotizblock kopiert.


Das waren zum Beispiel solche Aufforderungen:


  • Fassen Sie den folgenden Text auf Englisch zusammen:


  • Wenn der folgende Text auf Englisch ist, übersetzen Sie ihn ins Italienische, und wenn auf Italienisch, dann ins Englische:


  • Verfassen Sie ein Gedicht basierend auf dem folgenden Text:


  • Mein Name ist Ilya. Überlegen Sie, was Sie mir in diesem Dialog antworten sollen:


Es ist jedoch auch nicht bequem, jedes Mal ein Textdokument zu öffnen und die erforderliche Eingabeaufforderung zu kopieren und einzufügen. Ganz zu schweigen davon, dass ich sehr faul bin und nicht gerne die gleichen Aktionen wiederhole.


Und dann kam mir die Idee, ein Plugin für Google Chrome zu erstellen, mit dem man der ChatGPT-Oberfläche direkt Schaltflächen hinzufügen kann, durch die die gewünschte Eingabeaufforderung in das Texteingabefeld eingefügt wird.


Das Plugin ist nicht kompliziert und ich werde seinen Code hier mit Ihnen teilen.


Erstellen Sie zunächst irgendwo ein Verzeichnis, in dem sich unser Plugin befindet. Ich werde es /gptinsert nennen


Im Verzeichnis können Sie sofort ein Symbol mit 48 x 48 Pixeln erstellen und es icon.png nennen


Danach erstellen wir eine Datei manifest.json mit folgendem Inhalt:


 { "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" } }


Danach erstellen wir eine Datei, die die Arbeit unseres Moduls übernimmt; Wir nennen es content.js und fügen ihm in JavaScript den folgenden Code hinzu:


 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);


Jetzt müssen wir dieses Plugin zu Google Chrome hinzufügen. Dazu gehen wir zu Menü->Einstellungen->Erweiterungen->Load Unpacked, öffnen dann das Verzeichnis mit unserem Plugin /gptinsert und klicken auf die Schaltfläche „Ordner auswählen“ .


Anschließend erscheint das Logo unseres Plugins neben der Adressleiste im Browser.

Jetzt können wir es nutzen. Öffnen Sie dazu einfach https://chat.openai.com/ und erstellen Sie einen neuen Chat. Anschließend werden unten in unserem Chat vier Schaltflächen angezeigt: Zusammenfassen, Übersetzen, Gedicht und Antwort.


Wenn Sie beispielsweise auf „Zusammenfassen“ klicken, erscheint im Eingabefeld die Aufforderung „Folgenden Text auf Englisch zusammenfassen:“.


Danach können Sie einen beliebigen Text in jeder unterstützten Sprache einfügen und ChatGPT gibt seinen kurzen Inhalt und seine Bedeutung aus.

Schauen wir uns zum Beispiel die Funktion der Schaltfläche „Antwort“ an:

Wenn Sie eine neue Schaltfläche hinzufügen müssen, müssen Sie nur den folgenden Code zur Datei content.js hinzufügen:


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


Nach dem Speichern müssen Sie nur noch den Browser neu starten und alles wird funktionieren.


Auf diese Weise können Sie eine unbegrenzte Anzahl von Schaltflächen und Eingabeaufforderungen hinzufügen. Bei häufiger Nutzung beschleunigt das die Arbeit spürbar und erhöht den Komfort ;)


GitHub-Link: https://github.com/sinenko/ChatGptPromptInsert