大家好我是阿星👏🏻！
你平常有没有看到好选题，想带链接保存下来的时候呢？又不太方便直接整理到excel里🤔
现在，我们将通过AI coding的方式，构建chrome插件。一键采集心仪小红书笔记并瞬间传送到飞书文档的～效果👇
不用做任何下载，填写地址、飞书appid
轻轻在浏览器里点击采集即可～
所有标题、正文、点赞数、评论数、标签都被存到多维表格里啦～
核心结构如下：
创建多维表格应用
首先打开API文档。
小白不用纠结什么是api，就是钥匙🔑。代码这东西太精密了，要让外界精密地和飞书多维表格对接就得有🔑。
API文档有很多很多，你要用到的只是飞书多维表格API里的新增记录这一项，文档地址传送门：
另外给多维表格添加应用。
为什么要添加？
光有钥匙🔑还不行，代码很挑剔不是谁都接待，往往是封装好的才能对接。相当于火箭先在工地上装个发射台，才能上天，这个应用你就当是接驳的，送你的代码上天用的发射台。
先去右上角创建一个应用。
然后在你刚才创建的应用里👉🏻新增记录👉🏻调试台
拿到app token和app secret。
先保存下来。
初步查看API文档
要测试就要有API——至于为什么要测试，因为API这个东西你最后几步编程也要看能否跑通，到时候用cursor测试还是浪费你钱，现在飞书上试试，能跑通的话，到时候直接复制粘贴直接让cursor写。
现在咱们只主打一个知道API那一坨代码在哪里就可以了，不用每一句都看懂。
AI能看懂就行了，AI就是咱们实习生，不会再问就行了。
先随便看看👇🏻
你可以从API文档里发现，最关键的就是这几行，也就是fields字段：比如可以提炼为下面的格式，相当于火箭的body身体。我们最后测试用的也是这几行。
先填到测试台的请求体，也就是body里
{ "fields": { "url": "<页面的URL>", "标题": "<提取的标题title文本>", "作者": "<提取的作者username文本>", "正文": "<提取的正文note-text文本>", "标签": ["提取的标签tag", "文本"], "点赞": 19, "收藏": 21, "评论": 23 }}创建多维表格
与此同时，在飞书多维表格里创建一个表头一样的飞书多维表格。
注意tableid是table后面这串字符👇🏻，
先复制保存下来。
然后要开通改一下新增记录权限，并发布！不发布相当于暗恋不表白，没用。
点击发布，一个完整的服务就被你发布了，多么复杂的科技就被这简单的可视化界面搞定了🤔。
给多维表格连上应用
然后回去打开多维表格，多维表格里也要连上我们创建的飞书应用，才能工作。
如果你前面忘了做上线那一步，
你会发现搜不到自己刚创建的应用，尴尬了😂
回到工作台。左下角点版本管理与发布，上线新版本就行了。
回到刚才多维表格里添加应用的地方，重新添加一次即可。
测试API
接着，我们回到控API调试控制台，继续填写测试参数，
你会发现调试台上还让填一个apptoken，千万别填成文章开头创建的应用的apptoken，跟着下面这个图，把你创建的多维表格的地址栏里base后面的一串填进去就可以了👇🏻
另外一个appid直接复制控制台的。
类型选tenant，不要选user！！！！！！！
参数过期就点下获取token就可以了
测试~
可以发现，内容已经成功写入了。
这说明我们上面测试过的，这段请求体是正确的，之后可以放心发给AI：
{ "fields": { "url": "<页面的URL>", "标题": "<提取的标题title文本>", "作者": "<提取的作者username文本>", "正文": "<提取的正文note-text文本>", "标签": ["提取的标签tag", "文本"], "点赞": 19, "收藏": 21, "评论": 23 }}这段能跑通的API，先放在这里。
梳理小红书页面元素
解决了如何通信，我们要解决通信什么的问题。
到底爬小红书的啥啊？
我们来解决捕获标题、作者、正文元素的问题，根据F12翻出的元素找到对应值。
你会发现最后就集中在note和text相关的块块里有笔记内容，在data-clas-count里也有相关数据。
其实你也可以让AI给你找，前提是自己有数，不然很容易被忽悠……
最后总结下来对应关系是👇🏻
提示词的6个组成部分
接着我们撰写提示词👇一共分为6个部分，
你的总提示词必须有下面这些内容，自己整理成一个大提示词发给cursor就行了👇
1、项目概述
插件基础信息名称：Redbook Collect功能定位：网页信息提取+飞书多维表格写入运行环境：Chrome浏览器2、核心功能流程
graph TDA[用户点击插件] --> B{配置检测}B -->|未配置| C[弹出配置窗口]B -->|已配置| D{页面检测}D -->|非小红书笔记页| E[显示提示]D -->|有效笔记页| F[执行数据提取]F --> G[构建JSON数据结构]G --> H[调用飞书API写入]3、配置参数和独立标签页
告诉AI，用户需要输入的必要参数：
表格URL（含app_token和table_id）
app_token
app_secret
以及，用户和插件之间的交互方式：独立标签页配置（配置项较多（如飞书的 app_token、table_id、app_secret 等），弹窗（Popup）空间有限，独立标签页提供更大的布局空间。）
4、html上的数据提取范例
告诉AI它分别需要抓取的是小红书页面上的哪些元素。
5、交互逻辑设计
告诉AI整个的工作原理是什么，就是代码的蹦迪路线是什么。
认证流程：用app_token/app_secret获取tenant_access_token携带token进行数据写入URL参数解析逻辑：原始URL → 提取app_token → 提取table_id请求体结构：{"fields": { "url": "String", "标题": "String", "作者": "String", "正文": "String", "标签": ["String"], "点赞": Int, "收藏": Int, "评论": Int }}6、其他辅助
告诉AI其他可能遇到的情况：
异常处理：
- 配置缺失提醒（用户没有填好密钥还怪你软件不行）非目标页面提醒（用户打开baidu让你采集小红书）认证令牌刷新机制（隐含）
开发辅助
- 完整API请求示例关键变量提取示例（关键变量就是你得先填好的飞书账号密码和表格地址，加上要从小红书页面上抠下来的标题、作者、点赞这些具体内容）
- 提供小红书某一个页面的HTML结构参考也就是👇小红书中要被提取信息的html中，所有的F12出来的html全都发给大模型，作为附件（可选，我亲测没有这个附件也还行）。
现在恭喜你终于可以开始编程了。同时提醒大家，稍微复杂点的AI编程都是这样提前设计很长的提示词的，不是和AI聊天聊出来的。
用cursor辅助编程
首先在本地随便创建一个英文的文件夹，然后在cursor里打开这个文件夹👇总结上面的6项为一个提示词发过去之后很快项目就出来了
它还给出了整个Readme文档。（说明文档）
在Chrome测试插件
我们放到浏览器里试试。
打开开发者模式，加载已解压的扩展程序
然后就可以载入使用啦～
系统可能会提醒你找不到icon。其实只用在你的项目根目录下创建3张照片如下命名即可：
记得在右上角pin一下！
点击插件图标，配置appid那些参数
注意，插件里第一行就是appid （注意不是tenant！！！） ，第二行就是appscrect，就是控制台里的这一对👇🏻
加上飞书多维表格地址就行了👇🏻
随便找个文章试试，哇哦很快就可以采集上~
采集成功即为绿色👇
你会发现多维表格里神奇了多了几行～
但是你会看到有的字段没有采集到信息🤔！！！
别捉急，可以让AI严格按照下图对应关系再采集一遍：
和AI重申之后你就会发现，它又行了！每个字段都给你咔咔爬下来了👍
是不是很方便哦～特别是对标签的收纳，让我们一眼就知道自己关注的话题集中在哪个领域
往期文章：
