今天做了一个自媒体人都超爱😍的插件。我相信你以前也一定有过这样的困扰，看到一篇好的选题，想要保存下来，但是一个一个的复制粘贴是不是太麻烦了。
要是有一个软件可以直接一键就保存到文档，那该多好了~
在笔记页面点击提取并保存到飞书按钮就可以
不用自己粘贴复制，只需要在采集前配置好飞书文档地址、飞书的App Token 和 App Secret三个值就可以了
项目地址在文末领取👇
创建飞书应用
为什么要创建飞书应用呢？这是为了浏览器插件与飞书表格进行通信。
创建应用后就会有对应的访问凭证（access_token）可以进行身份鉴权。
备注：这边需要注意，如果你不是公司的管理员，那你就用个人的飞书号；因为用公司的账号需要各种管理员审核，很麻烦。
创建好应用之后，我们会跳转到这个添加应用的界面，下面的功能和场景大家额可以根据自己的需要添加，咱们今天的这个不需要，就先不添加。
应用需要发布后才能生效，所以我们点击这边填写信息后发布。
创建好应用之后，我们在新增记录这边添加我们创建的应用，并添加对应的权限
直接勾选之后确认开通就可以，主要是上面两个功能。
飞书平台API测试
测试前需要配置API 的访问凭证参数，这边使用tenant_access_token，以应用身份调用 API，可读写的数据范围由用户可读写的数据范围决定。这样分享给其他人也能使用。
接下来我们填写路径参数，这个是说明操作的是哪个表格。所以路径参数的这两个是从我们的飞书文档链接提取，复制粘贴过去。
填写完路径参数之后就把我们需要的往飞书表格中填写的字段的json格式填入请求体中测试：
这个事对应的请求体代码，可以直接复制：
{
"fields": {
"url":"<页面的URL>",
"标题":"<提取的标题title文本>",
"作者":"<提取的作者username文本>",
"正文":"<提取的正文note-text文本>",
"标签":["<提取的标签tag 文本>"],
"点赞":65,
"收藏":50,
"评论":23
}
}
填写完请求体之后我们直接点击调试，这边看到显示调试成功，但是下面有报错:
看不懂不要慌，把这个错误复制发给deepseek，根据deepseek的修改结果调整，修改飞书表格中标签的格式
把原先标签的文本格式修改成多选格式
修改完之后重新调试，就成功了，
OK，现在调试都成功了，接下来我们就需要通过api来实现这一流程。
这边的话通过api来请求的话，就没有办法像调试台那样点击就可以获取访问凭证。
通过user_access_token获取凭证，所以我们不用在飞书表格中添加应用，但是我们会看到需要的字段太多了，并且code还涉及授权码，很麻烦。
所以这次我们选择 tenant_access_token来获取凭证，这边的话只需要两个字段，超级便捷。
请求体的这两个参数要从哪里获取呢？聪明的你一定还记得刚才我们创建应用的时候，见过这两个字段。没有错，就是这两个。
通过这个获取凭证飞书链接，同时也测试了新增记录的功能，我们的小红书笔记自动采集的步骤已经完成了2/3了。接下来就是搞定飞书的笔记采集功能。
采集页面找特点
采集笔记的功能，说得通俗易懂一点就是爬取数据。那我们就需要了解我们需要的字段的代码有什么唯一的特点，这样有助于精准识别、定位获取。
那具体要怎么看？
我们在想要获取笔记的页面，右击检查（或者按住F12），就会出现代码页面。
接下来我们就需要找到笔记相关的内容
1.页面的URL，这个是比较好获取的，直接提取打开笔记当前页面的链接；
2.作者名字：提取 class="username"的标签中的文本内容
3.笔记标题：提取 class="title" div 中的文本内容
4.笔记内容：提取 class="note-text"的 div 中第一 标签内文本内容
5.笔记的标签： 提取 class="note-text"的 div 中 class="tag"的标签内的文本内容，一般有多个
6.笔记点赞数：提取 class = "like-wrapper" 的 div 下 class="count"的 标签中的文本内容
7.笔记收藏数：提取 class = "collect-wrapper" 的 div 下 class="count"的 标签中的文本内容
8.笔记评论数：提取 class = "chat-wrapper" 的 dive 下 class="count"的 标签中的文本内容
这边要注意的是，有些笔记的点赞数、收藏数、评论数是按照万为单位的，所以我们在提取这三个字段时，不能用数字，而且采集为文本值。
最开始我写的时候也是用数字，然后采集的时候发现3.2万这种点赞数，采集到表格的只有3.2。
AIcoding采集插件
前面的所有准备工作都做完了，那接下来就可以写这个小红书笔记的才加插件了。
在写插件时，我们需要先盘一下需要的内容：
1.项目的介绍
帮我写一个浏览器插件，实现如下功能
## 插件概述
- 插件名称：Redbook Collect
- 功能概述：一个提取网页信息写入到飞书多维表格的插件。
- 运行环境：chrome 浏览器
- 点击插件后，以侧边栏（Sidebar）形式呼出
2.页面交互逻辑
## 功能和交互说明
- 首次点击插件，检测用户是否已完成必备的配置信息填写，如果缺失则弹出窗口要求用户填写。
- 配置页面在单独的网页标签打开
- 点击插件后识别当前是否已打开小红书笔记详情页，表征是页面的 HTML 代码中包含 id 为 noteContainer 的 div
- 如果未打开笔记详情页，则提醒需要打开一篇笔记才能提取内容；
- 在已经打开笔记的情况下，提取这些内容
3.API接口示例
curl -i -X POST 'https://open.feishu.cn/open-apis/bitable/v1/apps/{app_token}/tables/{table_id}/records' \
-H 'Content-Type: application/json' \
-H 'Authorization: Bearer t-g104**' \
-d '{
"fields": {
“URL”:"https：//……"
"作者": "阿群的AI实战笔记",
"收藏": 5,
"标签": [
"#AI",
"#人工智能"
],
"标题": "在等邀请码的速来，扣子空间测评+送邀请码",
"正文": "这个是我之前在做个人博客的时候，想要在我的博客上展示自己做过的智能体时，然后用户点击可以直接使用时遇到的情况，相信很多朋友再一次安装的时候也会有一些无从下手，今天教大家快速学会。跟着阿群快速上手",
"点赞": 48,
"评论": 2
}
}'
4.Authorization密钥请求示例
curl -i -X POST 'https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal' \
-H 'Content-Type: application/json' \
-d '{
"app_id": "cli_slkd**",
"app_secret": "dskLLd**"
}'
把上面的内容整合好发给windsurf，很快整个项目就完成了。
5.注意事项
1.在给AI开发文档时，要详细的把完整的功能、API的请求示例以及页面的交互逻辑详细的描述清楚；
2.遇到bug不要慌，把遇到的问题直接复制给AI，尽量详细的表述，这样AI能更好的知道问题并做出修改；
3.很多朋友在小红书页面提取对应的关键词词，可能怕自己的表格不够清晰，那可以把右侧的整个笔记页面的内容的代码全部复制到一个html文档，让AI读取信息的 HTML 代码片段理解它的代码结构。
插件安装
1.点击谷歌浏览器的扩展——管理扩展程序——加载已解压的扩展程序
2.添加插件文档
3.打开对应的开关，才能正常使用
4.页面测试 第一次打开，配置状态和页面状态可能会提示异常。
这时候需要先需要配置对应的表格 URL和飞书的App Token 和 App Secret 。配置完成后配置状态就变成绿色。
然后点击提取保存按钮，查看下面的笔记内容是不是跟之前的一样，如果一样的话，那就看一下飞书多维表格是不是保存了信息。
看到飞书多维表格里面的笔记内容跟提取的一样，说明你的插件成功运行了。恭喜你🎉
如果提取的内容跟笔记不一样，这时候把问题发给windsurf修改，再次验证。直到所有的功能都能正常使用。
是不是特别方面，然后整个文档看上去特备清晰，一眼就知道标题对应的热度。特别是标签，可以让我们快速找到跟自己账号定位一样的内容。
如果你想进一步了解如何用AI带来现实收益？
而不是只是认识工具or技能而已？你可以购买星球后链接我👇
往期文章：
mcp配置很难吗？扣子空间支持把自己的工作流添加为mcp了。轻松实现，效果很不错~
秘塔AI新功能「今天学点啥」上线，如何让知识主动适配你的大脑？
