Create ChatGPT Prompt Templates by Using This Google Chrome Plugin

When using ChatGPT, very often, you have to repeat the same prompts or parts of the same prompts.

It gets very annoying to type the same thing over and over, especially if ChatGPT forgets the purpose of the chat, then you have to repeat the same request in the context of this or that dialogue. Initially, I copied standard prompts into a text notepad.

These were, for example, such prompts:

• Summarize the following text in English:

• If the following text is in English, translate it into Italian, and if in Italian, then into English:

• Create a poem based on the following text:

• My name is Ilya, think of what to answer me in this dialogue:

But opening a text document every time and copying and pasting the required prompt is also not convenient. Not to mention the fact that I am very lazy and do not like to repeat the same actions.

And then I had an idea to make a plugin for Google Chrome, with which you can add buttons directly to the ChatGPT interface, by pressing which the required prompt will be inserted into the text input field.

The plugin is not complicated, and I will share its code here with you.

First, create a directory somewhere where our plugin will be. I will name it /gptinsert

In the directory, you can immediately create an icon of 48x48 pixels, naming it icon.png

After that, we create a file manifest.json with the following content:

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

After that, we create a file that will perform the work of our module; we name it content.js, and add the following code to it in 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);

Now we need to add this plugin to Google Chrome. For this, we go to Menu->Settings->Extensions->Load Unpacked, then open the directory with our plugin /gptinsert, and click the "Select Folder" button.

After this, the logo of our plugin will appear next to the address bar in the browser.

Now, we can use it. To do this, simply open https://chat.openai.com/, and create a new chat, after which 4 buttons will appear at the bottom of our chat: Summarize, Translate, Poem, and Response.

By pressing, for example, on Summarize, the prompt "Summarize the following text in English:" will appear in the input field.

After this, you can insert any text in any supported language, and ChatGPT will output its brief content and meaning.

Let's check the work of the "Response" button for example:

If you need to add a new button, you just need to add the following code to the content.js file:

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

After saving - you just need to restart the browser, and everything will work.

In this way, you can add an unlimited number of buttons and prompts. With frequent use, this noticeably speeds up work and adds convenience ;)

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