使用此 Google Chrome 插件创建 ChatGPT 提示模板

使用 ChatGPT 时，您经常需要重复相同的提示或部分相同的提示。

一遍又一遍地输入相同的内容非常烦人，尤其是如果 ChatGPT 忘记了聊天的目的，那么您必须在这个或那个对话的上下文中重复相同的请求。最初，我将标准提示复制到文本记事本中。

例如，这些是这样的提示：

• 用英语总结以下文本：

• 如果以下文本是英文的，请将其翻译成意大利语，如果是意大利语，则翻译成英语：

• 根据以下文字创作一首诗：

• 我叫 Ilya，想一想在这段对话中该回答我什么：

但是每次打开一个文本文档，复制粘贴需要的提示也不方便。更不用说我很懒惰，不喜欢重复相同的动作。

然后我有了一个想法，为 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);

现在我们需要将这个插件添加到谷歌浏览器。为此，我们转到菜单->设置->扩展->加载解包，然后打开我们的插件/gptinsert 目录，然后单击“选择文件夹”按钮。

之后，我们插件的标志将出现在浏览器的地址栏旁边。

现在，我们可以使用它了。为此，只需打开https://chat.openai.com/并创建一个新聊天，之后聊天底部会出现 4 个按钮：总结、翻译、诗歌和回应。

例如，通过按下 Summarize，提示“用英语总结以下文本：”将出现在输入字段中。

在此之后，您可以使用任何支持的语言插入任何文本，ChatGPT 将输出其简要内容和含义。

例如，让我们检查“响应”按钮的工作：

如果需要添加新的按钮，只需要在content.js文件中添加如下代码：

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

保存后 - 你只需要重新启动浏览器，一切都会正常。

通过这种方式，您可以添加无限数量的按钮和提示。如果经常使用，这会显着加快工作速度并增加便利性；)

GitHub 链接：https: //github.com/sinenko/ChatGptPromptInsert