md
零开发经验，如何用 AI 开发你的第一个 Chrome 插件
🧑🏻💻
TL;DR: 作为一个没有开发经验的人，我借助 AI 技术成功开发了一个 Chrome 插件，实现了在浏览器中直接做笔记并同步至 Obsidian 的功能。本文将分享我的开发过程、使用的工具以及实用经验。
1. 需求分析：为什么我需要这个插件？
在梳理个人知识管理系统时，我发现许多稍后读工具（如 Cubox、Readwise）虽然支持笔记和划线功能，但有几个问题：
- 样式丢失：抓取的网页内容可能丢失原样式，导致阅读体验不佳。
- 不适合卡片笔记：现有工具更注重划线而非用自己的话总结内容。
- 与 Obsidian 联动麻烦：虽然 Cubox 支持自定义动作，但与 Obsidian 的联动步骤仍较为繁琐。
于是我开始思考：为什么不能在浏览器中直接写笔记并同步到 Obsidian 呢？
2. 寻找解决方案：Google 与 GPT 的双重助力
为了实现目标，我尝试了几种方法：
- 多屏操作：同时打开浏览器和笔记软件（如 Obsidian）。
- 分屏浏览器：使用 Arc 浏览器搭配在线笔记工具（如 flomo）。
- Chrome 插件：寻找直接支持 Obsidian 的插件。
经过搜索，我发现现有的 Obsidian 插件大多只是将网页剪辑保存，而并非支持直接写笔记。不过，我找到了一个本地 API 项目（Obsidian Local REST API），这为我后续开发提供了灵感。
3. 用 AI 编写代码：从零到一的突破
3.1 使用 GPT-4 完成初版代码
我没有纠结于复杂的 Prompt 结构，直接向 GPT-4 提问，它很快提供了 Chrome 插件的项目结构和代码框架。在本地创建目录后，我使用 VSCode 开始编写代码。
3.2 使用 GPT 和 Claude 的经验
- 联网能力：GPT 能够直接读取第三方文档并提供代码参考，而 Claude 则需要借助工具（如 r.jina.ai）获取可读取的格式。
- 编程能力：Claude 的代码出错率较低，且输出简洁；GPT-4 则倾向于输出完整代码，但有时会超出 Token 限制。
- 提供范例：为了让 AI 更高效地工作，我通常会提供官方文档、示例代码或界面截图，帮助它更好地理解需求。
3.3 关于付费方式的建议
4. 测试与调试：逐步完善代码
AI 编写的代码难免存在 Bug，因此在测试阶段，我重点做了以下工作：
- 将 Chrome 控制台的日志输出给 AI。
- 详细描述操作步骤、期望结果以及实际结果。
- 提供截图和反馈，帮助 AI 快速定位问题。
5. 发布插件到 GitHub：分享与协作
完成插件开发后，我选择将其发布到 GitHub，便于分享和协作。如果需要发布到 Chrome 扩展商店，还需要支付 $5 注册开发者账号，可以使用 野卡 进行支付。
5.1 使用 Git 和 GitHub
我通过 AI 学会了基本的 Git 操作和 GitHub 发布流程。例如，使用以下 Prompt 获取帮助：我有一个 Chrome 插件开发好了，想把它发布到 GitHub 上，请一步步教我。
5.2 编写多语言 README
先写一个中文版的 README，然后让 GPT 帮忙翻译成英文或其他语言。如果需要支持多语言跳转，可以使用 Markdown 的锚点链接。
6. 发布到 Chrome 扩展商店
在发布时，我参考了一份即刻的动态教程，详细描述了提交插件的步骤，包括准备隐私声明、上传 LOGO 和截图等。审核过程大约需要 2 个工作日。
6.1 审核建议
- 插件权限说明：用中文描述插件功能和权限使用场景，然后让 GPT 翻译成英文。
- 隐私声明：让 Claude 生成文案，修改后部署到 GitHub Pages 或 Vercel。
7. 最后：收获与体验
通过这次开发，我不仅了解了 Chrome 插件的开发流程，还深刻体会到 AI 工具在降低开发门槛方面的潜力。如果你对类似的项目感兴趣，欢迎尝试以下资源：
- Chrome 商店版本: Simple Obsidian Note
- GitHub 地址: sidenote2obsidian
关键词提炼: Chrome 插件开发、AI 编程、Obsidian 同步、GPT-4、GitHub 发布
