企业官网建设流程全解析

1. 从手动复制到自动归档：小红书采集的真实痛点

刷小红书时看到好选题，想带链接存下来，结果要么截图丢相册吃灰，要么复制粘贴到备忘录里再也找不到。手动整理到 Excel 更痛苦：标题、作者、正文、标签、点赞数、收藏数、评论数，七个字段来回切窗口，采一条笔记至少两分钟。一天采二十条，四十分钟就没了，还容易漏字段。

这个场景适合谁？适合零基础但愿意跟着步骤操作的开发者，适合做内容运营、选题调研、竞品分析的人，也适合想练手 Chrome 插件 + AI 编程的初学者。核心目标只有一个：点一下浏览器按钮，笔记数据自动写进飞书多维表格，采集链路一次跑通。

我试过用纯手动方式整理了两周，后来决定用 Cursor 写一个 Chrome 插件，配合 TaoToken 统一 API 做模型调用和调试辅助，把整条链路自动化。下面把可复制的配置骨架、manifest 写法、API 调用示例和本地验证动作全部拆开讲。

2. TaoToken 前置：统一 Key 与 settings.json 配置骨架

TaoToken 在这里的角色是统一 API 入口。你在 Cursor 里写插件时，需要让 AI 帮你生成代码、排查报错、优化提取逻辑，这些都需要模型调用。TaoToken 把模型对话、Coding Plan、API Keys 管理放在同一个控制台里，不用在多个平台之间切换。

官网地址：https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=

API 地址：https://taotoken.net/api

2.1 获取 Key 与模型对话入口

先到 API Keys 页面创建一个 Key：

https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite

创建后复制保存。如果你只是想先验证模型能不能正常对话，可以直接打开模型对话页面：

https://taotoken.net/models?utm_source=taotoken_aicg_blog_end&utm_content=models&utm_campaign=rewrite

长期做编码和 Agent 开发的话，Coding Plan 更适合：

https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite

2.2 settings.json 可复制配置骨架

在 Cursor 里，你可以把 TaoToken 的 API 配置写进项目的 settings.json 或环境变量文件。下面是一个可复制的骨架，把sk-你的Key替换成实际值：

{ "taotoken": { "base_url": "https://taotoken.net/api", "api_key": "sk-你的Key", "default_model": "claude-sonnet-4-20250514", "timeout": 30000, "max_retries": 2 }, "feishu": { "app_id": "cli_你的AppID", "app_secret": "你的AppSecret", "app_token": "多维表格base后的字符串", "table_id": "table后的字符串" } }

注意：api_key 不要提交到公开仓库，本地开发用 .env 或 .gitignore 排除。

如果你用的是 Claude Code 或 Anthropic 风格的调用方式，接入文档在这里：

https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite

Claude Code 专用接入说明：

https://taotoken.net/claude-code-anthropic?utm_source=taotoken_aicg_blog_end&utm_content=claude_code&utm_campaign=rewrite

3. Chrome 插件 manifest 与飞书 API 调用示例

3.1 manifest.json 最小可用骨架

Chrome 插件从 Manifest V3 开始，权限和后台脚本写法都有变化。下面是一个能跑通采集链路的最小骨架：

{ "manifest_version": 3, "name": "Redbook Collect", "version": "1.0.0", "description": "采集小红书笔记并写入飞书多维表格", "permissions": ["activeTab", "storage", "scripting"], "host_permissions": [ "https://www.xiaohongshu.com/*", "https://open.feishu.cn/*" ], "action": { "default_popup": "popup.html", "default_icon": { "16": "icon16.png", "48": "icon48.png", "128": "icon128.png" } }, "background": { "service_worker": "background.js" }, "content_scripts": [ { "matches": ["https://www.xiaohongshu.com/*"], "js": ["content.js"] } ] }

三个 icon 文件放在项目根目录，命名分别为 icon16.png、icon48.png、icon128.png，否则加载时会提示找不到图标。

3.2 飞书多维表格新增记录 API 调用

飞书多维表格新增记录的接口地址是：

POST https://open.feishu.cn/open-apis/bitable/v1/apps/{app_token}/tables/{table_id}/records

请求体结构如下，字段名必须和你在多维表格里创建的表头完全一致：

