This adds a microphone button beside ChatGPT enter button. Supports voice result addition to existing text as well.

AddMicForChatGPT.js

const urlToSelectorMap = {
  // "https://labs.perplexity.ai/": 'textarea[placeholder="Ask anything..."]',
  "https://chatgpt.com/": 'textarea[placeholder="Message ChatGPT"]',
};

// Initialize the SpeechRecognition object
window.SpeechRecognition =
  window.webkitSpeechRecognition || window.SpeechRecognition; // webkitSpeechRecognition for Chrome and SpeechRecognition for FF

function getInputElement(url) {
  for (const [key, selector] of Object.entries(urlToSelectorMap)) {
    if (url.includes(key)) {
      return document.querySelector(selector);
    }
  }
  console.log("Not on the recognized website.");
  return null;
}

function addSpeechButton(textarea) {
  // Create the button
  const button = document.createElement("button");
  button.id = "speech-button";
  button.textContent = "🎤";
  button.style.marginLeft = "10px";
  button.style.backgroundColor = "#fff";
  button.style.borderRadius = "15px";
  button.style.padding = "4px 8px";
  button.style.width = "fit-content";
  button.style.marginBottom = "4px";

  const sendButton = document.querySelector(
    'button[data-testid="fruitjuice-send-button"]'
  );
  const { x, y, width, height } = sendButton.getBoundingClientRect();

  button.style.position = "absolute";
  button.style.top = `${y}px`;
  button.style.left = `${x - width - 15}px`;

  // Add the button to the DOM
  document.body.appendChild(button);

  return button;
}
if (window.SpeechRecognition) {
  const recognition = new window.SpeechRecognition();
  let isRecognitionActive = false;

  // Set up the event listener for the speech recognition result
  recognition.onresult = (event) => {
    // Get the transcript of the recognized speech
    const speechToText = event.results[0][0].transcript;

    // Find the appropriate textarea element based on the current URL
    const textarea = getInputElement(window.location.href);

    // Check if the textarea element was found
    if (textarea) {
      // Append the speech recognition text to the textarea value
      textarea.value += " " + speechToText;
      // Trigger the 'input' event on the textarea
      textarea.dispatchEvent(new Event("input", { bubbles: true }));
    } else {
      // Log a message if the textarea was not found
      window.alert("Textarea not found on the current website.");
    }

    // Update the button text
    const button = document.getElementById("speech-button");
    button.textContent = "🎤";
    isRecognitionActive = false;
  };

  // Find the appropriate textarea element based on the current URL
  const textarea = getInputElement(window.location.href);

  // Check if the textarea element was found
  if (textarea) {
    // Add the speech button
    const button = addSpeechButton(textarea);

    // Set up the event listener for the button click
    button.addEventListener("click", () => {
      if (isRecognitionActive) {
        recognition.stop();
        button.textContent = "🎤";
        isRecognitionActive = false;
      } else {
        recognition.start();
        button.textContent = "🛑";
        isRecognitionActive = true;
      }
    });

    // Add an event listener for the window resize event
    window.addEventListener("resize", () => {
      const sendButton = document.querySelector(
        'button[data-testid="fruitjuice-send-button"]'
      );
      const { x, y, width, height } = sendButton.getBoundingClientRect();
      const button = document.getElementById("speech-button");
      button.style.top = `${y}px`;
      button.style.left = `${x - width - 15}px`;
    });
  }
} else {
  // Log a message if SpeechRecognition is not supported
  window.alert("SpeechRecognition is not supported in this browser.");
}