CODEWITHSUNDEEP
google-chrome-extensionartificial-intelligencechatchrome-extension-manifest-v3autocorrect
Russell Hertel
Russell Hertel

Reputation: 129

Autocorrect Using Chat GBT - Chrome Extension

I'm trying to make a chrome extension for my own use that uses Chat GPT to autocorrect typed words in real-time. I want at any point that I'm typing and spelling a word incorrectly for it to be automatically replaced with the correct spelled word. I want to do this and I want to use Chat GPT because I plan on expanding to new features in the future. I have written some code and gotten some previous simpler examples to work but for some reason when I try to integrate the code with the Chat GPT API it stops working. I am trying to get it to first work in the search bar of google. As of now, it is as if the extension isn't even on because when I misspell something it doesn't change it or have any effect.

manifest.json:

{
  "manifest_version": 3,
  "name": "Google Search Duplicator",
  "version": "1.0",
  "description": "Duplicates whatever is typed into the input fields.",
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

content.js

// Find the Google search input element
const searchInput = document.querySelector('input[name="q"]');

// Add an event listener to the search input
searchInput.addEventListener('keydown', async (event) => {
// Check if the pressed key is the space bar
if (event.key === ' ') {
  // Get the current input value
  const currentInput = searchInput.value;

  // Get the last word in the input
  const words = currentInput.split(" ");
  const lastWordInput = words.length > 1 ? words.splice(-1)[0] : words[0];

  // Send the last word to the Chat GPT API for autocorrection
  const correctedWord = await autocorrect(lastWordInput);

  // Add new input with corrected word
  const newInput = currentInput.substring(0, currentInput.lastIndexOf(" ")) + " " + correctedWord;

  // Update the input value with the corrected input
  searchInput.value = newInput;
  }
});

// Function to send the last word to the Chat GPT API for autocorrection
async function autocorrect(word) {
// Send a POST request to the Chat GPT API with the word
const response = await fetch('https://api.openai.com/v1/engines/davinci-codex/completions', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'KEY IS HERE' // Replace API_KEY with your actual API key
  },
  body: JSON.stringify({
    prompt: `Autocorrect the word "${word}".`,
    max_tokens: 1,
    stop: '\n'
  })
});

// Parse the response and return the corrected word
const data = await response.json();
const correctedWord = data.choices[0].text.trim();
return correctedWord;
}

I keep getting this error but I have gotten many and don't know if it is highlighting the problem:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
Context
https://www.autozone.com/orderConfirmation
Stack Trace

Thanks in advance!!

Upvotes: 0

Views: 697

Answers (1)

Michał J
Michał J

Reputation: 46

You're trying to access only the input field, while on google.com you get a textarea as a field to enter some keywords. Your searchInput is null, because it cannot find an input you're searching for, and you try to add event listener to something that is null, hence you get your error.

To fix your problem, modify your content.js:

const searchInput =
  document.querySelector('input[name="q"]') ||
  document.querySelector("textarea");

Now your searchInput will try to get element which is input OR textarea.

Upvotes: 0

Related Questions