用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: CatNames: Captain Sharpclaw, Agent Fluffball, The Incredible FelineAnimal: DogNames: Ruff the Protector, Wonder Canine, Sir Barks-a-LotAnimal: ${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报错。

好了，出工！

作者：京东批发 于弘达

起源：京东云开发者社区 转载请注明起源