paint-brush
Bu Google Chrome Eklentisini Kullanarak ChatGPT İstemi Şablonları Oluşturunile@sinenko
2,634 okumalar
2,634 okumalar

Bu Google Chrome Eklentisini Kullanarak ChatGPT İstemi Şablonları Oluşturun

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

Çok uzun; Okumak

Ilya'nın ChatGPT eklentisi, doğrudan Sohbet arayüzüne düğmeler eklemenizi sağlar. Gerekli bilgi istemi metin giriş alanına eklenecektir. Eklenti karmaşık değil ve kodunu burada sizinle paylaşacağım. Kod JavaScript ile yazılmıştır ve GitHub'dan indirilebilir.
featured image - Bu Google Chrome Eklentisini Kullanarak ChatGPT İstemi Şablonları Oluşturun
Ilya Sinenko HackerNoon profile picture

ChatGPT'yi kullanırken, aynı istemleri veya aynı istemlerin bölümlerini çok sık tekrarlamanız gerekir.


Aynı şeyi tekrar tekrar yazmak çok sinir bozucu oluyor, özellikle de ChatGPT sohbetin amacını unutursa, o zaman aynı isteği şu veya bu diyalog bağlamında tekrarlamak zorunda kalırsınız. Başlangıçta standart istemleri bir metin not defterine kopyaladım.


Bunlar örneğin şu tür istemlerdi:


  • Aşağıdaki metni İngilizce olarak özetleyin:


  • Aşağıdaki metin İngilizce ise İtalyancaya, İtalyanca ise İngilizceye çevirin:


  • Aşağıdaki metne göre bir şiir oluşturun:


  • Benim adım İlya, bu diyalogda bana ne cevap vereceğinizi düşünün:


Ancak her seferinde bir metin belgesi açmak ve gerekli istemi kopyalayıp yapıştırmak da uygun değildir. Çok tembel olduğumdan ve aynı eylemleri tekrarlamaktan hoşlanmadığımdan bahsetmiyorum bile.


Daha sonra Google Chrome için, doğrudan ChatGPT arayüzüne düğmeler ekleyebileceğiniz, gerekli istemin metin giriş alanına ekleneceği bir eklenti yapma fikrim vardı.


Eklenti karmaşık değil ve kodunu burada sizinle paylaşacağım.


Öncelikle eklentimizin olacağı bir yerde bir dizin oluşturun. Adını ben koyacağım /gptinsert


Dizinde, hemen icon.png adını vererek 48x48 piksellik bir simge oluşturabilirsiniz.


Bundan sonra aşağıdaki içeriğe sahip bir manifest.json dosyası oluşturuyoruz:


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


Bundan sonra modülümüzün işini gerçekleştirecek bir dosya oluşturuyoruz; onu content.js olarak adlandırıyoruz ve JavaScript'te ona aşağıdaki kodu ekliyoruz:


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


Şimdi bu eklentiyi Google Chrome'a eklememiz gerekiyor. Bunun için Menü->Ayarlar->Uzantılar->Unpacked Yükle seçeneğine gidip /gptinsert eklentimiz ile dizini açıp "Klasör Seç" butonuna tıklıyoruz.


Bundan sonra eklentimizin logosu tarayıcıdaki adres çubuğunun yanında görünecektir.

Artık onu kullanabiliriz. Bunu yapmak için https://chat.openai.com/ adresini açın ve yeni bir sohbet oluşturun; ardından sohbetimizin altında 4 düğme görünecektir: Özetle, Çevir, Şiir ve Yanıt.


Örneğin Özetle'ye bastığınızda, giriş alanında "Aşağıdaki metni İngilizce olarak özetleyin:" istemi görünecektir.


Bundan sonra, desteklenen herhangi bir dilde herhangi bir metni ekleyebilirsiniz ve ChatGPT, kısa içeriğini ve anlamını verecektir.

Örneğin "Yanıt" düğmesinin çalışmasını kontrol edelim:

Yeni bir düğme eklemeniz gerekiyorsa aşağıdaki kodu content.js dosyasına eklemeniz yeterlidir:


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


Kaydettikten sonra tarayıcıyı yeniden başlatmanız yeterlidir; her şey işe yarayacaktır.


Bu şekilde sınırsız sayıda düğme ve istem ekleyebilirsiniz. Sık kullanımda bu, işi gözle görülür derecede hızlandırır ve kolaylık sağlar;)


GitHub bağlantısı: https://github.com/sinenko/ChatGptPromptInsert