本文详解如何利用OpenAI接口在浏览器中实现划词翻译功能。内容涵盖基础HTML/JS实现、基于React与Ant Design的现代化插件开发，以及支持流式输出和Web Speech API语音播放的高级功能，提供完整代码示例与实现步骤。
前言
近期GitHub上出现了一款基于ChatGPT API的浏览器脚本，短时间内Star数突破9.7k。该功能不仅支持翻译，还涵盖文本润色与总结，并借助Tauri打包了桌面客户端。抛开Tauri涉及的Rust部分，其浏览器端的实现逻辑相对直观，本文将逐步演示如何手动实现这一功能。
openAI 提供的接口
例如，复制以下代码并在浏览器控制台中执行，即可发起翻译请求。
//这是示例
const OPENAI_API_KEY = "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";
const prompt = `Translate this into Chinese:
hello world`;
const res = 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,
max_tokens: 1000,
temperature: 0,
}),
});
const response = await res.json();
const result = response.choices[0].text;
请注意，代码中的 OPENAI_API_KEY 需替换为您自己的密钥。
实现划词翻译
划词翻译是网页中常见的交互功能，当用户选中单词或文本时，会自动弹出一个小窗口显示翻译结果。
1. 首先，在HTML页面中添加一个空的DIV元素以及触发翻译的按钮。
let keyword;
const translation = document.createElement("div");
translation.id ="translation";
const icon = document.createElement("img");
icon.style.width ="30px";
icon.style.height = "30px";
icon.src ="http://example.com/icon.png";
translation.appendChild(icon)
2. 为页面添加鼠标抬起（mouseup）事件监听器，当用户选中一段文本时，将其设置为搜索关键词。
document.addEventListener("mouseup", (event) => {
const selection = window.getSelection().toString().trim();
if (selection) {
keyword=selection；
}
});3. 鼠标点击时执行翻译逻辑。可通过AJAX请求从后台获取翻译结果，并将其显示在DIV元素中。
function translate(){
if(keyword){
// 执行翻译逻辑
}
}
icon.addEventListener("mouseover", translate);
4. 在CSS样式表中为DIV元素定义样式，使其以浮动形式显示在页面上。
#translation {
position: fixed;
top: 10px;
right: 10px;
max-width: 300px;
padding: 5px;
background-color: #f7f7f7;
border: 1px solid #ccc;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
z-index: 9999;
}完成上述步骤即可实现划词翻译的基本功能，接下来查看实际效果。
react + antd 实现
前述代码仅实现了最基础版本，且样式较为简单。因此，我们可以结合Webpack、React和Ant Design构建一个现代化的插件，此处使用之前创建的模板 tampermonkey-starter。
利用Ant Design的Popover组件进行展示，并通过React重构JavaScript代码，即可实现如下效果。
点击翻译按钮后，系统通过接口请求并将结果显示在下方。由于需等待API完全返回结果，加载可能较慢。为此，我们可以引入Stream机制，利用OpenAI接口支持的流式渲染，使结果逐字显示。
import { createParser } from "eventsource-parser";
const translate = 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:
${text}`,
max_tokens: 1000,
temperature: 0,
frequency_penalty: 0,
stream: true,
}),
});
if (resp.status !== 200) {
const res = await resp.json();
setLoading(false);
console.error(res);
return;
}
const parser = createParser((event) => {
if (event.type === "event") {
const data = event.data;
if (data === "[DONE]") {
setLoading(false);
}
try {
let json = JSON.parse(event.data);
setResult((prev) => {
return prev + json.choices[0].text;
});
} catch (error) {
console.log(error);
}
}
});
const data = resp.body;
if (!data) {
console.log("Error: No data received from API");
return;
}
const reader = resp.body.getReader();
try {
while (true) {
const { done, value } = await reader.read();
if (done) {
setLoading(false);
break;
}
const str = new TextDecoder().decode(value);
parser.feed(str);
}
} finally {
reader.releaseLock();
}
};在上述代码中，我们使用 fetch API发送HTTP请求，并从响应中获取可读流。通过 getReader 方法获取读取器对象，利用其处理流数据，同时使用 eventsource-parser 包解析服务器推送（Server-sent events）数据。
这样，响应内容便会根据Server-sent events（服务器发送的事件）逐个显示。
文本转语音
大多数翻译插件具备语音播放功能，我们可以利用Web Speech API实现。该API提供了两个语音合成接口：SpeechSynthesis和SpeechSynthesisUtterance。
function speak(text) {
if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.voice = speechSynthesis.getVoices()[0];
utterance.pitch = 1;
utterance.rate = 1;
speechSynthesis.speak(utterance);
}
}直接调用该函数并传入需朗读的文本，即可实现语音播放。
speak('Hello, world!');
小结
本文介绍了如何实现划词翻译的基本功能，包括使用OpenAI提供的接口进行翻译、在HTML页面中添加触发翻译的按钮和鼠标抬起事件监听器、使用AJAX请求从接口获取翻译结果并将其显示在DIV元素中等。同时还介绍了如何使用Webpack + React + Ant Design实现一个现代化的插件，并利用Web Speech API实现语音播放功能。
以上就是JavaScript基于ChatGPT API实现划词翻译浏览器脚本的详细内容，更多关于JavaScript ChatGPT API现划词翻译浏览器的资料请关注本站其它相关文章！