同步网页到扣子知识库

课程导读

用 Claude Code 开发一个 Chrome 插件：浏览网页时，一键把当前页面的网址、标题和内容同步到扣子知识库。

一、课前准备

准备项	说明
扣子 API Key	调用知识库接口需要
知识库 ID	同步目标；开发时可在插件设置页填写
UI 风格参考（可选）	本课用 get design.md 的 Binance 风格

创建扣子 API Key

扣子编程

1. 登录后进入 API & SDK → 授权
2. 服务身份及凭证 → 添加
3. 名称自定义；过期时间选 长期有效
4. 权限全选，工作空间选所有工作空间 → 确定
5. 复制访问令牌（只显示一次，务必保存）

二、开始开发

1. 新建项目文件夹
2. 用 Warp 进入项目目录
3. 执行 git init 初始化仓库
4. 启动 Claude Code
5. 切换到 Plan 模式

三、Plan 模式里描述需求

示例提示词：

我想开发一个谷歌插件，需求是这样的，当我打开一个网站之后，点击这个插件，它就可以将这个网站的标题、网址以及网页的主要内容提取出来，然后将它们同步到我扣子知识库里面去。

我的扣子 API Key 是：你的扣子 API Key

制定计划的时候可以使用 context7 和 deepwiki 这两个 MCP。

四、确认开发计划

Plan 阶段可能通过交互窗口确认，

五、UI 风格参考（可选）

本课选用 get design.md 的 Binance 风格。

get design.md

1. 在 get design.md 选好 Binance 风格，复制页面上的安装命令
2. 在项目目录执行（会下载 DESIGN.md）：

npx getdesign@latest add binance

3. 新建 .pen 文件，用 Pencil 打开

Claude Code 会按开发计划执行，先调用 UI 子代理在 Pencil 里出界面稿；设计稿确认后再进入代码开发。

六、加载与配置

开发完成后，在 Chrome 扩展程序 页开启开发者模式，加载已解压的扩展程序，选中项目文件夹。

插件设置页通常需填两项：

配置项	怎么填
API Key	粘贴扣子访问令牌
知识库 ID	在扣子资源库打开目标知识库，网址里 knowledge 后面那串数字

保存后即可试用同步功能。

七、继续优化

更换图标示例提示词：

这个插件功能上没有问题，只是这一个图标有点太简陋了，能不能换一个更精致一些的？

核心功能验证通过后存档：

/commit-commands:commit