Building a ChatGPT-Powered Chrome Extension for Word Translation

The article starts by noting the hype around ChatGPT and GPT‑4, then proposes a practical use case: a Chrome extension that translates highlighted text using the ChatGPT API.

It begins with the OpenAI quick‑start Node.js template, cloning the repository with:

git clone https://github.com/openai/openai-quickstart-node.git

After obtaining an OPENAI_API_KEY , the template runs as a Next.js app that generates pet names, demonstrating the core createCompletion call:

const completion = await openai.createCompletion({
  model: "text-davinci-003",
  prompt: generatePrompt(req.body.animal),
  temperature: 0.6,
});

The text-davinci-003 model is explained as a language‑focused model, and the temperature parameter controls response creativity.

To adapt the example for translation, the generatePrompt function is rewritten to ask the model to translate the supplied text:

function generatePrompt(text) {
  return `Please translate the following text into chinese: \nText: ${text}\nResult:`;
}

After testing the API, the article moves on to building the Chrome extension. It recommends the Vite plugin @crxjs/vite-plugin for modern development with HMR and React support.

The extension consists of a content‑script.js that captures the selected word and sends it to a background service worker:

chrome.runtime.sendMessage({ text }, function (response) {});

The background script listens for messages, forwards the text to the ChatGPT API, and returns the translation:

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  chrome.storage.sync.get(["text", "enable"], async function (result) {
    const response = await fetch(API, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        withCredentials: true,
      },
      body: JSON.stringify({ animal: request.text }),
    });
  });
});

The extension is deployed using Vercel’s serverless platform; the article notes the 10‑second timeout on Hobby accounts, which can cause errors for long selections.

Finally, screenshots illustrate the deployed Next.js app, the Vercel deployment, and a successful translation result, concluding with a brief “job done” statement.