☰

Custom Commands Dropdown

Add a dropdown of custom commands to a page

  1. // ==UserScript==
  2. // @name:en         Custom Commands Dropdown
  3. // @name Custom Commands Dropdown
  4. // @namespace    pl.4as.chatgpt
  5. // @version      0.2
  6. // @description Add a dropdown of custom commands to a page
  7. // @description:en  Add a dropdown of custom commands to a page
  8. // @author       Description009
  9. // @match *://chat.openai.com/*
  10. // @grant        none
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. "use strict";
  15.  
  16. (function () {
  17.   "use strict";
  18.   console.log("CCD loading...");
  19.  
  20.   // This function will add our custom commands dropdown
  21.   function addCustomCommandsDropdown() {
  22.     // Get the textarea by ID
  23.     const textareaElement = document.getElementById("prompt-textarea");
  24.  
  25.     // If the textarea exists, proceed to add the dropdown
  26.     if (textareaElement) {
  27.       // Create the select element
  28.               var select_id=document.getElementById('commands')
  29.       if (select_id){console.log('menu is loaded')}else{
  30.       const select = document.createElement("select");
  31.       select.name = "Commands";
  32.       select.id = "commands";
  33.       select.style.borderTop = "none";
  34.       select.className =
  35.         "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]";
  36.  
  37.       // List of commands for autocomplete
  38.       const commands = [
  39.         "Select Command",
  40.         "myfiles_browser.search",
  41.         "myfiles_browser.open_url",
  42.         "myfiles_browser.back",
  43.         "myfiles_browser.scroll",
  44.         "myfiles_browser.quote_lines",
  45.         "browser.search",
  46.         "browser.click",
  47.         "browser.back",
  48.         "browser.scroll",
  49.         "browser.open_url",
  50.         "browser.quote_lines",
  51.         // ... add any other commands here if necessary
  52.       ];
  53.  
  54.       // Populate the select element with options
  55.       commands.forEach((command) => {
  56.         const option = document.createElement("option");
  57.         option.value = command;
  58.         option.textContent = command;
  59.         option.style.backgroundColor = "#343541";
  60.         option.style.borderBottom = "none";
  61.         select.appendChild(option);
  62.       });
  63.  
  64.       // Insert the select element before the textarea
  65.       textareaElement.parentNode.insertBefore(select, textareaElement);
  66.  
  67.       // Event listener for select change
  68.       select.addEventListener("change", function () {
  69.         const selectedOption = select.options[select.selectedIndex].value;
  70.         textareaElement.value += selectedOption + "();\n";
  71.       });
  72.       }
  73.       console.log("Custom commands dropdown added.");
  74.     } else {
  75.       console.error("Textarea not found.");
  76.     };
  77.    setTimeout(addCustomCommandsDropdown,2000);console.log('Run function');
  78.   }
  79.  
  80.   // Inject our addCustomCommandsDropdown function into the page
  81.   function injectFunction(fn) {
  82.     const script = document.createElement("script");
  83.     script.text = `(${fn.toString()})();`;
  84.       script.id = 'CustomCommand'
  85.     document.body.appendChild(script);
  86.     console.log("Code injected using injectionFunc");
  87.   }
  88.  
  89.   // Wait 10 seconds after the page loads before injecting the dropdown
  90.   setTimeout(function () {
  91.     injectFunction(addCustomCommandsDropdown);
  92.   }, 1000); // 1 seconds expressed in milliseconds
  93. })();