🧑🏻💻
TL;DR: 借助AI技术，毫无开发经验的我也成功开发了一款Chrome插件，实现了在浏览器中直接记笔记并同步至Obsidian的功能。本文将分享整个过程，并介绍相关工具和经验。
在上个月梳理个人知识管理系统时，我发现自己从使用印象笔记时代就习惯了将笔记剪藏到软件中，但剪辑后很少再阅读和消化。
稍后读软件如简悦、Cubox、Readwise，虽然提供了划线+笔记的模式，适合“渐进式阅读”，但不适合“卡片笔记”方式。
稍后读软件的问题：
样式问题：原文样式可能丢失，抓取后重新渲染的样式在某些网站上可能很难看；
不适合卡片笔记：划线+笔记的模式，不太适合“用自己的话”写卡片；
联动Obsidian步骤繁琐：我发现Cubox有自定义动作可以保存划线到Obsidian，但操作仍不够便捷。
于是，我思考：为什么不能在浏览器中直接记笔记？
实现在浏览器中直接记笔记的方法有很多：
分屏使用两个软件，如Chrome+备忘录/Obsidian/Drafts；
使用分屏浏览器和在线笔记，如Arc+flomo；
使用Chrome插件分屏和在线笔记，如Anything Copilot插件+flomo。
由于我的主力笔记软件是Obsidian，我决定寻找现成的note to Obsidian的Chrome插件。
通过Google搜索，我发现Obsidian的插件大多是剪辑网页保存到Obsidian的，不太符合我的需求。不过，我发现了一个本地API项目，尝试后感觉刚好符合我的需求。
对于Chrome插件开发，虽然我只有一些前端知识，但借助GPT-4的协助，我开始编写代码。
我直接向GPT提问，它给出了Chrome插件的项目结构及各文件内容。
根据GPT的提示，我在本地创建了目录，并使用VSCode作为开发工具。
联网能力
GPT具备联网能力，可以读取第三方文档并作为代码参考；而Claude暂时没有联网能力，我使用r.jina.ai获取LLM更容易读取的格式，然后手动贴给Claude。
编程能力
Claude的代码出错率比GPT低，输出简洁，直接指出需要修改的部分；GPT则倾向于输出全部代码，即使我强调只输出修改部分，它也会输出完整代码，且容易超出Token限制。
提供清晰的范例
向AI提供官方文档和示例代码，可以避免因版本更新导致的代码问题。此外，提供产品原型或界面截图，也能帮助AI更好地编写前端样式。
关于使用Claude的建议
使用IP干净的梯子；
每次登录尽量使用同一地区的节点；
避免使用Gmail和微软邮箱，可选择小众邮箱；
如果高频使用，可以考虑付费。
AI编写的代码经常会有bug，需要不断调试。调试时，尽量将Chrome控制台的日志、页面点击效果反馈给AI，清晰描述环境、操作步骤、结果、期望结果及截图。
完成插件开发后，我选择将其分享到Github。如果想发布到Chrome扩展市场，需花费$5注册开发者账号。
👉 WildCard 野卡 | 一分钟注册，轻松订阅海外线上服务
在即刻上发现了一篇详细的教程，参考后我成功将插件发布到Chrome扩展商店。
审核资料：用中文写插件权限说明，用GPT润色成英文，方便审核人员阅读；
隐私声明：使用Claude生成文案，修改后发布到Github，用Vercel绑定域名；
审核时间：Chrome审核速度较快，通常2个工作日内完成。
通过这个项目，我不仅掌握了Chrome插件的开发流程，还体验到了利用AI工具简化开发的乐趣。如果你也对这个插件感兴趣，欢迎访问页面下载使用：
📎
Chrome商店版本：Simple Obsidian Note
Github地址：moyuguy/sidenote2obsidian