☰

Custom Commands Dropdown

Add a dropdown of custom commands to a page

// ==UserScript==
// @name:en         Custom Commands Dropdown
// @name Custom Commands Dropdown
// @namespace    pl.4as.chatgpt
// @version      0.2
// @description Add a dropdown of custom commands to a page
// @description:en  Add a dropdown of custom commands to a page
// @author       Description009
// @match *://chat.openai.com/*
// @grant        none
// @license MIT
// ==/UserScript==

"use strict";

(function () {
  "use strict";
  console.log("CCD loading...");

  // This function will add our custom commands dropdown
  function addCustomCommandsDropdown() {
    // Get the textarea by ID
    const textareaElement = document.getElementById("prompt-textarea");

    // If the textarea exists, proceed to add the dropdown
    if (textareaElement) {
      // Create the select element
              var select_id=document.getElementById('commands')
      if (select_id){console.log('menu is loaded')}else{
      const select = document.createElement("select");
      select.name = "Commands";
      select.id = "commands";
      select.style.borderTop = "none";
      select.className =
        "m-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pr-12 gizmo:md:py-3.5 pl-12 gizmo:pl-10 md:pl-[46px] gizmo:md:pl-[55px]";

      // List of commands for autocomplete
      const commands = [
        "Select Command",
        "myfiles_browser.search",
        "myfiles_browser.open_url",
        "myfiles_browser.back",
        "myfiles_browser.scroll",
        "myfiles_browser.quote_lines",
        "browser.search",
        "browser.click",
        "browser.back",
        "browser.scroll",
        "browser.open_url",
        "browser.quote_lines",
        // ... add any other commands here if necessary
      ];

      // Populate the select element with options
      commands.forEach((command) => {
        const option = document.createElement("option");
        option.value = command;
        option.textContent = command;
        option.style.backgroundColor = "#343541";
        option.style.borderBottom = "none";
        select.appendChild(option);
      });

      // Insert the select element before the textarea
      textareaElement.parentNode.insertBefore(select, textareaElement);

      // Event listener for select change
      select.addEventListener("change", function () {
        const selectedOption = select.options[select.selectedIndex].value;
        textareaElement.value += selectedOption + "();\n";
      });
      }
      console.log("Custom commands dropdown added.");
    } else {
      console.error("Textarea not found.");
    };
   setTimeout(addCustomCommandsDropdown,2000);console.log('Run function');
  }

  // Inject our addCustomCommandsDropdown function into the page
  function injectFunction(fn) {
    const script = document.createElement("script");
    script.text = `(${fn.toString()})();`;
      script.id = 'CustomCommand'
    document.body.appendChild(script);
    console.log("Code injected using injectionFunc");
  }

  // Wait 10 seconds after the page loads before injecting the dropdown
  setTimeout(function () {
    injectFunction(addCustomCommandsDropdown);
  }, 1000); // 1 seconds expressed in milliseconds
})();