1. 为什么用飞书多维表格当浏览器插件的数据库做浏览器插件最头疼的不是写代码而是数据往哪存。用 localStorage 吧换台电脑就没了自己搭个后端吧服务器、数据库、接口一套下来插件还没写完人先累了。我这次要做的是一款文章收录插件核心需求就三个点一下把当前网页链接存起来、自动抓取标题和摘要、随时能拉回列表展示。这种轻量场景飞书多维表格刚好合适。飞书多维表格本质上是一个带 API 的在线表格你可以把它理解成「Excel 的外壳 数据库的内核 AI 的插件市场」。它免费版给了 10000 次 API 调用额度字段类型支持超链接、公式、自动编号还能挂 AI 字段捷径做网页内容读取和摘要提炼。对个人开发者和小团队来说这等于白嫖了一个带 AI 能力的云数据库。适合谁看这篇如果你会用 Cursor 写点前端代码懂基本的 JavaScript 和浏览器扩展概念想找一个不用自己维护后端的数据方案那这篇就是给你写的。整个链路我实测跑通过插件端提交链接 → 多维表格 AI 字段自动解析 → 插件端回读列表渲染。下面把字段结构、应用授权、读写配置和调试步骤全部拆开讲。先明确一下整体架构。浏览器插件负责三件事配置参数App ID、App Secret、多维表格 token、收集当前标签页链接、调用飞书 API 写入记录。飞书这边负责应用鉴权、多维表格权限管理、AI 字段自动解析文章内容。数据流是单向写入 单向读取插件不直接操作表格 UI全部走 Open API。这里有个关键认知飞书多维表格的 API 不是直接操作「表格」而是操作「多维表格应用」下的「数据表」。你需要先拿到 app_token多维表格的唯一标识和 table_id数据表的唯一标识再加上 tenant_access_token应用级鉴权令牌三个东西凑齐才能读写。很多人第一次调接口报 404 或者 403基本都是这三个 ID 搞混了。我在 Cursor 里写这个插件时最大的感受是把接口文档喂给 Cursor让它生成请求封装代码比自己对着文档手写快得多。但前提是你得先把飞书这边的字段结构和权限配置好否则 Cursor 生成的代码跑起来全是权限错误。所以这一篇先把「数据库」这半边搭稳下一篇再让 Cursor 集中火力写插件逻辑。2. 飞书多维表格字段结构与 AI 工作流搭建打开飞书官网进入云盘点新建选多维表格得到一个空白表格。默认会有几个字段我们全部改掉按下面的结构重新配。这套字段结构是我调了两版之后定下来的兼顾了 AI 解析和插件回读的便利性。第一个字段改名为「链接」类型选超链接。这个字段是插件写入的入口用户点收录时把当前页面 URL 塞进来。超链接类型的好处是表格里能直接点开而且 AI 字段捷径能识别它作为输入源。第二个字段改名为「全文内容读取」字段捷径选「AI 读取网页链接」。这个工具是收费的免费额度 300 次/月个人用完全够。配置时「需要访问的 URL」选第一个字段「链接」提示词填「提取全文内容」点确定后选「仅保存配置」——千万别选生成否则每加一行就立刻跑一次 AI额度哗哗掉。第三个字段改名「标题」字段捷径选「信息提取」从「全文内容读取」里提取标题。提示词可以写「提取文章标题只返回标题文本」。第四个字段改名「概要内容提炼」字段捷径选「DeepSeek-R1」同样从「全文内容读取」提取。提示词写「用 100 字以内概括这篇文章的核心内容」。第五个字段改名「概要内容输出」类型选公式编辑公式选「概要内容提炼.输出结果」。这一步是为了把 AI 字段的输出结果转成纯文本方便 API 读取。AI 字段捷径的原始输出是 JSON 结构插件端解析起来麻烦用公式字段拍平之后直接拿字符串。第六个字段改名「排序」类型选自动编号。这个字段用来给记录排序插件端回读时按这个倒序排列最新的文章排最前面。配完之后表格长这样链接超链接→ 全文内容读取AI→ 标题AI→ 概要内容提炼AI→ 概要内容输出公式→ 排序自动编号。你手动在第一列粘一个文章链接等几秒后面几列会自动填充。这就是整个「AI 工作流」——不需要写任何代码字段捷径帮你把网页抓取、标题提取、摘要生成全干了。这里踩过一个坑AI 字段捷径的执行是异步的你通过 API 写入链接后立刻回读是拿不到标题和摘要的因为 AI 还没跑完。我的处理方式是插件端写入后不等待用户下次打开列表时再回读这时候 AI 基本已经处理完了。如果你非要同步等可以在插件里加个延时重试但体验不好不推荐。还有一个细节多维表格的 API 写入时AI 字段和公式字段是只读的你只能写「链接」这种普通字段。所以插件端的写入请求体里fields 只需要包含链接这一个字段其他让飞书自己算。这个设计很合理避免了客户端篡改 AI 结果。3. 飞书应用创建与 API 读写配置字段搭好了接下来要让插件能通过 API 访问这张表。飞书开放平台走一遍企业自建应用的创建流程这一步是拿鉴权凭证的关键。进飞书开放平台点开发者后台创建企业自建应用。填应用名称和描述图标随便传一个。创建完成后进入应用详情页左侧菜单找到「权限管理」点「开通权限」。权限列表很长搜索框输入「多维表格」过滤把下面这几个勾上bitable:app查看、评论、编辑和管理多维表格bitable:app:readonly查看多维表格——如果你只读可以不勾编辑如果要用云文档相关能力再加drive:drive勾完点底部「确认开通权限」。然后左侧菜单找「版本管理与发布」点「创建版本」填版本号和更新说明保存并发布。企业自建应用一般需要管理员审核个人版飞书自己就是管理员直接通过。发布完成后回到「基础信息」→「凭证与基础信息」这里能看到 App ID 和 App Secret。这两个东西是插件端换 tenant_access_token 用的相当于账号密码别泄露。现在应用有了但还没权限访问你那张多维表格。回到多维表格页面点右上角「更多」→「添加文档应用」搜索你刚创建的应用名添加进来。这一步相当于把表格的访问权授予这个应用不做的话 API 会报 403。配置信息汇总一下插件端需要存四个值配置项说明获取位置App ID应用唯一标识开放平台凭证页App Secret应用密钥开放平台凭证页App Token多维表格标识表格 URL 中 base/ 后面那段Table ID数据表标识表格 URL 中 table 后面那段App Token 和 Table ID 从浏览器地址栏就能拿到。打开你的多维表格URL 长这样https://xxx.feishu.cn/base/XXXXXXXX?tableYYYYYYYYbase/后面那串是 App Tokentable后面那串是 Table ID。如果你用 Cursor 写代码可以把这段配置结构直接丢给它生成 TypeScript 类型{ feishu: { appId: cli_xxxxxxxxxxxx, appSecret: xxxxxxxxxxxxxxxxxxxxxxxx, appToken: xxxxxxxxxxxxxxxxxxxxxx, tableId: tblxxxxxxxxxxxxxx } }注意 App Secret 不要硬编码在前端代码里提交到仓库。浏览器插件虽然跑在本地但打包发布后代码是可读的。稳妥做法是让用户在插件设置页自己填存在 chrome.storage.local 里。我实测下来个人自用的话直接填也行但养成好习惯没坏处。鉴权接口是POST https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal请求体传 app_id 和 app_secret返回 tenant_access_token有效期 2 小时。插件端需要缓存这个 token过期了再重新换不要每次请求都去换否则容易触发频率限制。4. 写入与回读验证跑通最小链路配置齐了先用 curl 或者 Postman 验证一遍读写确认链路通了再写插件代码。这一步能帮你排除掉 90% 的权限和参数问题。先换 tokencurl -X POST https://open.feishu.cn/open-apis/auth/v3/tenant_access_token/internal \ -H Content-Type: application/json \ -d { app_id: cli_xxxxxxxxxxxx, app_secret: xxxxxxxxxxxxxxxxxxxxxxxx }返回里拿到tenant_access_token复制出来。然后写入一条记录curl -X POST https://open.feishu.cn/open-apis/bitable/v1/apps/{app_token}/tables/{table_id}/records \ -H Authorization: Bearer {tenant_access_token} \ -H Content-Type: application/json \ -d { fields: { 链接: { link: https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content, text: TaoToken 官网 } } }注意超链接字段的写入格式是{link: ..., text: ...}不是直接传字符串。这个格式我第一次写错了传了纯字符串接口返回 400排查了半天。写入成功后等几秒让 AI 字段跑完然后回读curl -X GET https://open.feishu.cn/open-apis/bitable/v1/apps/{app_token}/tables/{table_id}/records?page_size10sort排序%20DESC \ -H Authorization: Bearer {tenant_access_token}返回的 JSON 里items[].fields包含每一行的所有字段值。你会看到「标题」「概要内容输出」已经被 AI 填好了。如果这两个字段是空的说明 AI 还在跑或者配置有问题回表格页面看看字段捷径的状态。回读时有个坑公式字段「概要内容输出」在 API 返回里可能是数组格式比如[{text: xxx, type: text}]需要取[0].text。不同字段类型返回结构不一样超链接返回对象文本返回字符串公式可能返回数组。插件端解析时要按字段类型分别处理不能一刀切。验证通过后整个最小链路就通了写入链接 → AI 自动解析 → 回读拿到标题和摘要。下一篇我会用 Cursor 把这个链路封装成浏览器插件包括 popup 界面、设置页、后台 service worker 和 API 请求模块。如果你现在就想动手可以先把上面的 curl 命令跑通把四个配置值记好插件代码里直接复用。5. 常见报错排查对照调飞书 API 的过程中我踩了不少坑这里按报错信息整理一份对照表遇到问题直接查。401 Unauthorized / tenant_access_token 无效最常见的原因是 token 过期了。tenant_access_token 有效期 2 小时插件端必须做缓存和刷新。如果你在 curl 里手动复制 token超过两小时就会报这个。另一个原因是 Authorization 头格式写错了必须是Bearer {token}Bearer 和 token 之间一个空格别多别少。403 Forbidden / permission denied权限没开全或者应用没被添加到多维表格。检查两处开放平台权限管理里bitable:app是否开通并发布多维表格的「添加文档应用」里是否加了你这个应用。两处都对了还报 403看看是不是表格的所有者权限问题换一个有编辑权限的账号试试。404 Not Found / app not foundApp Token 或 Table ID 填错了。从浏览器地址栏重新复制一遍注意 base/ 后面到 ? 之前是 App Tokentable 后面到 之前是 Table ID。别把整个 URL 粘进去。400 Bad Request / field validation failed写入字段格式不对。超链接字段要传{link: ..., text: ...}文本字段传字符串数字字段传 number。AI 字段和公式字段是只读的写入请求里带上它们会报错只传「链接」就行。local proxy failed / 请求超时如果你在插件里请求飞书 API 遇到网络错误先确认是不是浏览器扩展的 host_permissions 没配。manifest.json 里要加host_permissions: [https://open.feishu.cn/*]否则跨域请求会被拦截。这个报错在 Cursor 生成的代码里经常出现因为它默认不知道你要请求外部域名。reading choices of undefined这个报错通常出现在你用了某个 AI 接口封装库返回结构不符合预期。飞书多维表格的 AI 字段是服务端执行的插件端不直接调模型所以正常不该出现这个错。如果你在插件里自己接了模型接口做摘要检查返回 JSON 里 choices 数组是否存在加个空值判断。OAuth 相关报错企业自建应用用 tenant_access_token 鉴权不需要走 OAuth 授权码流程。如果你看到 OAuth 相关的报错说明你可能误用了 user_access_token 的接口。个人自用场景下tenant_access_token 足够了别去折腾 OAuth。排查顺序建议先确认 token 能换到 → 再确认权限已开通 → 再确认应用已添加到表格 → 最后检查请求体字段格式。按这个顺序走基本能定位到问题。6. 下一步用 Cursor 把链路封装成插件飞书这边的数据库和工作流已经跑通了你现在手里有四个配置值和一套验证过的 API 调用方式。下一篇的核心工作是在 Cursor 里写浏览器插件把这套链路封装成用户点一下就能用的工具。插件的大致结构我会这样组织manifest.json 声明权限和入口popup.html 做收录按钮和列表展示options.html 做配置页让用户填四个值background.js 处理 API 请求和 token 缓存。Cursor 在这个过程中主要负责生成请求封装、错误处理和 UI 代码但前提是你把这篇里的字段结构和接口格式喂给它否则它生成的代码大概率跑不通。如果你还没拿到 API Key 或者想先体验一下模型对话能力可以走这个入口模型对话。长期做编码和 Agent 开发的话Coding Plan 更划算。接入文档在 接入文档API Keys 管理在 API Keys。下一篇见到时候直接上 Cursor 写代码把今天配好的多维表格真正用起来。
