I Thought Creating My Browser Extension Course Would Take a Weekend. It Took 4 Months

Source: Dev.to

Introduction

I thought creating a “short video course” would take a weekend.
Here’s what happened, what I learned, and why I’m actually glad it spiraled out of control.

Last November I spoke at React Summit US about building browser extensions with React (watch it here). While preparing the talk I discovered there was very little educational material available, let alone a full course for total beginners. I decided to create one as a side project, thinking: “I’ll spend a weekend recording a few quick videos, cover the basics, publish them, done.”

That weekend project turned into 14 comprehensive lessons and 4 months of work.

What I Expected vs. What Was Actually Hard

What I Thought Would Be Hard

• Recording videos, talking in front of the camera
• Explaining technical concepts

What Was Actually Hard

• Recording was challenging at first, but a nice backdrop and basic lighting helped (until the neighbor started vacuum‑cleaning mid‑shot).
• Structuring 14 lessons so they build on each other logically.
• Writing scripts that work for video (speaking at a conference ≠ teaching on camera).
• Editing (my DaVinci Resolve skills definitely improved 😅).
• Deciding what to include vs. what to cut.
• Testing everything to ensure it works for someone following along.

Course Overview

The course teaches browser‑extension development by building a real note‑taking extension called TabNotes. It is a production‑ready extension that:

• Syncs data across devices
• Works on both Chrome and Firefox
• Uses modern architecture with the WXT framework
• Gets published to both extension stores

Topics Covered

• Manifest V3 configuration
• Popup interfaces and background scripts
• Storage APIs and cross‑device syncing
• Content scripts and messaging
• Cross‑browser compatibility
• Publishing to both stores

The material is technical, but I tried to explain concepts as clearly as possible. It’s aimed at anyone who wants to build their first browser extension and understand the many gotchas.

Process & Lessons Learned

Planning

• Outline first – I mapped out all 14 lessons before recording anything. This kept the course coherent and ensured each lesson built logically on the previous one.
• No pre‑written script – My outline was super detailed, so I could speak naturally.

Development

• Build the extension first – I completed the TabNotes extension before recording, so I knew exactly what I was teaching and could walk through each step without surprises.

Production

• Batch tasks – I grouped similar work together: wrote all scripts, then recorded all videos, then edited everything. This flow saved weeks of context‑switching.
• Mirror trick – Recorded with my iPhone while a mirror in front of me gave visual feedback, helping me catch awkward moments and maintain better energy.
• Accept “good enough” – Perfectionism cost time. Shipping early, getting feedback, and iterating is more effective.
• Invest in audio – My iPhone’s built‑in mic works, but external mics make a huge difference.
• Shorter recording sessions – Breaking recordings into smaller chunks kept my energy consistent and made editing easier.

Teaching Insights

• Teaching forces deep understanding – Explaining concepts exposed gaps in my own knowledge, prompting deeper dives into Chrome and Firefox docs.
• Provide context, not just code – Early lessons focused on “how,” but later ones added “why” and “when not to.” Context matters.
• Embrace mistakes – Showing debugging and errors turned out to be valuable lessons for students.
• Video editing is time‑consuming – Removing “ums,” cutting, adjusting audio levels, and adding captions gave me new respect for YouTubers.

Advice for Creating Educational Content

• Expect a longer timeline – Multiply your time estimate by 3, then add another 50 %.
• Learn as you teach – Teaching forces clarity; you can’t hand‑wave concepts you don’t fully understand.
• Start before you feel ready – Perfection is the enemy of done.
• Make it free first – A free course removes pressure to justify a price and lets you focus on genuine value.

Course Link

After 4 months, the course is live: webextensiontutorial.com

• 14 lessons, all free, all on YouTube
• Build a complete extension from scratch and publish it to both stores

Conclusion

Was it worth it? Absolutely. Despite the time investment, I enjoyed the process. Pushing myself to create something I hadn’t done before—that’s kind of the point, right?

If you’re curious about browser extensions, check it out. And if you’ve created educational content yourself, I’d love to hear what surprised you most about the process.