摘要

文科生也能零代码开发浏览器插件，通过AI编程工具如Cursor和油猴，15分钟内实现小红书下拉词采集和标签页批量导出，效率提升80%，解决日常工作中的高频痛点。

AI 编程已经变成了 AI 落地应用的第二大市场了，仅次于对话形式的产品。

已经有越来越多无代码基础的文科生，通过 AI 编程，实现了大大小小复杂的产品，更重要的是，这些产品能帮助到自己在日常生活工作中提高效率。

完完全全是给个人需求做的 DIY 定制，放在以前，成本高的无法想象。

如果你也想开始用 AI 编程来做产品，但不知道做什么？

我推荐你从「浏览器插件」开始。

不要小看「浏览器插件」，它虽小但五脏俱全：

1. 是一个完整的产品

2. 把用浏览器过程中的高频痛点，做成自动化插件，少说能提高 70% 的效率

3. 同时，可以作为开发者，卖插件赚钱

接下来，接着「浏览器插件」，跟着饼干哥哥来看看一个完整的产品开发路径是怎么样的。

浏览器插件，有两种模式：

1. 是借助第三方的平台运行，例如**油猴，适用于「单个页面」**的数据处理

2. 是用谷歌浏览器原生插件的方式运行，适用于**「跨页面」的场景**

「油猴插件」的案例

豆包、即梦等工具生成的图有水印，开发一个下载无水印图的浏览器插件：

「原生插件」的案例

例如我之前分享的快速采集多个页面标题和链接的插件：

开发计划

今天我们就同时开发这两种形式的插件，一次性解决浏览器插件开发的问题。

初级：

对于「油猴」插件，我们开发一个小红书下拉词采集器，适用于笔记选题、埋 SEO 关键词等场景

如下图：

进阶：

对于「原生」插件，就按我之前文章里讲到的，标签页采集器，适用于公众号、小红书笔记等网页地址批量采集场景

开发实践

初级入门——小红书下拉词采集器

工具准备

油猴

油猴是一个可以让用户在浏览器里运行 JS 脚本的工具，直接在 Chrome 商店里搜索安装即可

也可以搜索到官网去安装：

接着等写好代码来安装脚本就好了。

AI 编程工具——Cursor

推荐 Cursor，如果没有的，其实也可以用 DeepSeek V3 来开发，或者 Trea

这里我们用 Cursor

设置规则

我们知道，用好 AI 就要写好提示词，AI 编程也不例外。

在 Cursor 中，设置好 规则 rule 就相当于给这次项目写提示词

规则有两种：

1. 全局的，适用于所有项目，可以放通用的规则

2. 项目级的，只适用于当前项目，避免不同项目之间的技术栈混乱

对于全局规则，可以直接用我这个：

Always respond in 中文

# Role    
你是一名极其优秀具有20年经验的产品经理和精通所有编程语言的工程师。与你交流的用户是不懂代码的初中生，不善于表达产品和代码需求。你的工作对用户来说非常重要，完成后将获得10000美元奖励。

# Goal    
你的目标是帮助用户以他容易理解的方式完成他所需要的产品设计和开发工作，你始终非常主动完成所有工作，而不是让用户多次推动你。

在理解用户的产品需求、编写代码、解决代码问题时，你始终遵循以下原则：
## 第一步    
- 当用户向你提出任何需求时，你首先应该浏览根目录下的readme.md文件和所有代码文档，理解这个项目的目标、架构、实现方式等。如果还没有readme文件，你应该创建，这个文件将作为用户使用你提供的所有功能的说明书，以及你对项目内容的规划。因此你需要在readme.md文件中清晰描述所有功能的用途、使用方法、参数说明、返回值说明等，确保用户可以轻松理解和使用这些功能。

## 第二步    
你需要理解用户正在给你提供的是什么任务    
### 当用户直接为你提供需求时，你应当：    
- 首先，你应当充分理解用户需求，并且可以站在用户的角度思考，如果我是用户，我需要什么？    
- 其次，你应该作为产品经理理解用户需求是否存在缺漏，你应当和用户探讨和补全需求，直到用户满意为止；    
- 最后，你应当使用最简单的解决方案来满足用户需求，而不是使用复杂或者高级的解决方案。

### 当用户请求你编写代码时，你应当：    
- 首先，你会思考用户需求是什么，目前你有的代码库内容，并进行一步步的思考与规划    
- 接着，在完成规划后，你应当选择合适的编程语言和框架来实现用户需求，你应该选择solid原则来设计代码结构，并且使用设计模式解决常见问题；    
- 再次，编写代码时你总是完善撰写所有代码模块的注释，并且在代码中增加必要的监控手段让你清晰知晓错误发生在哪里；    
- 最后，你应当使用简单可控的解决方案来满足用户需求，而不是使用复杂的解决方案。

