聊天新纪元：通过和ChatGPT聊天就能开发自己的Chrome插件

文章目录

1. 前言
- 1.1 ChatGPT是什么
- 1.2 ChatGPT能干什么
- 1.3 我要让ChatGPT干什么
2. 环境准备
3. 交互过程
- 3.1 发送需求
- 3.2 询问执行
- 3.3 继续提问
- 3.4 加载代码
- 3.5 执行插件
- 3.6 执行插件
4. 生成的代码
- 4.1 manifest.json
- 4.2 popup.css
- 4.3 popup.js
- 4.4 popup.html
5. 总结

1. 前言

1.1 ChatGPT是什么

ChatGPT是一种基于深度学习技术的自然语言处理模型，由OpenAI团队开发。

1.2 ChatGPT能干什么

ChatGPT能够生成高质量、连贯的自然语言文本，可以应用于机器翻译、语音识别、文本摘要、问答系统等多种自然语言处理任务中。它可以根据给定的文本输入生成自然语言的回复，具有较高的人机交互能力。同时，ChatGPT也支持对文本进行情感分析和语义分析等深度处理，以更好地理解和生成自然语言文本。

1.3 我要让ChatGPT干什么

既然ChatGPT能够理解我们人类的语言，那我想让它教我做不擅长的事情应该没有问题吧？例如，我是一个后端开发，对前端知之甚少，更别说开发了，但是现在有了ChatGPT，我想着让它教我写一款chrome的插件，通过下面的实践我们来看看能否完成？

2. 环境准备

chrome版本：113.0.5672.126
ChatGPT版本：3.5

3. 交互过程

3.1 发送需求

初步写好我的需求，明确要让chatgpt干什么

你是一个全栈开发工程师，请开发一个截取屏幕的chrome插件，请详细的介绍开发流程并给出详细的代码

ChatGPT的响应
在这里插入图片描述

3.2 询问执行

虽然 ChatGPT给了我们代码，可是怎么执行，这个对于只熟悉后端开发的我来说是很蒙蔽的，所以我们直接把疑问抛给ChatGPT

代码如何运行

在这里插入图片描述
根据提示，一步一步整理成了一个文件夹

图片可以自己找，尺寸是16x16 和 32x32 各一张即可

3.3 继续提问

因为有安装chrome插件的经历，了解到现在的插件都要是第三版本的，不然比较新的浏览器都是不支持的，如果不知也无妨，可以直接运行后在看报错，这里我就直接问ChatGPT

请根据manifest_version3的规范重新把代码生成

在这里插入图片描述
虽然ChatGPT回答了我的问题，但是看下面文字和上面的代码，并没有帮我修改好，我也熟悉该怎么修改，所以只能继续提问

请根据manifest_version3版本的规范把代码从头到尾生成出来

在这里插入图片描述
通过这一版本的生成（其实还是没有帮我们修改，无妨，先执行再说），我们把之前修改好的文件修改成这个，然后打开chrome浏览器：

右上角的开发者模式按钮要开启
点击左上角的加载已解压的扩展程序

3.4 加载代码

加载后显示错误
在这里插入图片描述
点击错误按钮点进去查看错误信息

这个错误看得一头雾水，也不知道怎么修复，不慌，把它复制出来，发给ChatGPT

加载报错：Permission 'activeTab' is unknown or URL pattern is malformed.

在这里插入图片描述
根据回答内容，修改manifest.json配置文件，把原本"host_permissions": ["activeTab"],改为"permissions": ["tabs"], 保存后然后执行刷新

3.5 执行插件

找到我们加载好的插件，尝试第一次执行
在这里插入图片描述
点击后的样式(奇丑无比，但是算了，能运行就行)，点击弹出框底部按钮

在这里插入图片描述
点击记下都没有反应，回到插件列表又显示错误了

把错误继续复制出来，组织一下丢给ChatGPT

运行报错：Unchecked runtime.lastError: Either the '<all_urls>' or 'activeTab' permission is required.

在这里插入图片描述
根据提示再次修改manifest.json配置文件，保存后回到浏览器的扩展列表刷新
（如果刷新后依然有报错就移除插件再加载一次）

3.6 执行插件

这次不翻车了，插件可以执行了
在这里插入图片描述
这张就是通过插件截取复制出来的图片

4. 生成的代码

4.1 manifest.json

{"manifest_version": 3,"name": "屏幕截取插件","version": "1.0","description": "用于在Chrome浏览器中截取屏幕的插件","icons": {"16": "icon16.png","32": "icon32.png"},"permissions": ["tabs","tabCapture","activeTab","clipboardWrite"],"action": {"default_popup": "popup.html","default_icon": {"16": "icon16.png","32": "icon32.png"}}
}

4.2 popup.css

h1 {text-align: center;
}button {display: block;margin: 0 auto;
}

4.3 popup.js

const captureBtn = document.getElementById('capture');captureBtn.addEventListener('click', () => {chrome.tabs.captureVisibleTab({format: 'png'}, (screenshotUrl) => {const img = new Image();img.src = screenshotUrl;document.body.appendChild(img);});
});

4.4 popup.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>屏幕截取插件</title><link rel="stylesheet" href="popup.css"></head><body><h1>屏幕截取插件</h1><button id="capture">截取屏幕</button><script type="module" src="popup.js"></script></body>
</html>