Créer des modèles d'invite ChatGPT en utilisant ce plugin Google Chrome

Lorsque vous utilisez ChatGPT, très souvent, vous devez répéter les mêmes invites ou des parties des mêmes invites.

Cela devient très ennuyeux de taper la même chose encore et encore, surtout si ChatGPT oublie le but du chat, alors vous devez répéter la même demande dans le cadre de tel ou tel dialogue. Au départ, j'ai copié les invites standard dans un bloc-notes texte.

Il s'agissait, par exemple, de telles invites :

• Résumez le texte suivant en anglais :

• Si le texte suivant est en anglais, traduisez-le en italien, et s'il est en italien, alors en anglais :

• Créez un poème basé sur le texte suivant :

• Je m'appelle Ilya, pensez à quoi me répondre dans ce dialogue :

Mais ouvrir un document texte à chaque fois et copier et coller l'invite requise n'est pas non plus pratique. Sans parler du fait que je suis très paresseux et que je n'aime pas répéter les mêmes actions.

Et puis j'ai eu l'idée de créer un plugin pour Google Chrome, avec lequel vous pouvez ajouter des boutons directement à l'interface ChatGPT, en appuyant sur lequel l'invite requise sera insérée dans le champ de saisie de texte.

Le plugin n'est pas compliqué, et je vais partager son code ici avec vous.

Tout d'abord, créez un répertoire quelque part où se trouvera notre plugin. Je vais le nommer /gptinsert

Dans le répertoire, vous pouvez immédiatement créer une icône de 48x48 pixels en la nommant icon.png

Après cela, nous créons un fichier manifest.json avec le contenu suivant :

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

Après cela, nous créons un fichier qui effectuera le travail de notre module ; nous le nommons content.js, et lui ajoutons le code suivant en 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);

Nous devons maintenant ajouter ce plugin à Google Chrome. Pour cela, nous allons dans Menu->Paramètres->Extensions->Load Unpacked, puis ouvrons le répertoire avec notre plugin /gptinsert, et cliquons sur le bouton "Select Folder" .

Après cela, le logo de notre plugin apparaîtra à côté de la barre d'adresse dans le navigateur.

Maintenant, nous pouvons l'utiliser. Pour ce faire, ouvrez simplement https://chat.openai.com/ et créez un nouveau chat, après quoi 4 boutons apparaîtront en bas de notre chat : Résumer, Traduire, Poème et Répondre.

En appuyant, par exemple, sur Résumer, l'invite "Résumer le texte suivant en anglais :" apparaîtra dans le champ de saisie.

Après cela, vous pouvez insérer n'importe quel texte dans n'importe quelle langue prise en charge, et ChatGPT affichera son bref contenu et sa signification.

Vérifions le travail du bouton "Réponse" par exemple :

Si vous avez besoin d'ajouter un nouveau bouton, il vous suffit d'ajouter le code suivant au fichier content.js :

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

Après l'enregistrement, il vous suffit de redémarrer le navigateur et tout fonctionnera.

De cette façon, vous pouvez ajouter un nombre illimité de boutons et d'invites. Avec une utilisation fréquente, cela accélère sensiblement le travail et ajoute de la commodité ;)

Lien GitHub : https://github.com/sinenko/ChatGptPromptInsert