🧑🏻💻
摘要：通过AI技术，我成功编写了一个Chrome插件，实现了在浏览器上直接做笔记并同步至Obsidian的功能。本文将详细介绍整个过程，并分享相关工具与经验。
在梳理知识管理系统时，我意识到自己从印象笔记时代就习惯将笔记剪藏到笔记软件，但剪辑后很少再去阅读和消化。随着使用稍后读软件（如简悦、Cubox、Readwise），我发现这种划线+笔记的方式适合“渐进式阅读”，但不太适合卡片笔记。
稍后读软件存在以下问题：
样式问题：原文样式可能会丢失，抓取后重新渲染的样式在某些网站上可能不美观。
不适合卡片笔记：划线+笔记的模式不便于“用自己的话”写卡片。
联动Obsidian步骤繁琐：我发现Cubox有自定义动作可以保存划线到Obsidian。
因此，我想要在浏览器中直接写笔记。
实现在浏览器中直接写笔记的方法有很多：
开两个软件分屏，比如Chrome+备忘录/Obsidian/Drafts。
使用可以分屏的浏览器，配合在线笔记，如Arc+Flomo。
使用Chrome插件分屏，结合在线笔记，如Anything Copilot插件+Flomo。
考虑到我的主力笔记软件是Obsidian，我尝试寻找现成的note to Obsidian的Chrome插件。经过搜索，我发现Obsidian的插件大多是将网页剪辑保存到Obsidian，与我的卡片笔记思路不符。但我发现了一个本地API项目，正好符合我的需求。
我没有过多纠结Prompt的结构，直接询问GPT。它提供了Chrome插件的项目结构及各个文件的内容。
根据GPT的提示在本地创建目录，使用VSCode作为IDE，操作非常方便。
联网能力
GPT具备联网能力，能读取第三方文档并作为代码参考；而Claude暂时没有联网能力，我通过r.jina.ai获取更易读取的格式，手动提供给Claude。
编程能力
Claude的代码出错率低于GPT，且输出简洁，能直接指出修改部分。GPT则偏好输出完整代码，且不管Token限制。
提供清楚的范例
提供官方文档和示例代码，能帮助AI更准确地生成代码。AI的图像识别能力也不错，可以根据图片生成前端样式。
关于使用claude的建议
使用干净的IP，检查IP地址和DNS地址。
每次登录尽量使用同一地区的IP。
避免使用Gmail和微软邮箱，推荐使用小众邮箱。
可以创建多个账号和浏览器，灵活使用。
可以使用ACCPAY，轻松支付各种服务。
AI生成的代码常常会有bug，需要不断调试。调试时，尽量将Chrome控制台的log和页面反馈告诉AI，清晰描述环境、操作步骤、结果和期望结果。
完成插件后，我希望与他人分享，Github是个不错的选择。如果想发布到Chrome扩展市场，需要花费$5注册开发者账号，可以使用ACCPAY进行支付。
如果不想付费，用户可以在Chrome扩展程序的开发者模式下直接加载解压好的插件。
学会使用git和Github，借助AI的帮助，可以轻松掌握发布流程。
先写一个中文版本的readme，再让GPT帮忙改写成中英文双语版本。
我在刷即刻时发现了大佬分享的教程，写得非常清楚，这里不再赘述。
测试满意后，访问chrome.google.com提交插件。
创建新插件，填写必要信息，包括域名和隐私声明网页。
上传logo和插件截图，确保符合尺寸要求。
审核资料：插件权限说明用中文写，功能和权限场景用英语润色。
隐私声明：生成文案并发布，确保符合要求。
审核时间：Chrome审核通常在2个工作日内完成。
通过这个项目，我不仅掌握了Chrome插件的开发流程，还体验到了利用AI工具简化开发的乐趣。如果你对这个插件感兴趣，欢迎访问页面下载使用：
Chrome商店版本：Simple Obsidian Note
Github地址：moyuguy/sidenote2obsidian