이 Google Chrome 플러그인을 사용하여 ChatGPT 프롬프트 템플릿 만들기

ChatGPT를 사용할 때 동일한 프롬프트나 동일한 프롬프트의 일부를 반복해야 하는 경우가 매우 많습니다.

같은 내용을 계속해서 입력하는 것은 매우 짜증나는 일입니다. 특히 ChatGPT가 채팅의 목적을 잊어버린 경우에는 이 대화나 저 대화의 맥락에서 동일한 요청을 반복해야 합니다. 처음에는 표준 프롬프트를 텍스트 메모장에 복사했습니다.

예를 들어 다음과 같은 프롬프트가 있었습니다.

• 다음 내용을 영어로 요약하세요.

• 다음 텍스트가 영어인 경우 이탈리아어로 번역하고, 이탈리아어인 경우 영어로 번역합니다.

• 다음 텍스트를 바탕으로 시를 만들어 보세요.

• 내 이름은 Ilya입니다. 이 대화에서 나에게 뭐라고 대답할지 생각해 보세요.

하지만 매번 텍스트 문서를 열고 필요한 프롬프트를 복사하여 붙여넣는 것도 편리하지 않습니다. 내가 매우 게으르고 같은 행동을 반복하는 것을 좋아하지 않는다는 사실은 말할 것도 없습니다.

그런 다음 필요한 프롬프트가 텍스트 입력 필드에 삽입되는 버튼을 눌러 ChatGPT 인터페이스에 직접 버튼을 추가할 수 있는 Google Chrome용 플러그인을 만드는 아이디어가 생겼습니다.

플러그인은 복잡하지 않으며 여기에서 해당 코드를 여러분과 공유하겠습니다.

먼저, 플러그인이 위치할 디렉터리를 만듭니다. 이름을 /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에 추가해야 합니다. 이를 위해 Menu->Settings->Extensions->Load Unpacked로 이동한 다음 플러그인 /gptinsert 로 디렉터리를 열고 "Select Folder" 버튼을 클릭합니다.

그러면 브라우저의 주소 표시줄 옆에 플러그인 로고가 나타납니다.

이제 우리는 그것을 사용할 수 있습니다. 이렇게 하려면 https://chat.openai.com/을 열고 새 채팅을 생성하세요. 그러면 채팅 하단에 요약, 번역, 시, 응답 등 4개의 버튼이 나타납니다.

예를 들어 요약을 누르면 입력 필드에 "다음 텍스트를 영어로 요약합니다:"라는 메시지가 나타납니다.

그런 다음 지원되는 언어로 텍스트를 삽입할 수 있으며 ChatGPT는 간단한 내용과 의미를 출력합니다.

예를 들어 "응답" 버튼의 작동을 확인해 보겠습니다.

새 버튼을 추가해야 하는 경우 content.js 파일에 다음 코드를 추가하기만 하면 됩니다.

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

저장한 후 브라우저를 다시 시작하면 모든 것이 작동합니다.

이런 방식으로 버튼과 프롬프트를 무제한으로 추가할 수 있습니다. 자주 사용하면 작업 속도가 눈에 띄게 빨라지고 편의성도 높아집니다. ;)

GitHub 링크: https://github.com/sinenko/ChatGptPromptInsert