零开发经验,如何利用AI开发Chrome插件

🧑🏻‍💻

TL;DR: 通过利用AI技术,我成功开发了一款Chrome插件,实现了在浏览器中直接做笔记并同步至Obsidian的功能。本文将详细介绍开发过程,并分享相关的工具与经验。

1. 发现需求:为什么需要这款插件?

在梳理知识管理系统时,我发现传统的笔记剪藏工具(如印象笔记)存在一些问题:剪藏后很少再阅读和消化。而稍后读软件(如简悦、cubox、readwise)虽然支持渐进式阅读,但不太适合卡片笔记法。

稍后读软件的痛点包括:

  1. 样式问题:抓取内容后,原文样式可能丢失,渲染效果不佳。
  2. 不适合卡片笔记:划线+笔记的模式难以帮助用户用自己的语言总结。
  3. 与Obsidian联动不便:虽然Cubox支持自定义动作保存到Obsidian,但操作步骤稍显繁琐。

于是,我萌生了一个想法:为什么不能在浏览器中直接写笔记并同步到Obsidian呢?

2. 解决方案:Google与GPT的强强联手

实现在浏览器中直接写笔记的方法有很多:

  1. 分屏操作:例如Chrome+备忘录/Obsidian/Drafts。
  2. 分屏浏览器:例如Arc+flomo。
  3. 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的建议

  1. 使用干净IP的梯子。
  2. 登录时尽量保持同一地区节点。
  3. 避免使用Gmail和微软邮箱,建议使用小众邮箱(如tuna)。
  4. 高频用户可考虑付费。

👉 WildCard | 一分钟注册,轻松订阅海外线上服务

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完成支付。以下是发布流程:

  1. 打开chrome.google.com,点击“+New Item”创建新插件。
  2. 填写必要信息,包括域名和隐私声明。
  3. 上传插件截图和Logo。

6.1 提审经验

  • 审核资料:用中文描述插件功能和权限使用场景,并用GPT润色成英文。
  • 隐私声明:使用Claude生成文案,并发布到Github。
  • 审核时间:Chrome审核通常较快,约2个工作日。

7. 总结

通过这个项目,我不仅掌握了Chrome插件开发流程,还体验到了AI工具简化开发的乐趣。如果你对这款插件感兴趣,欢迎下载使用:

📎
Chrome商店版本:Simple Obsidian Note
Github地址:moyuguy/sidenote2obsidian

上一篇 13小时前
下一篇 9小时前

相关推荐