用ChatGPT做一个Chrome扩展 | 京东云技术团队

news2025/1/13 10:11:06

用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是使用的模型,他是专门用来处理语言相关的模型:

image

有兴趣可以看官网文档对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,自家的东西。

👻 部署好了:

image

接下来我们再做个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 }),
   });
  });
 });


看看效果:

image

这里要注意的是,我使用的是Vercel的Serverless部署的api,由于只是Hobby账号,所以请求有个10s限制,划的词太长的话,ChatGPT处理时间会超过10s,导致api报错。

image

好了,收工!

作者:京东零售 于弘达

来源:京东云开发者社区 转载请注明来源

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/961245.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

go语言--锁

锁的基础,go的锁是构建在原子操作和信号锁之上的 原子锁 原子包实现协程的对同一个数据的操作,可以实现原子操作,只能用于简单变量的简单操作,可以把多个操作变成一个操作 sema锁 也叫信号量锁/信号锁 核心是一个uint32值&#…

DCMM数据能力成熟度评估模型--学习笔记(1)

DCMM数据能力成熟度评估模型--学习笔记 1、DCMM简介、结构组成和成熟度评估等级划分1.1 DCMM简介1.2 DCMM结构组成1.3 DCMM关键过程域1.3.1、数据战略(指导方针)1.3.2、数据治理 (机制保障)1.3.3、数据架构 (施工图纸)1.3.4、数据…

GPT-4.0技术大比拼:New Bing与ChatGPT,哪个更适合你

随着GPT-4.0技术的普及和发展,越来越多的平台开始将其应用于各种场景。New Bing已经成功接入GPT-4.0,并将其融入搜索和问答等功能。同样,在ChatGPT官网上,用户只需开通Plus账号,即可体验到GPT-4.0带来的智能交流和信息…

SpringBatch结合SpringBoot简单使用实现工资发放批处理操作

最近有接触到批处理相关的需求,学习了下SpringBatch的使用方法。SpringBatch能把复杂的批处理任务进行step分解,并能通过reader和writer满足不同来源数据的处理需求,支持在step定义时设置异常重试策略等,比较方便拓展。简单记录下…

【Java基础】深入理解反射、反射的应用(工厂模式、代理模式)

