Cursor实战:谷歌插件从入门到精通



点击上方?公众号?关注我✅


你好啊,我是雨飞,见字如面感谢阅读,期待我们下一次的相遇。


今天是AI破局的编程航海的第10天,航程也即将过半了,,很荣幸能在这个承前启后的节点,为近350名船员分享关于Cursor编程的一些心得和经验。下面是这次直播的精华分享,如果对你有帮助欢迎点赞、收藏并转发给需要的朋友。



谷歌插件基础知识


这次,我们以谷歌插件为例,去讲述整个AI编程的开发和相关技巧。首先,我们通过AI来了解下什么是谷歌插件。以DeepSeek大模型为例,输入提示词「什么是谷歌插件?」,可以看到大模型的回答非常完整和详细。


提取出最关键的信息,可以总结出谷歌插件就是用于增强和扩展谷歌浏览器功能的一个软件,可以提供比如广告拦截、网页翻译、网页截图等各种复杂的功能。



在AI大模型没有出来之前,我们想要制作一款插件,需要掌握很多技能。这里,AI帮我们列举出来了,至少需要掌握HTML、CSS、JavaScript等技术才可能开发一款插件。

而在AI时代,只要我们能看到懂AI的输出,学会使用提示词就可以借助AI工具去实现一款插件。

这也就是所谓的,AI时代,我们认知中的编程方法已经开始发生转变,零基础的小白也完全有机会借助AI的力量去打造自己的产品。


谷歌插件开发

我们首先讲下,谷歌插件的基本构成,一般来讲,谷歌插件包含Manifest文件、后台脚本、内容脚本、图标等多个文件构成。

下面是一个简单的Manifest文件的示例,它声明了插件的名称、描述、版本、权限等关键信息。


后台脚本,一般命名为 background.js,是插件的主要工作区域,可以监听浏览器事件,执行长时间运行的任务。

内容脚本,一般命名为 content.js,可以注入到符合指定匹配规则的网页中,用于操作网页的 DOM 节点、修改网页内容、与网页脚本进行交互等。

部署插件也比较简单,我们只需要在谷歌浏览器中打开网站:chrome://extensions/ ,找到加载已解压的扩展程序,就可以把我们调试中的插件部署到谷歌浏览器中查看结果。



调试起来也非常简单,可以按F12打开开发者工具,找到控制台,查看控制台的输出是否有异常,另外,插件本身也会在扩展程序的界面里显示自己出现的错误。



之后,我们可以通过打包扩展程序,把源码打包成一个crx格式的文件,这样就会方便别人安装使用了。


经验分享

最后,在和大家分享一些我在使用AI编程中的一些经验。

1、从最基础的项目开始学起,打好基本功

2、AI的回答,一定要仔细阅读,有可能谜底就在谜面上

3、不要试图让AI帮你完成所有的步骤,而是让它做自己更擅长的事,比如给出你的参考示例,或者代码让它进一步优化

4、针对某一个代码片段,使用chat功能,效果可能会更好(上下文信息不至于太多)

5、基本上超过300行的代码,AI是没有办法一次生成好的,总会出现一些小问题,因此要多次对话修复代码


6、提示词不要一开始就写特别复杂,调试非常麻烦。特别是没有编程基础的,你无法确定是哪个地方出现了问题


7、和单个AI对话次数过多,会丢失上下文信息,这个时候可以重新开启一个新的对话窗口,别一直用一个


欢迎点赞,收藏,转发,我们下次讲述如何利用Cursor去实际完成一个谷歌插件的开发工作。

❤️常驻小尾巴❤️

加微 1060687688备注「公众号」,送你一份AI工具大全与变现指南

推荐阅读

「雨飞同行」这是雨飞的介绍(第8版,交个朋友,限时送福利)

请使用浏览器的分享功能分享到微信等