TL;DR: 通过AI技术，零开发经验的我成功编写了一个Chrome插件，实现了在浏览器上直接做笔记并同步至Obsidian的功能。这篇文章将详细介绍整个过程，并分享相关的工具与经验。

0. 发现需求

上个月，在梳理我的知识管理系统时，我意识到从印象笔记时代开始就养成了将笔记剪藏到笔记软件的习惯，剪辑之后却很少回头阅读和消化。随后，我尝试了简悦、Cubox、Readwise等稍后读软件，但这种“划线+笔记”的逻辑虽然适合“渐进式阅读”，却并不适合卡片笔记。

使用稍后读软件时遇到的一些问题：

  1. 样式问题：原文样式可能会丢失，有些网站抓取的样式重新渲染后看起来很糟；
  2. 不适合卡片笔记：虽然可以划线和记笔记，但不便于“用自己的话”记录卡片；
  3. 与Obsidian联动复杂：在写这篇文章时我才发现Cubox有自定义动作可以将划线保存到Obsidian。

那么，为什么不在浏览器中阅读文章时就能直接写笔记呢？

1. 用Google和GPT寻找方案

为了实现在浏览器中直接写笔记，我找到了多个方法：

  1. 开两个软件分屏，比如Chrome + 备忘录/Obsidian/Drafts；
  2. 使用支持分屏的浏览器，与在线笔记结合，比如Arc + flomo；
  3. 使用Chrome插件进行分屏，再配合在线笔记，例如Anything Copilot插件 + flomo。

考虑到我主要使用的笔记软件是Obsidian，我决定寻找现成的可以将笔记导出到Obsidian的Chrome插件。在Google上搜索后，发现Obsidian的插件大多数是用于剪辑网页保存，但意外找到了一个符合我需求的本地API项目，并进行了尝试。

对于Chrome插件，我之前有些了解，如果掌握一些前端知识，就可以开始使用GPT-4编写代码。

2. 利用AI编写插件代码

2.1 使用GPT-4完成0.1版本

我并没有过于纠结Prompt的结构，而是直接询问它如何创建Chrome插件的项目结构以及每个文件的内容。

根据GPT的提示在本地创建目录，使用VSCode作为IDE，操作十分方便。

2.2 使用GPT和Claude的几点经验

联网能力

GPT具备联网能力，可以读取提供的第三方文档链接，作为代码参考；而Claude目前没有此功能，我的解决方法是使用此网站获取格式更友好的LLM输出，再手动给Claude。

编程能力

Claude的代码出错较少，输出简洁，明确指出需要修改的部分；而GPT则倾向于输出完整代码，即使我在Prompt中强调只需输出特定部分。若超过Token限制，需要点击继续生成，可能会出现混乱。

提供清晰的范例

提供官方文档和示例代码，有助于AI理解实际操作。这避免了因为库更新导致的功能Bug，也可以为AI提供产品原型图片，以获得前端样式的代码。

关于使用Claude的建议

  1. 使用“干净”的IP地址进行登录，自查IP干净度；
  2. 每次登录最好使用同一地区，避免频繁更换节点；
  3. 避免使用Gmail和微软邮箱，建议使用小众邮箱；
  4. 可以创建多个账号和浏览器以便于使用Claude，频繁使用考虑付费。

3. 测试和修改程序

AI写的代码通常会存在Bug，需要不断调试。在调试过程中，应尽量记录Chrome控制台的日志和操作反馈，清晰地描述环境、操作步骤、结果及预期结果。

4. 发布插件到Github（可选）

完成插件后，希望能与他人分享。Github是一个不错的选择。如果想发布到Chrome扩展市场，需要支付5美元的开发者注册费，可以通过野卡进行支付。

如果不想付费，用户可在Chrome扩展的开发者模式下，直接加载解压后的插件。

学会使用Git和Github

这里的知识点是：学会使用Git和Github。有了AI的帮助，我们可以轻松学习发布过程。比如可以使用以下Prompt：

plaintext 我有一个Chrome插件开发好了，我想把它发布到Github上该如何操作，一步一步教我。

让AI帮忙改写README

先写一个中文版本的README，再请GPT帮忙修改成中英文双语版本。如果希望在README头部添加跳转链接，可以使用Markdown的锚点链接语法。若需要支持更多语言，可以创建不同语言的README文件。

5. 上传至Chrome扩展商店

我在刷即刻时看到大佬分享的教程，讲解得很清晰，因此不再赘述。

  • 提交插件时需要提供必要的信息，包括隐私声明的网页，这部分可以请AI帮忙撰写；
  • 上传Logo、截图等素材时，需要遵从指定的尺寸要求。

关于审核的经验

  • 审核资料：简要说明插件权限，提供功能和权限使用场景的英文描述；
  • 隐私声明：生成文案后，可以修改名称和联系方式并发布在自己的域名上。
  • 审核时间：Chrome的审核通常较快，约两天内完成。

6. 结尾

通过这个项目，我不仅掌握了Chrome插件的开发流程，还体验到了利用AI工具简化开发的乐趣。如果你对开发这个插件有兴趣，欢迎访问以下链接下载使用：

👉 野卡 | 一分钟注册，轻松订阅海外线上服务

Chrome商店版本：Simple Obsidian Note
Github地址：moyuguy/sidenote2obsidian