我原以为制作我的浏览器扩展课程只需要一个周末，结果用了四个月。

Source: Dev.to

请提供您希望翻译的文章正文（除代码块和 URL 之外的内容），我将为您翻译成简体中文并保持原有的 Markdown 格式。

介绍

我原以为制作一个“短视频课程”只需要一个周末。
以下是实际发生的事情、我学到的经验，以及为什么我其实很高兴它失控了。

去年十一月，我在 React Summit US 上演讲，主题是使用 React 构建浏览器扩展（观看此处）。在准备演讲的过程中，我发现几乎没有面向完全初学者的教育材料，更别说完整的课程了。于是我决定把它做成一个副项目，想法是：“我只要花一个周末录几段快速视频，覆盖基础内容，发布就完事了。”

结果，这个周末项目演变成了 14 节全面的课程，并且耗时 4 个月 完成。

我预期的与实际困难的对比

我以为会很难的事

• 录制视频，在摄像机前讲话
• 解释技术概念

实际上困难的事

• 起初录制很有挑战性，但一个不错的背景和基本的灯光帮助了（直到邻居在拍摄中途开始吸尘）。
• 将 14 节课结构化，使它们在逻辑上相互衔接。
• 编写适合视频的脚本（在会议上演讲 ≠ 在摄像机前教学）。
• 剪辑（我的 DaVinci Resolve 技能明显提升 😅）。
• 决定包含什么、删掉什么。
• 测试所有内容，以确保跟随者能够顺利进行。

课程概述

本课程通过构建一个名为 TabNotes 的真实笔记扩展来教授浏览器扩展开发。它是一个可投入生产的扩展，具备以下特点：

• 在多设备之间同步数据
• 支持 Chrome 和 Firefox 两大浏览器
• 使用 WXT 框架的现代化架构
• 可发布到两个扩展商店

涵盖主题

• Manifest V3 配置
• 弹出界面和后台脚本
• 存储 API 与跨设备同步
• 内容脚本与消息传递
• 跨浏览器兼容性
• 发布到两个商店

材料偏技术性，但我已尽量把概念解释得清晰易懂。适合想要构建首个浏览器扩展并了解各种坑点的任何人。

过程与经验教训

规划

• 先列大纲 – 我在录制任何内容之前先把全部 14 节课的要点列好。这让课程保持连贯，并确保每节课都能在逻辑上自然衔接前一节。
• 不事先写脚本 – 我的提纲已经非常详细，所以我可以自然地表达。

开发

• 先构建扩展 – 我在录制之前完成了 TabNotes 扩展，这样我对所教授的内容了如指掌，能够一步步演示而不出现意外。

制作

• 批量处理任务 – 我把相似的工作归类在一起：先写完所有脚本，再录制所有视频，最后统一编辑。这样的流程省掉了数周的上下文切换时间。
• 镜子技巧 – 用 iPhone 录制时，在我面前放置一面镜子提供视觉反馈，帮助我捕捉尴尬的瞬间并保持更好的能量。
• 接受“够好” – 完美主义会耗费时间。提前发布、获取反馈、再迭代更为高效。
• 投资音频 – 我的 iPhone 内置麦克风还能用，但外接麦克风的提升非常明显。
• 更短的录制时段 – 将录制拆分成更小的块，使我的精力保持一致，也让编辑更轻松。

教学洞察

• 教学促使深度理解 – 解释概念时暴露了自己的知识盲点，促使我更深入地阅读 Chrome 和 Firefox 文档。
• 提供上下文，而不仅是代码 – 前几节课侧重“怎么做”，后面则加入了“为什么”以及“何时不该这么做”。上下文很重要。
• 拥抱错误 – 展示调试过程和错误实际上成为了学生的宝贵学习素材。
• 视频编辑耗时 – 删除“嗯”声、剪辑、调节音量、添加字幕让我对 YouTuber 有了新的敬意。

创建教育内容的建议

• 预期更长的时间线 – 将你的时间估计乘以3，然后再增加50 %。
• 在教学中学习 – 教学迫使你澄清概念；你不能对自己未完全理解的概念敷衍了事。
• 在感觉准备好之前就开始 – 完美是完成的敌人。
• 先免费提供 – 免费课程消除了为定价辩护的压力，让你专注于真正的价值。

课程链接

4 个月后，课程已上线：webextensiontutorial.com

• 14 节课，全部免费，全部在 YouTube 上
• 从零开始构建完整的扩展，并发布到两个商店

结论

值得吗？绝对值得。尽管投入了时间，我仍然享受这个过程。逼迫自己去创造以前没做过的东西——这不就是重点吗？

如果你对浏览器扩展感兴趣，去看看吧。如果你自己也创作过教育内容，我很想听听你在这个过程中最惊讶的是什么。