🧑🏻💻
TL;DR: 通过利用AI技术，我成功开发了一款Chrome插件，实现了在浏览器中直接做笔记并同步至Obsidian的功能。本文将详细介绍开发过程，并分享相关的工具与经验。
1. 发现需求：为什么需要这款插件？
在梳理知识管理系统时，我发现传统的笔记剪藏工具（如印象笔记）存在一些问题：剪藏后很少再阅读和消化。而稍后读软件（如简悦、cubox、readwise）虽然支持渐进式阅读，但不太适合卡片笔记法。
稍后读软件的痛点包括：
- 样式问题：抓取内容后，原文样式可能丢失，渲染效果不佳。
- 不适合卡片笔记：划线+笔记的模式难以帮助用户用自己的语言总结。
- 与Obsidian联动不便：虽然Cubox支持自定义动作保存到Obsidian，但操作步骤稍显繁琐。
于是，我萌生了一个想法：为什么不能在浏览器中直接写笔记并同步到Obsidian呢？
2. 解决方案：Google与GPT的强强联手
实现在浏览器中直接写笔记的方法有很多：
- 分屏操作：例如Chrome+备忘录/Obsidian/Drafts。
- 分屏浏览器：例如Arc+flomo。
- Chrome插件：例如Anything Copilot插件+flomo。
由于我的主力笔记软件是Obsidian，我尝试寻找现成的Chrome插件，但发现大多数插件仅支持剪藏网页到Obsidian，与卡片笔记法不符。最终，我通过Github上的obsidian-local-rest-api项目找到了解决方案。
3. 使用AI编写插件代码
3.1 GPT-4助力完成0.1版本
我直接使用GPT-4提问，获取了Chrome插件的项目结构及代码编写建议。以下是关键步骤：
- 创建项目目录：根据GPT的建议，在本地创建项目目录。
- 使用VS Code：作为开发工具，VS Code非常方便。
3.2 GPT与Claude的使用经验
联网能力
- GPT：支持联网，可以直接读取第三方文档作为参考。
- Claude：暂时不支持联网，但可以通过r.jina.ai将内容转换为适合LLM读取的格式。
编程能力
- Claude：输出简洁，直接指出需要修改的部分。
- GPT：偏好输出完整代码，即使超出Token限制也会继续生成，可能导致代码混乱。
提供清晰的范例
- 官方文档和示例代码：由于AI模型可能无法跟上第三方库的更新速度，提供官方文档可以避免bug。
- 产品原型或截图：AI可以根据图片生成前端样式。
使用Claude的建议
- 使用干净IP的梯子。
- 登录时尽量保持同一地区节点。
- 避免使用Gmail和微软邮箱，建议使用小众邮箱（如tuna）。
- 高频用户可考虑付费。
4. 测试与修改：与AI合作的调试经验
AI生成的代码常有bug，因此需要不断调试。调试时，应清楚描述环境、操作步骤、结果、期望结果，并提供截图。
5. 发布插件到Github（非必须）
开发完成后，我选择将插件发布到Github。如果不想付费发布到Chrome扩展市场，可以让用户通过开发者模式加载本地插件。
5.1 学会使用Git和Github
通过AI学习Git和Github的使用方法。例如，使用以下Prompt：
我有一个Chrome插件开发好了，我想把它发布到Github上该如何操作，一步一步教我。
5.2 让AI改写README
先写一个中文版README，再让GPT改写成中英文双语版本。如果需要支持更多语言，可以创建不同语言的README文件。
6. 发布到Chrome扩展商店
发布到Chrome扩展商店需要支付$5注册开发者账号。可以使用WildCard完成支付。以下是发布流程：
- 打开chrome.google.com，点击“+New Item”创建新插件。
- 填写必要信息，包括域名和隐私声明。
- 上传插件截图和Logo。
6.1 提审经验
- 审核资料：用中文描述插件功能和权限使用场景，并用GPT润色成英文。
- 隐私声明：使用Claude生成文案，并发布到Github。
- 审核时间：Chrome审核通常较快，约2个工作日。
7. 总结
通过这个项目，我不仅掌握了Chrome插件开发流程，还体验到了AI工具简化开发的乐趣。如果你对这款插件感兴趣，欢迎下载使用：
📎
Chrome商店版本：Simple Obsidian Note
Github地址：moyuguy/sidenote2obsidian
