共计 2285 个字符，预计需要花费 6 分钟才能阅读完成。
用 ChatGPT 做了个 Chrome Extension
最近科技圈儿最火的话题莫过于 ChatGPT 了。
最近又公布了 GPT-4，发布会上的 Demo 着实吸睛。
笔记本上手画个网页原型，间接生成网页。网友直呼：前端就业了！
但我觉着啊，真就在行看热闹，外行看笑话。尽管 ChatGPT 很弱小，但没有通过针对某个畛域自定义化过的模型真就没啥用。。。
就比方写代码这事儿，我觉着还不如 GitHub 的 Copilot 用着不便。
回归咱们的主题，明天咱就蹭蹭热度，用 ChatGPT 的 API 做个 Chrome Extension。
说实话，开始还真没想到能用 ChatGPT 做点儿啥，起初看过一些视频，发现用它来做翻译比拟好，感觉没有以往的翻译软件僵硬。甚至你能够让他模拟某位巨匠的格调去翻译。惊了！
我就想，是不是能够把他和 Chrome Extension 组合下，来个划词翻译。
开干
咱们能够用官网提供的脚手架疾速起一个 ChatGPT 利用:
git clone https://github.com/openai/openai-quickstart-node.git
运行前你须要去 openai 生成一个 OPENAI\_API\_KEY！
它是一个 Next 利用，运行起来是一个给宠物起名字的页面，你能够输出动物名称，他会生成相应的名字。
咱们看下源码实现，上面这段比拟要害：
const completion = await openai.createCompletion({
model: "text-davinci-003",
prompt: generatePrompt(req.body.animal),
temperature: 0.6,
});
text-davinci-003是应用的模型，他是专门用来解决语言相干的模型：
有趣味能够看官网文档对 Text Completion 的解释。
temperature是一个 0 - 2 之间的系数，用来示意后果的贴合度，越大后果就越发散，越小就越针对你的问题。
prompt这里比拟要害，就是发问的艺术了。你对问题的形容越具体，它的反馈就越贴近你想要的。
示例代码给咱们打了个样儿：
function generatePrompt(animal) {const capitalizedAnimal = animal[0].toUpperCase() + animal.slice(1).toLowerCase();
return `Suggest three names for an animal that is a superhero.
Animal: Cat
Names: Captain Sharpclaw, Agent Fluffball, The Incredible Feline
Animal: Dog
Names: Ruff the Protector, Wonder Canine, Sir Barks-a-Lot
Animal: ${capitalizedAnimal}
Names:`;
}
咱们要做的是划词翻译，这里咱们改一下：
function generatePrompt(text) {
return `Please translate the following text into chinese:
Text: ${text}
Result:`;
}
运行试下，还不错。
到这里其实咱们相当于把划词翻译的 API 做完了。而后就是找中央部署下，部署 Next 利用当然用 Vercel，自家的货色。
👻 部署好了：
接下来咱们再做个 Chrome 扩大就行了
Chrome Extension
这里向大家举荐一个 vite 插件：@crxjs/vite-plugin
用它能够应用 vite 的个性来开发 Chrome Extension，包含 hmr 啥的都有，也能够反对 React。想想早年开发 Chrome 扩大那叫一个苦。
这里咱们做的是划词翻译，所以须要在网页中注入脚本，就要用到 content-script。
另外，咱们也要用到 background service worker 来接管网页端发来的划中词，再跳用咱们的下面搭好的 API 来取得翻译后果。
content-script.js
这部分比较简单，就是获取用户划词，而后调用 Chrome 的 api 发送给 background.js
chrome.runtime.sendMessage({text}, function (response: any) {});
background.js
background 外面通过 chrome.runtime.onMessage 监听网页端发来的词语，而后调用咱们的 ChatGPT API 来获取翻译后果即可。
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}),
});
});
});
看看成果：
这里要留神的是，我应用的是 Vercel 的 Serverless 部署的 api，因为只是 Hobby 账号，所以申请有个 10s 限度，划的词太长的话，ChatGPT 解决工夫会超过 10s，导致 api 报错。
好了，出工！
作者：京东批发 于弘达
起源：京东云开发者社区 转载请注明起源
