大家好，我是大瑜，一个资深的AI编程玩家。我建了一个“AI应用开发交群”，请在公众号回复“进群”，加群主VX，再入群！

今天的长文分享我用 cursor 如何 0-1 开发 chrome 浏览器插件并上线的全过程。

文章保姆级，按照教程一步一步走，一定可以最终上架浏览器市场。

一、什么是浏览器插件

浏览器插件其实就是通过写代码，来增强浏览器的功能。譬如我们熟悉知道的：

油猴浏览器插件、去广告的浏览器插件、沉浸式翻译的插件、猫爪可以直接下载视频的浏览器插件。

那这些插件都是怎么做的？不要急，今天我们就开始从0-1完成一个chrome浏览器插件的开发之旅。

二、需求挖掘

需求来自于生活，这句话一点没错。做任何事情不是为了做而做，到底这么插件能不能难过帮我解决问题？

譬如：

• • 能不能有一个地方可以展示历史的复制记录，便于及时查看历史的复制记录。
• • 可以快速查看对标公众号的发文信息，并收藏到自己的邮件中。
• • 将自己浏览的网页生成二维码，并带上总结内容，一键分享给同事或者好友/
• • 浏览器添加侧边栏，当我们一遍浏览信息，可以一遍给大模型对话

当然还可以解决工作中的问题，譬如做一个给知识星球去掉“禁止复制”的浏览器插件也是可以的。

当然，如果你也有需求，也可以找大瑜进行沟通，我也可以帮你分析，提供如何用插件解决的思路。

三、 cursor 开发浏览器插件

那么我们现在就开始用cursor开发浏览器插件了。

有的人说，我不懂代码，没关系！大瑜的文章基本上不需要写代码的！

那么接下来就以：保存浏览器历史的近100条复制记录，然后在插件中展示并可以复制的这个功能来开发。

1、前置条件

需要打开浏览器的“开发者”权限，其实操作也方便。

点击“插件”的图标->管理扩展程序->打开“开发者模式”。

cursor开发反而是最简单的一步，大瑜经过多次尝试之后，基本上按照大瑜的提示词来生成插件，基本上不会遇到问题。

你现在是一个资深的chrome开发大师，拥有多年的开发经验。
现在需要你开发一个保存历史复制的记录，功能如下：
1、每次用户复制的记录都保存起来，可以保存在chrome的本地缓存中，保存最近100条记录。
2、点击插件就会弹出历史复制的记录，要求界面清爽直观。
3、每一条记录都有一个复制按钮，可以让用户冲洗复制。
切记：
插件不需要带图标icon。
采用chrome最新 Manifest V3版本

这里有几点必须要注意：

01 定义角色，告诉大模型你是一个chrome的专家

02 切记的内容一般是之前用cursor开发会报错的地方，我们直接在这里给规避了，就不会让cursor给我们错误生成了。

tips：一般来说我会把提示词放到“instruction.md”中，这样就比较清晰，便于后续查看。

这个时候，我们直接comand+i选择agent模式，大模型选择“claude-3.7”以上版本就行，现在可以让cursor给我们生成代码了。

接下来就是cursor的生成了。

大概过了2分钟，代码就直接生成了，点击“accept all”，就生成了全部代码。

第一步：上传代码文件到浏览器。

接下来，我们回到chrome浏览器，打开刚才生成的文件。

点击插件的小图标，这时候，就会看到我们刚才生成的文件列表，然后点击小图钉，选中之后就会在浏览器中显示了。

最终的界面是这样的。

第二步：浏览器调试debug。

但不幸的是不管我如何复制，界面都没有反应。那么没关系，我们继续问cursor。

我们等待cursor继续开发，然后回到浏览器对应的插件，重新点击一些刷新页面即可。

如果没有反应开关按钮也可以关掉再打开。

我们在看看结果如何，现在再去测试一切正常。

到这里为止，基本上chrome浏览器插件的开发就已经接近尾声了，你也可以直接把你的文件夹分享给你的小伙伴们一起使用了。

但是想要真正提交到应用市场，还有很长的路要走，预计时间1周左右，我们进入第4章节。

四、 chrome 浏览器上架浏览器市场

这部分内容相对较多，可以回复”插件商店”，会自动回复对应的详细教程！

写在后面的话

最近我的大部分时间都在AI编程领域，自己也整理了关于AI编程入门指南以及AI小程序开发的内容。

当然在里面也会遇到很多问题，也想和大瑜一起交流。那就联系我吧。