通过AI技术，我在没有任何开发经验的情况下成功创建了一个Chrome插件，实现了浏览器内直接做笔记并同步到Obsidian的功能。本文将详细分享整个开发过程，并介绍我使用的工具和技巧。
0. 发现自己的需求
在梳理知识管理系统时，我意识到自从使用印象笔记以来，我已经习惯将文章剪辑保存，但很少去回顾或消化这些内容。随着稍后读软件的出现，我尝试了简悦、Cubox、Readwise等工具，但它们存在一些问题：
- 样式问题：抓取的网页内容在某些网站上样式丢失，且页面渲染效果较差；
- 不适合卡片笔记：划线+笔记模式适合渐进式阅读，但不适合将知识转化为自己的语言写成卡片；
- Obsidian联动麻烦：一些稍后读软件有将笔记同步到Obsidian的功能，但操作较为繁琐。
那么，为什么不直接在浏览器中边阅读边做笔记呢？
1. 用Google和GPT寻找解决方案
要在浏览器中实现边阅读边做笔记的功能，有多种方案可供选择：
- 开启多个软件分屏，如Chrome + 备忘录/Obsidian/Drafts；
- 使用支持分屏的浏览器，如Arc + flomo；
- 使用Chrome插件配合在线笔记工具，如Anything Copilot插件 + flomo。
因为我的主要笔记工具是Obsidian，我决定寻找一个现成的将笔记直接保存到Obsidian的Chrome插件。在Google搜索后，我发现大部分Obsidian插件都是将网页剪辑保存，而非符合我卡片笔记的需求。但我找到一个本地API项目，尝试了一下接口，发现正好符合我的要求。coddingtonbear/obsidian-local-rest-api
2. 使用AI编写插件代码
2.1 使用GPT-4完成0.1版本
我直接向GPT-4询问如何开发Chrome插件。它给了我插件的项目结构及各个文件的编写建议。基于它的指导，我使用VSCode创建了本地项目目录，并开始编写插件。
2.2 使用GPT和Claude的经验
联网能力
GPT可以通过提供第三方文档链接进行查询，而Claude暂时没有此功能。我通过使用r.jina.ai获取易于Claude处理的文档格式。
编程能力
Claude的代码生成错误较少，且反馈直接；而GPT-4倾向于输出完整代码，且会超出Token限制。
提供清晰范例
为了提高AI的输出准确性，我会提供官方文档、示例代码，甚至是产品原型或界面截图，帮助AI生成更精确的代码。
3. 测试和修改程序
AI写的代码大多数时候会出现bug，调试过程需要不断向AI提供详细的错误反馈，包括控制台输出、操作步骤、期望结果等信息。
4. 发布插件到Github（可选）
开发完成后，我希望分享插件，选择将其发布到Github。如果想提交到Chrome扩展商店，需要支付$5的开发者注册费用，推荐使用野卡轻松支付。
如果不想付费，可以启用Chrome的开发者模式，直接加载解压后的插件。
4.1 学会使用Git和Github
利用AI学习如何将插件发布到Github。例如，使用如下的Prompt：
bash
我有一个Chrome插件开发好了，我想把它发布到Github上该如何操作，一步一步教我。
4.2 让AI帮忙改写readme
我先编写一个中文版本的readme，再请GPT帮忙翻译成中英文双语版本。还可以通过Markdown语法添加中英文跳转链接。
5. 发布到Chrome扩展商店
我参考了大佬分享的教程，详细步骤如下：
- 在Chrome扩展商店创建新项目；
- 填写必要信息，包括域名和隐私声明；
- 上传插件图标和截图，确保符合商店要求。
5.1 关于提审的经验
- 审核资料：插件权限说明用中文写清楚，GPT可以帮助润色；
- 隐私声明：her.fiit.ai 由Claude生成文案；
- 审核时间：Chrome审核较快，一般2个工作日内完成。
6. 最后
通过这个项目，我不仅掌握了Chrome插件的开发流程，还体验了使用AI工具简化开发的乐趣。如果你也对这个插件感兴趣，欢迎访问以下页面下载使用：
📎
