JavaScript基于ChatGPT API实现划词翻译浏览器脚本

准备条件：OpenAI API 配置

在开始编写代码前，需要确保拥有有效的 OpenAI API Key，并了解基础的 API 调用方式。我们可以通过一个简单的示例来验证 API 的连接状态。

打开浏览器控制台（Console），尝试发起一次简单的翻译请求。注意，以下代码中的 OPENAI_API_KEY 需替换为你自己的密钥。

const OPENAI_API_KEY = "sk-your-api-key";

const prompt = `Translate this into Chinese:\nhello world`;

fetch("https://api.openai.com/v1/completions", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    authorization: `Bearer ${OPENAI_API_KEY}`,
  },
  body: JSON.stringify({
    model: "text-davinci-003",
    prompt,
    max_tokens: 1000,
    temperature: 0,
  }),
}).then(async (res) => {
  const response = await res.json();
  console.log(response.choices[0].text);
});

如果请求成功，控制台将打印出对应的中文翻译文本。

第一步：实现基础划词翻译逻辑

划词翻译的核心在于捕捉用户的文本选择行为，并在合适的位置展示翻译结果。我们可以分步构建这个功能。

第1步：创建翻译浮窗元素

首先，在页面中动态创建一个用于显示翻译结果的 <div> 元素和一个触发图标。这个浮窗需要悬浮于页面之上。

let keyword;
const translationDiv = document.createElement("div"); 
translationDiv.id = "translation-window"; 

// 创建图标
const icon = document.createElement("img"); 
icon.style.width = "30px";
icon.style.height = "30px";
// 这里可以使用一个简单的占位图标或 Base64 编码图标
icon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..."; // 示例路径
translationDiv.appendChild(icon); 
document.body.appendChild(translationDiv); 

第2步：监听文本选中事件

通过监听 mouseup 事件，检测用户是否选定了文本。如果存在选中的文本，则将其存入变量 keyword 中，并可让翻译浮窗出现在鼠标附近。

document.addEventListener("mouseup", (event) => {
  const selection = window.getSelection().toString().trim();
  if (selection) {
    keyword = selection;
    // 可选：在这里调整 translationDiv 的位置靠近鼠标
    translationDiv.style.top = event.pageY + 'px';
    translationDiv.style.left = event.pageX + 'px';
    translationDiv.style.display = 'block';
  } else {
    translationDiv.style.display = 'none';
  }
});

第3步：绑定点击翻译动作

当用户点击浮窗图标时，执行实际的 API 请求。为了简单起见，我们可以在 mouseover 或 click 事件中触发翻译函数。

function translate() {
  if (!keyword) return;
  console.log('Translating:', keyword);
  // 此处应嵌入实际的 fetch 请求逻辑，见下文进阶部分
  // 模拟结果展示
  translationDiv.innerHTML = '
翻译结果加载中...
';
}

icon.addEventListener("click", translate);
// 或者 hover 触发，视交互需求而定

第4步：添加 CSS 样式

定义浮窗的样式，使其固定定位、背景半透明且有阴影，确保不遮挡重要内容且美观。

#translation-window {
  position: fixed;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  max-width: 300px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  cursor: pointer;
}

第二步：使用 React + Ant Design 优化界面

原生 DOM 操作虽然直观，但在处理复杂交互和状态管理时较为繁琐。推荐使用 webpack、React 和 Ant Design (antd) 来构建现代化的浏览器插件。可以使用类似 tampermonkey-starter 的项目模板作为起点。

第1步：使用 Popover 组件展示结果

利用 Ant Design 的 Popover 或 Tooltip 组件包裹翻译按钮，可以更方便地控制内容的展示与隐藏。同时，使用 React 的状态管理来控制 Loading 状态和翻译结果。

第三步：实现流式响应（SSE）提升体验

传统的 API 调用需要等待完整响应后才返回结果，对于长文本翻译会导致用户长时间等待。OpenAI 的 API 支持 Server-Sent Events (SSE)，可以实现打字机效果的实时反馈。

第1步：开启流式参数

在请求体中添加 stream: true 参数：

body: JSON.stringify({
  model: "text-davinci-003",
  prompt: `Translate this into Chinese:\n${text}`,
  stream: true,
  // ...其他参数
})

第2步：解析流数据

使用 fetch 获取响应流，并通过 ReadableStream 和 TextDecoder 逐块读取数据。可以使用第三方库如 eventsource-parser 简化解析过程。

import { createParser } from "eventsource-parser";

const translateStream = async (text: string) => {
    const resp = await fetch("https://api.openai.com/v1/completions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        authorization: `Bearer ${OPENAI_API_KEY}`,
      },
      body: JSON.stringify({
        model: "text-davinci-003",
        prompt: `Translate this into Chinese:\n${text}`,
        stream: true,
      }),
    });

    if (!resp.ok) {
      console.error(resp.statusText);
      return;
    }

    const parser = createParser((event) => {
      if (event.type === "event") {
        const data = event.data;
        if (data === "[DONE]") {
          // 结束标志
          return;
        }
        try {
          const json = JSON.parse(data);
          const textChunk = json.choices[0].delta.content || json.choices[0].text;
          // 实时更新 UI 显示
          updateUIWith(textChunk);
        } catch (error) {
          console.error("Parse error:", error);
        }
      }
    });

    const reader = resp.body.getReader();
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;
      const str = new TextDecoder().decode(value);
      parser.feed(str);
    }
};

第四步：集成语音朗读功能

除了文本翻译，大多数翻译插件都支持语音播报。浏览器原生提供了 Web Speech API，无需额外后端即可实现文字转语音。

第1步：封装语音播放函数

使用 SpeechSynthesisUtterance 对象配置语音属性，如语速、音调和语音列表。

function speak(text, lang = 'zh-CN') {
  if ('speechSynthesis' in window) {
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = lang;
    utterance.rate = 1;
    utterance.pitch = 1;
    
    // 可选：指定特定语音
    const voices = window.speechSynthesis.getVoices();
    // 例如选择第一个中文语音
    const zhVoice = voices.find(v => v.lang.includes('zh'));
    if (zhVoice) utterance.voice = zhVoice;

    window.speechSynthesis.speak(utterance);
  } else {
    console.warn('浏览器不支持 Web Speech API');
  }
}

第2步：绑定播放按钮

在翻译结果展示区域增加一个喇叭图标，点击时调用 speak() 函数传入当前的翻译文本。

// 假设翻译结果为 result
speak(result);

完成判断与注意事项

• API 有效性：确保 API Key 未被禁用，且模型支持所选功能。
• 跨域问题：如果使用 Tampermonkey 或类似注入脚本的环境，通常不受 CORS 限制；如果是普通网页，需注意浏览器安全策略。
• 错误处理：在实际生产中，务必完善网络异常、超时及 API 报错（如额度不足）的用户提示逻辑。
• 资源清理：当页面跳转或标签页关闭时，建议取消正在进行的 Stream 读取，释放资源。

以上就是JavaScript基于ChatGPT API实现划词翻译浏览器脚本的详细内容，更多关于JavaScript ChatGPT API现划词翻译浏览器的资料请关注本站其它相关文章！