### 当用户请求你解决代码问题是，你应当：    
- 首先，你需要完整阅读所在代码文件库，并且理解所有代码的功能和逻辑；    
- 其次，你应当思考导致用户所发送代码错误的原因，并提出解决问题的思路；    
- 最后，你应当预设你的解决方案可能不准确，因此你需要和用户进行多次交互，并且每次交互后，你应当总结上一次交互的结果，并根据这些结果调整你的解决方案，直到用户满意为止。

## 第三步
在完成用户要求的任务后，你应该对改成任务完成的步骤进行反思，思考项目可能存在的问题和改进方式，并更新在readme.md文件中

# 其他要求
对于python使用loguru来做日志，不用print，而是用日志输出

对于项目级规则，以前，还需要苦逼的自己写，但 Curosr 0.50 版本后能自动生成了，命令是 /Generate Cursor Rules

如果是已有项目（例如从 Github 下载的），直接运行命令，Cursor 对读取当前项目文件，判断在做什么，然后写规则

例如，我现在已有的项目：

一口气给我生成了 4 个规则文件：

如果你还没项目，也可以通过添加描述词 + 命令的形式来让 Cursor 生成，例如：

我要用Plasmo框架开发 Chrome浏览器插件，用于批量采集标签页信息。请帮我创建合适的 Cursor Rules /Generate Cursor Rules

用油猴的话，就换成油猴的字眼即可。

这样就能更大概率确保 AI 不会乱来了。

明确产品开发需求

不着急写代码，在做开发之前，一定要想好自己的需求是什么。

尤其是 AI 编程时代，如果能把你的需求描述的非常清晰，基本上代码就很快能生成好了。

由于初级这个需求不是很复杂，我把这方面的演示放到下面**「进阶」部分**来讲

AI 编程开发

首先，油猴插件的原理就是在网页上执行 JS 脚本

而由于我们需要让油猴在页面中捕捉数据，也就是下拉词，而数据在不同页面是以不同的形式存在的

想让 AI 开发小红书页面的插件，就要先让 AI 知道小红书的页面结构长什么样？

怎么做？最简单的方式就是把页面的代码给它。

常见的方式是直接看「页面源代码」

但对于动态网站，也就是反爬比较好的，这方法行不通

这里要用「检查」功能

因为我们要处理的是搜索结果，所以就在搜索框右键，点检查

接着会弹出一个页面代码结构，这些是网页真正的代码

鼠标移动到哪个位置，左边页面就跟着高亮，说明这里是这个位置的代码

此时我们直接 copy element 复制元素

在搜索框输入关键词后，才会出现下拉框的代码，也复制

理论上复制越多代码越好。

接着，就可以回到 Cursor，提要求：

参考提示词，记得把页面代码给它：

我需要开发一个「油猴」插件，是小红书下拉词采集器，适用于笔记选题、埋SEO关键词等场景

要求：
1. 如图用户在小红书搜索框输入某个关键词后，会出现下拉词
2. 在小红书页面添加一个「采集下拉词」的按钮
3. 点击按钮后，把这些下拉词搜集起来，并且导出为txt格式的文本即可。

请给我油猴插件的js脚本代码即可。

页面相关的代码参考：

把前面捕捉到的代码放进来

一阵操作后得到：

其实这样就完成开发了，太简单了！！

现在还不知道有没有问题，先安装来看看。

怎么用

打开浏览器，在如图位置，点开油猴。

1. 添加新脚本

1. 全选脚本内容，把小红书评论采集的脚本黏贴进去，保存

然后就能看到列表里多了个插件，确保是打开状态

1. 此时回到小红书页面，就能看到油猴「亮灯」证明插件正常运行

同时，页面也多了一个「采集下拉词」的按钮

此时，我们在搜索框输入关键词「英语」，点按钮

就会看到它开始采集，并自动下载结果.txt

打开后长这样

至此，我们就完成了油猴插件的开发了。

升级版

这么一点下拉词，肯定是不够我们用的，怎么办？

可以学习这个文章：

借助 A-Z 大法，升级插件，自动把关键词的 26 个组合加载下载：

例如，我搜英语，它会自动搜 英语 A、英语 B、英语 C…. 英语 Z

得到的效果：

进阶升级——标签页采集器

工具准备

Plasmo

这是一个专门用于开发浏览器插件的框架，建议搭配 pnpm 使用，官网：https://www.plasmo.com/

