当前位置: 首页 > news >正文

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

用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

好了,收工!

作者:京东零售 于弘达

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

相关文章:

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

用ChatGPT做了个Chrome Extension 最近科技圈儿最火的话题莫过于ChatGPT了。 最近又发布了GPT-4,发布会上的Demo着实吸睛。 笔记本上手画个网页原型,直接生成网页。网友直呼:前端失业了! 但我觉着啊,真就外行看热闹…...

动态库的制作与使用及 动态库加载失败解决

加载动态库时有时会出现error while loading shared libraries:libcalc.so:可以通过lld命令查看动态库的依赖关系,发现libcalc.so时not found 原因 查找的优先级是DT_RPATH->LD_LIBRARY_PATH->/etc/ld.so.cache->/lib/,/usr/lib 找不到一个优…...

404 not found nginx(dist打包后,刷新和跳转都是404 not found nginx的问题) 解决方案(打包发布在服务器)

当我们执行了yarn run build之后,生成dist文件 我们将代码放入nginx-1.24.0下面的html中 然后我们就配置conf文件下的nginx.conf 配置方面不介绍了,主要问题是因为没有加这句话 问题分析 index index.htm index.html; index 就是根目录,也就…...

《Chain-of-Thought Prompting Elicits Reasoning in Large Language Models》全文翻译

《Chain-of-Thought Prompting Elicits Reasoning in Large Language Models》- Chain-of-Thought Prompting Elicits Reasoning in Large Language Models 论文信息摘要1. 介绍2. 思维链提示3. 算术推理3.1 实验设置3.2 结果3.3 消融研究3.4 思想链的稳健性 4. 常识推理5. 符号…...

MySQL——笔试测试题

解析: 要查询各科目的最大分数,可以使用如下的SQL语句: SELECT coursename, MAX(score) FROM t_stuscore GROUP BY coursename; 这条SQL语句使用了MAX()聚合函数来获取每个科目的最大分数,并使用GROUP BY子句按照科目进行分组…...

WangEditor在Vue前端的应用

1、在Vue项目中安装WangEditor 对于Vue2: npm install wangeditor/editor-for-vue --save 或者 yarn add wangeditor/editor-for-vue 对于Vue3: npm install wangeditor/editor-for-vuenext --save 或者 yarn add wangeditor/editor-for-vuenext 2、将Wa…...

初学python的感受

目录 初学感受学习计划学习目标 初学感受 刚学python的我惊讶的发现编程语言之间竟有如此多的相似之处,因此在学python的时候相对于学C语言时要轻松的多,虽然二者也有一些不同之处,但是我想只要对二者稍微区分的话应该不会搞混的,并且在学习的过程中也可以借鉴学C语言的方法去…...

SpringSecurity中注解讲解

文章目录 1 EnableGlobalMethodSecurity1.1 PreAuthorize1.1.1 开启注解1.1.2 使用注解原生方法1.1.3 使用注解自定义方法 1.2 PostAuthorize1.3 Secured 2 其他注解2.1 PostFilter2.2 PreFilter 3 权限表达式 1 EnableGlobalMethodSecurity EnableGlobalMethodSecurity 是 Sp…...

朔雪流量复制器的前端

朔雪流量复制器的前端 1. 功能需求简介 本流量复制器使用端口映射模式实现流量复制,可以实现一对一,一对多,和多对一的流量复制模式。 映射网口的多少取决于设备的硬件,最多可以支持36端口。 使用模式包括** 1)从1…...

Anaconda下 Prophet的安装,pystan和fbprophet的版本问题

一、安装pystan conda install pystan2.19.1.1 二、安装fbprophet conda install fbprophet0.7.1 -c conda-forge Prophet有prophet和fbprophet两个包可以安装,我这里用的是fbprophet 三 import fbprophet 后会提示: ERROR:fbprophet:Importing p…...

IntelliJ IDEA 简介

