【附完整插件源代码，可直接使用】基于 ChatGPT 的 API 开发了「搞懂搞西」 Chrome 插件
通往 Python 高手之路
前言
本文开发流程部分为开源教程，但本文所涉及到的完整源代码（每次更新的源码会在本篇中同步）只提供给 VIP 会员，你可以基于此继续开发新的功能，也可以将整个文件夹拖到 chrome://extensions/ 直接使用调试，记得打开「开发者模式」。
开发教程
前不久 ChatGPT 的不是开放了 API 了么
小帅b摸了摸自己茂密的头发
开始了人生思考
如何通过 ChatGPT 的 API 开发一个对我们有用的程序呢？
就目前对我来说ChatGPT 的对话能力很牛
翻译能力也牛
对文字的理解能力也牛
总之，它对文本和自然语言的处理很牛
所以，我决定利用它来做一个《既能翻译网页上的文字又能对晦涩难懂的词语进行解释的插件》
来简单画下草图
比如有这么一个网页
写的都特么是英文（或者其他国的语言）
那么只要通过鼠标滑动选中一下不懂的外语
就会在选中的字符下弹出一个窗口
直接把它翻译成中文
而当我遇到不懂的中文词汇时
我也可以用鼠标滑动选中它
然后弹出窗口作出解释
那么这样我就不必每次遇到不懂的内容
还要去切换各种窗口
还得复制粘贴去各种搜索…
想象一下直接在网页里面
刷的一下就能高效地理解各种「鸟语花香」
简直爽歪歪啊
那么如何开发一个这样的插件呢？
接下来就是学习开发插件的正确姿势
先创建一个目录
然后在这个目录里面先创建一个 manifest.json 文件
用来声明这个插件是干嘛的
以及做一些配置：
我把这个插件命名为「搞懂搞西」
顾名思义
搞懂一切网页上的内容包括西方的各种资料文献
然后我对这个插件的描述是：用鼠标刷一下你在网页上一切不懂的内容，立马给你生成中文解释或者翻译运行起来是这样的：
这让人一看就有一种很想要的感觉
manifest.json 其他的字段
比如 content_scripts 来指定要注入的脚本文件
service_worker 用来指定监听事件的文件
具体的配置参数可以在官方文档找到
那么配置好了之后
就可以创建 scripts/content.js 来写一下脚本咯
在这里当发现用户用鼠标选择了文本后释放
就发送一个 「openPopup」的 action
那么此时可以创建一个 background.js 接收这个事件
在这里
当监听到了 「openPopup」就打开一个窗口
这个窗口指向了 popup.html
那么我们来创建一个
先简单写一下
来加载运行一下：
我们主要是想对选中的字符进行操作
那么可以在 scripts/content.js 获取选中的文字然后发送给 background.js
在 backgroud 接收到选中的文本后
将它作为参数传递给 popup.html
这时候可以在 html 中
定义一个 p 标签用来显示选择的文本
这里引用了 popup.js 我们创建一个
这里获取到参数的值后
写入 html 的 p 标签中
再来运行一下看看：
可以看到
现在选中的文本就可以在弹窗中显示出来啦
现在这个弹窗总是显示在左上角
应该让它显示到选中的文字下方才对
那么可以在 content.js 中获取鼠标的位置
然后发送给 background.js
拿到鼠标位置就可以改变窗口的位置
现在再运行一下看看：
这样就舒服多了
不过每次弹窗都不会自动关闭
可以在 popup.js 加一个监听事件
当鼠标点空白处就关闭窗口
弹窗和文本显示整的差不多了
那么现在就可以接入 ChatGPT 的 API 啦
我们现在主要想实现的功能是
当滑动选择的文本遇到外语就翻译成中文
当滑动选择的文本遇到中文就进行解释
所以可以先写个方法判断一下选中的文本是否为中文
可以用正则判断一下所有中文字符
这样就可以构造请求 API 的参数
在官方文档中
可以看到请求的内容可以放到参数 mesages 里面
那么我们就可以这么写
可以看到
这里通过 language 来做一个判断
如果是中文就让 ChatGPT 进行解释
如果是外语就让 ChatGPT 进行翻译
那么请求参数弄好了
就可以请求 API 了可以使用 fetch 进行请求
返回的结果在 choices 下的 message 对象中
那么可以通过 json 解析 const result = data.choices[0].message.content;
最后将 result 传递给 HTML 就好啦。
我们来运行看看：
这不就舒服了吗？ 我们再滑动选择日语：
不错我们再选择晦涩难懂的中文词语看看：
主要的功能已经实现
其实还可以在这插件里面继续做文章
当然也还有值得优化的地方
不过第一个版本就是能用了再说
哈哈想要这个插件吗？
把「学习python的正确姿势」公众号关注起来
我再优化优化
到时发布出来给你们直接用上
第一版本 V1.0 完整源代码
以下是第一版本完整源代码：
文件结构：
├── background.js
├── manifest.json
├── popup.html
├── popup.js
└── scripts
└── content.js
manifest.json:
第二版优化，完整代码以及插件直接使用方式
来了，我对其进行了优化，现在你可以更好的使用这个插件了。
优化的内容已经发在了公众号：《我给我的ChatGPT插件优化了一下，啊～舒服》
完整插件代码我放在了网盘上，地址如下：
你可以下载完直接使用，打开 chrome 浏览器，输入 chrome://extensions
接着打开开发者模式，然后拖进去即可食用：