如果不用这个框架，直接用原生的方式去写也是可以的，但如果涉及相对复杂的功能，就会更麻烦一些。

Plasmo 的使用也很简单，通过以下语句初始化项目：

pnpm create plasmo
# OR
yarn create plasmo
# OR
npm create plasmo

（前提是你要安装好 node.js，可以网上搜一下）

打开 Cursor，打开终端 Terminal，然后输入上面的命令，随后会让你填写这个插件的信息

接着它就会帮你新建好文件夹，安装好依赖，这样就初始化好了

Cursor 也是同样要新建规则，我们在前面初级版的时候就已经做过了。这里不赘述。

明确产品开发需求

不着急写代码，在做开发之前，一定要想好自己的需求是什么。

尤其是 AI 编程时代，如果能把你的需求描述的非常清晰，基本上代码就很快能生成好了。

例如，我说：

我要用plasmo框架开发Chrome浏览器插件：link-collector

功能是：
1. 点击后，弹出一个界面，点可以让我采集所有浏览器标签页的网址、标题
2. 采集后的网址、标题，展示在界面里，并且可以选中或取消选择
3. 有导出Excel的功能
4. 同时还可以复制，确保黏贴到Excel中也保持同样的格式

请帮我生成产品开发需求文档，要包含markdown格式的界面示意图

其中「界面示意图」是很重要的，因为所见即所得，但我们没必要自己去画，让 AI 生成就好了：

必须认真看这个文档，如果跟你想象的差距比较大，就让 AI 去修改，否则自己调一下就好

享受这个做甲方的过程，让 AI 改到满意为止！！！

对了，为了节省 Cursor 的快速请求，可以在其他地方完成这个文档的生成。

新建一个Readme.md的文档，把内容放进去，这就是我们接下来要让 AI 开发的依据。

AI 编程开发

其实真正复杂的地方是在上一步，只要文档足够清晰，这一步反而是最简单的

只需要让 AI 照着文档来开发就好了

等 AI 一顿操作完（我们甚至都不用管它在干嘛。。）

在终端运行 pnpm dev

会看到项目路径下的 build 文件夹下出现新的文件夹，以 dev 后缀的就是开发测试版本，足够我们用了。

如果要上线谷歌商品正式发布的话就要运行 pnpm build，文件夹后缀就是 prod 版本了。

怎么用？

打开谷歌浏览器，如图位置打开「管理扩展程序」

务必打开「开发者模式」

然后点「加载已解压的扩展程序」

在弹出窗口，选中前面我们打包好的 build 文件夹里的 dev 文件夹

此时，我们就看到扩展程序里多了个 Link collector

这里有个小技巧，如果我们要对插件进行升级更新的话，在 pnpm dev 后，在这里点「重新加载」即可

只要保持原先的文件夹路径不变，它就能重新读取文件夹的内容，做更新升级，很方便。

此时，在页面就能看到我们开发的插件，点开就能看到这样的面板：

测试功能是正常的，如果你那边报错了，就要扔给 AI 重新改，然后按上面说的「重新加载」即可。

对于复制到剪贴板的功能：

复制后，直接在 Excel 黏贴也能保持表格的格式，完美！！

AI 无痛开发建议

AI 编程做开发最怕的是从 0 开始，你是，AI 也是

所以最好的方式就是先采集一批模板，让 AI 去学习，再生成新的脚本

例如油猴脚本插件的，先从网上找 3、5 个小红书脚本 js 文件，放到文件夹里，让 Cursor 生成规则后，再让 AI 按你的想法来生成新的插件。

有奇效，很多时候一次就成功了。

这样的形式，连复杂的 AI 工作流，例如 n8n 也能开发。

相反，如果啥都没有，让 AI 去跑，很容易报错。

那报错了怎么办呢？

1 个是口述 + 截图，说错在哪里了，让 AI 去

这种方式很容易讲不清楚

另一种更好的方式就是让 AI 务必在插件的运行过程加入「输出日志」

然后在**「检查」进去的「控制台」里，就能看到插件的输出过程。**

要是报错了，就把这里的输出复制黏贴扔给 AI，它就知道自己错哪了。

昔日里那些需要繁琐代码才能攻克的难题，如今在 AI 的加持下，变得触手可及。

想象一下，当那些曾让你头疼的重复劳动被自己亲手打造的插件悄然化解，当你的数字世界因你的创造而变得更加得心应手——这便是 AI 编程赋予我们的“小确幸”与“大潜能”。

所以，何不现在就动手，用 AI 为自己打造第一款效率插件，开启属于你的“魔法”时刻呢？

---