🧑🏻💻
TL;DR: 通过利用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插件。用Google搜索后发现，Obsidian的插件基本都是剪辑网页保存到Obsidian的，与我的卡片笔记思路不符。但我发现它们使用了Github上的一个本地API项目，尝试了一下接口，发现刚好符合我的要求。
对于Chrome插件，我虽然之前了解过一些，但并没有实际开发经验。于是，我决定利用GPT-4开始编写代码。
2. 使用AI编写插件代码
2.1 使用GPT-4完成0.1版本
我没有太纠结Prompt的结构，直接开始提问。它会给我Chrome插件的项目结构及各个文件里要写的内容。
根据GPT的提示，我在本地创建了目录，IDE直接使用VSCode，非常方便。
2.2 使用GPT和Claude的几点经验
联网能力
GPT有联网能力，第三方文档贴地址给它，它就能读出来并作为代码参考；而Claude暂时没有联网能力，我的解决方法是使用r.jina.ai获取llm更容易读取的格式，手动贴给Claude。
编程能力
Claude的代码出错比GPT-4少一些，且输出简洁，直接告诉我修改哪个部分，详略得当；GPT-4则偏好输出全部代码，即使我在Prompt中强调只输出需要修改的地方，它也会输出全部，且完全不管超过输出的Token限制。点继续生成，代码也会乱掉。
给AI提供清楚的范例
提供官方文档和示例代码。由于AI训练模型的时效性跟不上很多第三方库的迭代速度，常常会因为版本功能更新导致AI写的代码跑起来会有bug。我会去官网找一些官方示例和文档丢给AI，这样可能比让AI自己联网查询更精确一些。
提供产品原型或者想模仿的界面截图。AI识别图片并根据图片写样式的能力其实已经挺不错了，可以丢给它让它写前端样式了。
关于使用Claude的几个建议
- 使用IP干净的梯子，关于IP干净度自查，可以用Whoer.net并参考相关文章；
- 每次登录尽量使用一个地区的IP，不要随便换节点；
- 避免使用Gmail和微软的邮箱，可以用小众的邮箱；
- Claude的使用限制，可以搞多个账号、多个浏览器、多个节点，免费的换着用。当然如果高频使用，可以考虑付费。
3. 测试和修改程序
AI写的代码大概率会有bug，这需要我们不断地调试。调试时，我们尽量把Chrome控制台输出的log、页面上点击效果的反馈告诉AI，就跟QA提bug一样，尽量清楚地描述环境、操作步骤、结果、期望结果、截图。
4. 发布插件到Github（非必须）
当我写完插件后，自然期望能与人分享，Github是个不错的选择。如果想发布到Chrome扩展市场，则需要花$5注册开发者账号，可以用野卡来付费。
如果不想付费的话，其实让用户把Chrome扩展程序的开发者模式打开，直接加载电脑上解压好的插件也能用。
学会使用Git和Github
这里的知识点是：学会使用Git和Github，有了AI的加持，我们直接让AI教我们就好。比如用这个Prompt：“我有一个Chrome插件开发好了，我想把它发布到Github上该如何操作，一步一步教我。”
让AI帮忙改写Readme
自己先写一个中文版本的Readme，让GPT帮忙改写成中英文双语的。如果还想在Readme头部加中英文跳转连接，可以使用Markdown的锚点链接语法。如果想支持更多的语种的话，可以创建不同语言的Readme文件。
5. 发布到Chrome扩展商店
这里我是在刷即刻的时候发现了大佬分享的教程，写得挺清楚的，就不再赘述了。
6、测试满意之后，打开chrome.google.com，这个地方就是提交你Extension的地方。
7、在页面上点“+New Item”，创建一个新的插件，然后按照要求填写信息。
7.1、比较必须的信息是一个域名和放在该域名下的“隐私声明”网页。
7.2、“隐私声明”的网页内容也可以让Claude或者ChatGPT帮你写，把隐私声明放在Vercel里，标准在浏览器里能打开这个声明的网址。
7.3、上传logo，可以让GPT帮你生成一个。
7.4、上传插件的截屏图片，图片必须符合大小尺寸；可以先手动截图，然后让GPT用代码方式帮你截成符合大小的尺寸，比如1280x800px。
关于提审的经验
- 审核资料：里面关于插件权限的说明用中文写，给GPT介绍一下插件的功能和权限使用场景，用英语润色一下，方便审核人员阅读。
- 关于隐私声明：让Claude生成文案，改了一下名称和联系方式，丢到Github上，用Vercel发布，绑定了自己的域名，完工。这里面对小白来说有一些麻烦，也需要多问问GPT。
- 审核时间：Chrome审核挺快的，2个工作日就搞定了。
6. 最后
通过这个项目，我不仅掌握了Chrome插件的开发流程，还体验到了利用AI工具简化开发的乐趣。如果你也对这个插件感兴趣，欢迎访问页面下载使用：
📎
Chrome商店版本：Simple Obsidian Note
Github地址：moyuguy/sidenote2obsidian