文章目录 1. Java反射机制是什么?1.2 Java反射例子 2. Java反射机制中获取Class的三种方式及区别?3. Java反射机制的应用场景有哪些?3.1. 优化静态工厂模式(解耦)3.1.1 优化前(工厂类和产品类耦合&#xff…

【仿写spring之ioc篇】一、预期目标以及项目结构介绍

前言 最近系统的学习了一下spring的源码,准备简单仿写一下spring,目前是仿写ioc篇,在ioc篇中将完成整套的bean的生命周期,当然是简单的实现,不会像spring真正源码那样做非常系统性的校验以及接口设计。 预期目标 将…

关于“VS2022无法打开头文件<graphics.h>” 以及编译时 “没有与参数列表匹配的重载函数实例”俩个问题的解决思路

前言: 今天无聊没什么事干,突然看见一条视频梦回20年前杀马特横行的年代,炫酷而又土嗨的灯光闪烁,我又想了想之前写扫雷小游戏的时候,有的人写的游戏界面非常的炫酷,各种颜色都有,抱着没事没事干…

c#事件(event)

概述: C#中的事件是一种特殊的委托,它用于实现观察者模式,允许对象在特定事件发生时通知其他对象。 以下是使用C#事件的示例: 首先,定义一个包含事件的类: public class EventPublisher {// 声明一个事…

向新NEW · 数智赋能新未来 | 2023TechWorld 绿盟科技智慧安全大会圆满召开

9月1日,以“向新NEW数智赋能新未来”为主题的2023TechWorld绿盟科技智慧安全大会在北京如约启幕。站在新十年开篇之际,TechWorld技术嘉年华正式更名TechWorld智慧安全大会,名字全新升级背后反映着广大用户对绿盟科技始终坚持的技术战略——“…

WEBGL(3):鼠标动态绘制点

1 实现思路 绘制单个点鼠标事件监听点击事件将点推送到数组中绘制数组中所有点 2 实现代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge&…

MySQL 数据库常用命令大全(完整版)

文章目录 1. MySQL命令2. MySQL基础命令3. MySQL命令简介4. MySQL常用命令4.1 MySQL准备篇4.1.1 启动和停止MySQL服务4.1.2 修改MySQL账户密码4.1.3 MySQL的登陆和退出4.1.4 查看MySQL版本 4.2 DDL篇&#xff08;数据定义&#xff09;4.2.1 查询数据库4.2.2 创建数据库4.2.3 使…

手机怎么压缩图片?压缩方法看这些

手机怎么压缩图片&#xff1f;在现代社会中&#xff0c;手机已经成为我们日常生活中不可或缺的一部分。我们使用手机拍照、上传照片和分享照片&#xff0c;但是在分享照片之前&#xff0c;我们经常需要将其压缩&#xff0c;以便在互联网上更轻松地共享。下面这篇文章就给大家介…

下行抢占指示 DCI format 2_1

这部分R17和R15基本内容一样&#xff0c;只是有写细节描述略有区别&#xff0c;这里就以R17版本的协议看下downlinkPreemption&#xff0c;即DCI format 2_1有关内容。 R15支持eMBB和URLLC服务。 由于URLLC业务是优先级较高的业务&#xff0c;当无线资源不足时&#xff0c;已经…

如何把pdf文件合并?分享最新pdf合并方法

在所有文档格式中&#xff0c;pdf应该是最常用的&#xff0c;像产品介绍、商务合同、法律文书等等&#xff0c;这些都是pdf格式的。有时候出于工作需要&#xff0c;我们要把两份或者多份pdf文件合并在一起&#xff0c;那么问题来了&#xff0c;如何把pdf文件合并呢?小编最近发…

【勘误】基于多目标粒子群算法的微电网优化调度【风光、储能、柴油、燃气、电网交互】

目录 1 主要内容 2 部分代码 3 程序结果 4 下载链接 1 主要内容 这是一篇代码勘误&#xff0c;该程序复现文献《基于多目标粒子群算法的微电网优化调度》&#xff0c;代码实现了多目标优化调度模型——考虑微电网系统运行成本和环境保护成本的并网模式下微电网多目标优化调…

【NCRE 二级Java语言程序设计01】全国计算机等级考试初识

目录 前言一、认识全国计算机等级考试1.官方的自我介绍2.省级和全国级的区别3.考试内容 二、NCRE正确入口三、官方重要资源分布1.大纲教材2.相关下载3.试题选登4.常见问题 总结 前言 &#x1f4dc; 本专栏主要是分享自己备考全国计算机二级Java语言程序设计所学心得体会、所搜集…

SpringBoot自定义工具类—基于定时器完成文件清理功能

直接复制粘贴既可&#xff01;&#xff01; import org.springframework.scheduling.annotation.Scheduled; import org.springframework.stereotype.Component; import java.io.File; import java.time.LocalDate; import java.time.LocalDateTime; import java.time.ZoneOff…

【云原生进阶之PaaS中间件】第一章Redis-2.5缓存持久化

1 Redis持久化 1.1 Redis持久化分类 Redis 中的数据都是保存在内存中的&#xff0c;当Redis服务重启后&#xff0c;内存中的数据都会丢失&#xff0c;所以需要将内存中的数据保存到磁盘上&#xff0c;方便系统故障时&#xff0c;从磁盘上的备份数据恢复到内存中。 Redis 中的持…

PMP考试难度大吗?该如何备考?

PMP&#xff08;Project Management Professional)&#xff09;认证考试是全球范围内最重要、最权威的项目管理行业认证之一。但是&#xff0c;很多人对PMP考试的难度心存疑虑。在这篇文章中&#xff0c;我们将讨论PMP考试的难度&#xff0c;并提供一些备考建议。 首先&#x…

python“魂牵”京东商品历史价格数据接口(含代码示例)

要通过京东的API获取商品详情历史价格数据&#xff0c;您可以使用京东开放平台提供的接口来实现。以下是一种使用Java编程语言实现的示例&#xff0c;展示如何通过京东开放平台API获取商品详情历史价格数据&#xff1a; 首先&#xff0c;确保您已注册成为京东开放平台的开发者…