零开发经验，我如何运用AI开发Chrome插件
🧑🏻💻
一言概括：依靠AI技术，我在没有开发经验的情况下，成功创建了一个Chrome插件，使用户能够直接在浏览器中做笔记并同步到Obsidian。这篇文章将详细阐述我的开发过程，并分享我使用的工具和经验。
0. 识别需求
最近在整理个人知识管理系统时，我意识到我从印象笔记时代起，就习惯于将笔记剪藏到笔记软件。但往往剪辑后就很少去回顾和消化。
后来我尝试了一些稍后读软件，如简悦、Cubox、Readwise等，它们的设计逻辑是让用户在软件内阅读、划线并做笔记。这种划线加笔记的处理方式适合“渐进式阅读”，但却不适合卡片笔记的需求。
然而，稍后读软件存在一些问题：
- 样式丢失：抓取内容的样式可能会失真，影响阅读效果。
- 不适合卡片笔记：这种模式不便于使用自己的语言进行总结。
- 与Obsidian联动不便：在我的研究中，发现Cubox可以自定义动作保存划线至Obsidian，但仍感到烦琐。
因此，我想要一个能让用户在浏览文章时直接做笔记的解决方案。
1. 利用Google和GPT寻找解决方案
实现在浏览器中直接写笔记有多种可行的方法：
- 分屏使用多个软件，如Chrome与备忘录/Obsidian/Drafts。
- 使用可以分屏的浏览器，搭配在线笔记工具，如Arc和Flomo。
- 巧用Chrome插件分屏与在线笔记工具，例如Anything Copilot插件与Flomo。
考虑到我主要使用Obsidian，我决定尝试寻找现成的Chrome插件，它可以直接将笔记同步至Obsidian。经过搜索，我发现Obsidian的插件基本都是将网页剪辑存入Obsidian，与我的卡片笔记思路并不完全一致。然而，我在Github上找到了一个合适的本地API项目，刚好可以满足我的需求。
对于Chrome插件的开发我初步了解不少，前端技术的相关知识使我顺利开始使用GPT-4来编写代码。
2. 使用AI开发插件代码
2.1 利用GPT-4完成0.1版本
我没有过多纠结Prompt的结构，直接询问：
- GPT建议的Chrome插件项目结构及文件内容。
...
- 根据GPT的提示在本地创建项目目录，使用VSCode作为IDE，非常便捷。
2.2 使用GPT和Claude的经验
-
联网能力：GPT能够联结第三方文档，直接读取作为代码参考，而Claude暂时无法联网，我通过获取更友好的格式手动喂给Claude。
-
编程能力：Claude的代码出错较少，能够准确指出需修改的部分，而GPT则倾向于输出完整代码，且经常超出Token限制。
-
提供清晰范例：利用官方文档和示例代码给AI提供指导，避免因为版本更新而导致的错误。
-
使用claude的建议：
- 使用IP干净的网络工具进行操作。
- 尽量保持登录地区一致。
- 使用小众邮箱，而不是Gmail或微软邮箱。
- 可以创建多个账号，灵活换用不同的节点。
付费方式
可以用ACCPAY轻松支付GPT、MJ、Claude等服务。
3. 测试与调整程序
AI生成的代码往往伴随bug，需不断调试。调试时，务必将Chrome控制台输出的日志、点击效果反馈告知AI，确保描述清晰，让AI更好理解环境和期望结果。
4. 发布插件到Github（可选）
完成插件后，我自然希望与他人分享。Github是一个理想的平台。如果要发布到Chrome扩展市场，需花费$5注册开发者账号，可以用途径支付费用。
如果不愿意支付，可以让用户打开开发者模式直接加载解压好的插件。
学会使用Git和Github
知识要点：掌握Git和Github的使用，AI可以成为你的得力助手，直接询问如何将插件发布到Github。
请AI帮忙改写README
先撰写中文README，随后利用GPT帮忙转换成中英文双语版。需要支持更多语言时，可以创建不同语言的README文件。
5. 发布到Chrome扩展商店
我在浏览即刻时发现一份详细教程，清晰明了，不再逐字赘述。
- 提交插件时需填写的主要信息包括域名和隐私声明网页。
- 隐私声明可通过Claude或ChatGPT生成内容，上传至Vercel或Github并绑定自己域名。
提交审核经验
- 审核资料中关于插件权限的说明用中文撰写，并附上用英语润色的功能和权限使用场景，方便审核人员理解。
- 审核时间较快，通常在2个工作日内完成。
6. 总结
通过本项目，我不仅掌握了Chrome插件的开发流程，还体验到了利用AI工具简化开发的乐趣。如果你对这个插件感兴趣，可以轻松注册使用：
📎
Chrome商店版本：Simple Obsidian Note
Github地址：moyuguy/sidenote2obsidian