IntelliJ IDEA 简介 IntelliJ IDEA(简称 IDEA)是一款由 JetBrains 公司开发的强大且广受欢迎的集成开发环境(IDE),主要用于Java开发,但也支持其他编程语言和技术栈的开发。作为一款功能丰富、高效的IDE&am…...

20230904 QT客户端服务器搭建聊天室

Ser cpp#include "app.h" #include "ui_app.h"APP::APP(QWidget *parent):QWidget(parent),ui(new Ui::APP) {ui->setupUi(this);this->resize(550,400);ui->Line->setAlignment(Qt::AlignCenter);//标签文本对齐方式 居中ui->Line->se…...

吴恩达gradio课程:基于开源LLM(large language model)的聊天应用chatbot

文章目录 内容简介构建应用程序使用gradio在线体验接下来结合llm模型使用gradio构建一个完整的应用程序内容简介 Falcon 40B是当前最好的开源语言模型之一。使用text-generation库调用Falcon 40B的问答API接口。首先仅仅在代码中与模型聊天,后续通过Gradio构建聊天界面。Gradio…...

【c++】weak_ptrshared_ptr

目录 weak_ptr&shared_ptr 为什么不直接使用this指针 weak_ptr&shared_ptr weak_ptr<RtspSession> weakSelf dynamic_pointer_cast<RtspSession>(shared_from_this()); 这段代码涉及到 C 中的 weak_ptr 和 shared_ptr 的使用&#xff0c;以及类型转换…...

Init函数和main函数

1.Init函数和main函数 1.1. init函数 go语言中init函数用于包(package)的初始化&#xff0c;该函数是go语言的一个重要特性。 有下面的特征&#xff1a; 1 init函数是用于程序执行前做包的初始化的函数&#xff0c;比如初始化包里的变量等2 每个包可以拥有多个init函数3 包的…...

汇川PLC学习Day1:跑马灯程序编写

汇川PLC学习Day1&#xff1a;跑马灯程序编写 一、 软件安装 进入官网下载软件 二、 使用帮助 三、 新建工程与功能代码实现 CtrlN 寻找内带输出模块的CPU并设置好工程名字与保存路径&#xff0c;语言选择想熟悉的类型 工程建立后&#xff0c;PLC_PRG即为用户编写程序文件…...

【已解决】Unknown initial character set index ‘45‘ received from server

出现这个数据库连接异常&#xff0c;可能是数据库太新&#xff0c;所以更新一下JDBC连接驱动&#xff0c;原来的是5.0.4 &#xff0c;现在换成5.1.47.连接成功。 参考其他博主的文章&#xff1a;Java——连接数据库MySQL 5.7和8.0的区别_这段语句mysql5.7和8.0有什么区别url: …...

Java从入门到精通-数组(二)

4.数组的基本操作 数组的基本操作包括遍历数组、填充替换数组元素、对数组进行排序、复制数组以及查询数组中的元素。 • 4.1 遍历数组 遍历数组是访问数组中所有元素的过程&#xff0c;通常使用循环完成。 使用 for 循环遍历数组&#xff1a; int[] numbers {1, 2, 3, 4…...

深入剖析HTTP和HTTPS代理在爬虫中的应用价值

在当今信息时代&#xff0c;数据是无处不在且极其宝贵的资源。对于从互联网上获取大量结构化或非结构化数据的需求而言&#xff0c;网络爬虫成为一种强有力的工具。然而&#xff0c;在实际操作过程中&#xff0c;我们常常会面临许多挑战和限制。   其中一个主要问题就是目标网…...

SQL语句分类及编写规范

目录 1.SQL分类 数据定义语言 DDL 数据操纵语言 DML 数据查询语言 DQL 数据控制语言 DCL 事务控制语言 TCL 2.SQL语句的编写规范 SQL语句不区分大小写 SQL语句关键词建议大写 SQL语句每句话用分号结尾 MySQL从小白到总裁完整教程目录:https://blog.csdn.net/wei…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

postgresql|数据库|只读用户的创建和删除(备忘)

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...