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