🧑🏻💻
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