零基础？让ChatGPT为你实现一个谷歌浏览器插件

如何让 ChatGPT 来帮我们实现一个谷歌浏览器插件，并在自己的浏览器上，将 GPT 写的插件进行安装使用？

读完本文之后，大家在以后在使用浏览器的过程中，遇到想要制作一些具有特殊功能的插件的场景时，就可以快速完成定制。

并且是零代码就能完成插件定制。

浏览器插件制作

我的本职工作主要是做 java 开发，偶尔也会写一些前端代码，早些年还自学过 Android 开发，具备开发一些移动端程序的能力，闲暇之余也学过一些 python 开发，尝试做过一些辅助工作的工具。

总体来说，学过的技术还是比较多的，但是在这之前，从来没有开发过浏览器插件。

可以说是对此一无所知，但今天开发的这个小功能，加上调试，仅用了一个小时就完成了。

并且其中的大部分时间都在解决一些非代码层面的问题，具体遇到的问题，文中会有详细的说明。

首先，还是了解一下浏览器插件开发的基础知识，做到心中有数。

直接让 GPT 来进行开发流程的介绍。

提问：你知道怎么制作一款谷歌浏览器插件吗？

流程讲解很清晰：梳理插件功能、定义清单文件 manifest.json、完成前端代码编写、在浏览器进行调试。

看上去开发过程比较简单。

今天主要实现一个用于浏览器截图的插件，确定了功能，直接开始编码。

提问：请用 html+css+js 帮我实现一个谷歌浏览器截图插件

根据代码的详细介绍，我创建了一个文件夹，同时将 GPT 提到的三段代码，分别填充到 manifest.json 、popup.html 、popup.js这三个文件中。

还找了一张图片 icon.jpg，作为插件的图标。

创建好的相关文件如下图。

紧接着是打开浏览器的插件页面，直接在浏览器中输入 chrome://extensions ,同时开启开发者模式。

最后点击【加载已解压的扩展程序】，选择自己创建的文件夹。

顺利的话，完成这一步，就能看到自己的插件已经添加到浏览器中了。

加载失败

我在做这一步时，遇到了一点问题，纯属是粗心大意。

.png 的图片，我给放成了 .jpg，所以插件加载失败。

错误提示比较清晰，大家在制作别的插件时，如果遇到问题不要慌。遇到问题，解决问题就成。

修改正确之后，就能看到自己的插件显示在浏览器中了。

中文乱码

遇到的第二个问题，就是中文显示乱码，由于很快就解决了，我给忘记截图了。

乱码问题大家都知道是什么状况，这里就不补充截图了。

遇到问题，抛给 GPT 去解决。

提问：插件显示中文乱码，应该怎样让中文显示正确

这一块都不算是代码bug，指定一下 html 编码就解决了。

所有问题解决完成后，点击浏览器右上角的插件按钮，就能看到我们自己制作的插件了。

这里是插件展示的样子，中文也已经能正常显示了。

图片信息未显示

GPT 给出的代码效果是，当我们点击【截图】按钮，控制台会打印出图片的 url 信息。

但我点击了很多次，控制台都完全没有反应。

甚至在多次点击之后，插件上出现了错误信息。

点击错误按钮，就能查看到详细的报错信息。

报错信息 ：Unchecked runtime.lastError: This request exceeds the MAX_CAPTURE_VISIBLE_TAB_CALLS_PER_SECOND quota.

我们的插件是调用了谷歌浏览器的截图接口，具体的报错信息是说，短时间内调用过于频繁。算不上错误，可以不用处理。

目前的情况是，未打印出图片的 url ,我都不能判断出是不是代码有bug。

没有什么解决方案，我把错误现象描述给了 GPT ，希望他能给我一些提示。

提问：插件集成后，点击截图按钮并未打印截图的url

结果，没什么参考价值。

解决这个问题花费了比较多的时间，我都没什么思路。

后来我想着检查页面代码看看，结果一不小心，这才发现，插件的调试窗口，和平时的页面调试窗口是不一样的。

居然有两个开发者窗口，而插件中的打印，是输出到新窗口的。

这一步的具体操作是：把鼠标移动到插件页面，点击鼠标右键，选择检查。这时候就能开启插件的调试窗口了。

截止到目前为止，遇到的三个问题，都是非代码逻辑导致的。

虽然花费了一些时间，但是也算是积累了一些经验。

使用一门新技术，踩坑是难以避免的。

到目前为止，截图的基础功能是实现了，但这还不算是一个功能完整的插件。

因为截的图，并没有实际的用途，起码能预览一下截图吧。

添加截图预览功能

如果有前端开发经验，这一步还是比较容易的，添加一个 <img>标签就行。

调试样式这些还是挺麻烦的，功能的添加还是让 GPT 来实现。

提问：把获取到的截图，在页面中进行预览，应该怎样添加功能？

将新增部分的代码复制到代码文件中，然后在插件页面点击刷新按钮，就能直接加载更新的内容。

再次操作截图之后，就能看到截图的预览了。

预览了截图之后，界面显得太小了，看不清楚。

这里可以简单调整一下插件页面的宽、高。

如果不会前端开发，可以直接问 GPT 怎样调整。

把宽高都扩大一倍之后，预览效果相对就清楚一些。

保存截图

预览了截图之后，另一个常见的需要，就是把截图保存到磁盘上。

于是我又让 GPT 追加了一个保存图片的功能。

提问：再追加一个功能，添加一个保存按钮，将截图保存到浏览器默认存储文件夹

同样很快就完成了，几乎没花什么时间。

把代码复制到对应的文件中，可以看到【保存截图】的按钮已经显示出来了。

预览、保存，一气呵成，下面这张就是我保存的截图。

到此，咱们整个插件的开发就算完成了。

当然，还有一些可以优化的地方，感兴趣的小伙伴可以引导 GPT 来完成。

待优化项

• 文件名按照时间戳命名
• 优化界面样式、按钮样式
• 设置没有截图时的默认样式…

总结

今天的文章比较具有实用性，不管你是从事什么工作，总是需要用到浏览器的，总会有一些你自己的独特需求是现有插件难以满足的。

用 GPT 给自己定制就好啦~

拿截图功能来说，本文的处理流程是截图 ->预览->保存，可能有些朋友想要的场景是，一键截图并保存到本地。

或者有的小伙伴是想自定义浏览器收藏夹功能，比如给收藏夹添加独特的皮肤等等。

再高级一点的需求，可能是一键获取选中的图片链接、拖动图片直接上传到自己的服务器等等。

再比如，星球里有一些小伙伴还是在校学生，如果你恰好是学习前端开发的，是不是可以考虑毕业设计做一个浏览器插件呢？

只需要把代码看明白，都不需要自己去写了。

只要你有需要，就能快速开发一款自己想要的插件，相当省事儿~