{ "fields": { "url": "https://www.xiaohongshu.com/explore/xxxx", "标题": "提取的标题文本", "作者": "提取的作者名", "正文": "提取的正文内容", "标签": ["标签1", "标签2"], "点赞": 19, "收藏": 21, "评论": 23 } }

获取 tenant_access_token 的请求：

{ "app_id": "cli_你的AppID", "app_secret": "你的AppSecret" }

请求地址：

POST https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal

注意：类型选 tenant，不要选 user。app_token 填多维表格地址栏 base 后面那串，不是应用本身的 app_token。

3.3 content.js 提取逻辑示例

小红书笔记页面的标题、作者、正文、标签、互动数据分布在不同的 DOM 节点里。下面是一段可参考的提取逻辑：

function extractNoteData() { const title = document.querySelector('.title')?.innerText || ''; const author = document.querySelector('.username')?.innerText || ''; const content = document.querySelector('.note-text')?.innerText || ''; const tags = Array.from(document.querySelectorAll('.tag')) .map(el => el.innerText.replace('#', '').trim()); const likeCount = parseInt( document.querySelector('.like-wrapper .count')?.innerText || '0' ); const collectCount = parseInt( document.querySelector('.collect-wrapper .count')?.innerText || '0' ); const commentCount = parseInt( document.querySelector('.chat-wrapper .count')?.innerText || '0' ); return { url: window.location.href, 标题: title, 作者: author, 正文: content, 标签: tags, 点赞: likeCount, 收藏: collectCount, 评论: commentCount }; }

实际页面结构可能随版本变化，建议先用 F12 确认当前选择器，再让 Cursor 根据实际 HTML 调整。

4. 本地加载插件并验证采集归档成功

4.1 加载已解压的扩展程序

打开 Chrome，地址栏输入chrome://extensions/，右上角开启「开发者模式」，点击「加载已解压的扩展程序」，选择你的项目文件夹。加载成功后，在扩展栏点击图钉固定插件。

4.2 配置参数并采集一条笔记

点击插件图标，进入配置页，填入：

• app_id（注意不是 tenant）
• app_secret
• 多维表格地址（含 app_token 和 table_id）

保存后打开任意一条小红书笔记页面，点击插件采集按钮。采集成功时按钮变绿，飞书多维表格里会新增一行记录。

4.3 验证归档结果

回到飞书多维表格，刷新页面，确认新增记录中七个字段是否都有值。如果某些字段为空，把对应的小红书页面 HTML 结构发给 Cursor，让它按实际选择器重新提取。

提示：如果采集后表格里没有数据，先检查 tenant_access_token 是否获取成功，再检查 app_token 和 table_id 是否填对。

5. 本篇常见错排查

5.1 插件加载报错「找不到 icon」

在项目根目录创建 icon16.png、icon48.png、icon128.png 三个文件即可。尺寸不对不会导致加载失败，但建议按标准尺寸生成。

5.2 飞书 API 返回 403 或权限错误

检查三个地方：应用是否发布了版本、多维表格是否添加了该应用、新增记录权限是否开通。没发布版本的应用在搜索里找不到，相当于暗恋不表白。

5.3 tenant_access_token 获取失败

确认 app_id 和 app_secret 复制正确，类型选 tenant。如果提示过期，重新获取一次 token 再试。

5.4 采集字段为空

小红书页面结构可能更新，选择器失效。把当前页面的 F12 HTML 片段发给 Cursor，让它重新匹配。标签字段如果是数组，确保飞书多维表格对应列类型是「多选」或「文本」。

5.5 Cursor 生成的代码跑不通

先检查 settings.json 里的 base_url 是否写成https://taotoken.net/api，api_key 是否有效。如果模型调用报错，到 API Keys 页面确认 Key 状态：

https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite

6. 继续跑通整条链路的下一步

采集链路跑通后，你可以把插件配置页做成独立标签页，容纳更多参数；也可以把提取逻辑封装成可配置的选择器映射，页面改版时只改配置不改代码。长期做编码和 Agent 开发的话，Coding Plan 能省不少模型调用成本：

https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite

接入文档和 Claude Code 配置参考：

https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite

https://taotoken.net/claude-code-anthropic?utm_source=taotoken_aicg_blog_end&utm_content=claude_code&utm_campaign=rewrite

先把一条笔记完整归档成功，再批量采集。链路通了，后面都是重复动作。