Skip to content

Navigation Menu

Sign in
Sign up

Latest commit

History

2 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Powtoon Capture icon

Powtoon Capture — Portfolio Showcase

View on the Chrome Web Store →

Powtoon Capture is a free Chrome extension for recording your screen, webcam, or both directly from the browser — then enhancing, sharing, and exporting the result as a video message.

Built with React, JavaScript, and TypeScript

⭐ 4.2/5 (33 ratings) · 👥 50,000+ users · 🏷️ Featured on the Chrome Web Store

⚠️ Source code is proprietary. This repo documents the architecture, my contributions, and technical decisions.

Chrome Web Store Users React TypeScript JavaScript


Overview

Make a video recording from a website, application, or anything else you can show on your screen to start communicating visually.

Powtoon Capture is a free screen and webcam recorder that allows you to easily record your screen, face, or both.

What you can do with Powtoon Capture:

  1. Record a video message from a website, application, or anything else on Chrome
  2. Enhance your video message with visual effects, shapes, animation, and text
  3. Go Live — use Powtoon Capture while hosting on Zoom, Google Hangouts, or any of your favorite virtual meeting tools
  4. Share your video message anywhere — download as MP4 or copy the URL

Common use cases:

  • 💼 Sales — product demo teasers and meeting recaps
  • 👩🏻‍🏫 L&D / Training — easy-to-follow step-by-step walkthroughs
  • 💬 Internal Comms — spotlighting wins, updates, and announcements
  • 🏆 Support / Customer Success — visual answers to FAQs
  • 💡 Marketing — webinars and videos that create an "aha" moment
  • 🙋🏽‍♀️ Leadership — messages that inspire teams

Screenshots

Capture your message faster Live screen & camera presenting
Capture your message faster — pick Screen & Cam, Screen Only, or Cam Only and hit record Live screen & camera presenting — record your screen and webcam together in one take
Choose from themed frames Share instantly with your team
Choose from themed frames — style your webcam feed with circle, angled, and other frame options Share instantly with your team — post to Facebook, Twitter, LinkedIn, email, or copy a link
Go beyond video messaging
Go beyond video messaging — use recordings for demos, training, comms, and more

My Role

Frontend Developer (February 2021 – March 2022, Remote)

Part of the distributed engineering team building and developing and maintaining the extension. My primary contributions were the recording upload pipeline, Design System components, and test coverage across the web application.

Key Contributions

  • Browser Extension architecture
  • React application development
  • Popup UI development
  • Content Script implementation
  • Background Service Worker development
  • Chrome API integration
  • Authentication flow
  • API integration
  • State management
  • Performance optimization
  • Bug fixing and maintenance

🛠 Tech Stack

Frontend

  • React
  • Redux
  • JavaScript
  • TypeScript
  • HTML5
  • CSS3

Browser Extension

  • Chrome Extension Manifest V3
  • Chrome Extension APIs
  • Content Scripts
  • Popup Script
  • Background Service Workers
  • Runtime Messaging
  • Chrome Storage API
  • Tabs API
  • IndexDB

Development

  • npm
  • Git
  • GitHub
Layer Technology
UI (Popup Script) React 18, JavaScript, TypeScript, TailwindCSS
Content Scripts Vanilla JavaScript/TypeScript, DOM APIs
Background Manifest V2 Background Service Script
State Management Redux, chrome.storage.session, chrome.storage.local
Backend Integration REST APIs, Amazon S3
Build Tools Webpack
Target Browsers Chrome (Manifest V2)

Technical Highlights

  • Chrome Manifest V2 architecture
  • React-based popup application
  • Modular project structure
  • Background Service Worker
  • Content Script implementation
  • Runtime Messaging
  • Browser Storage API
  • IndexDB
  • Authentication flow
  • API communication
  • Error handling
  • Performance optimization

Key Contribution: Parallel Chunk Upload System

The problem

When a user finished recording a video, the extension uploaded the entire video blob as a single HTTP request. For longer recordings (10–30 minutes, common for educators and content creators), this meant:

  • Upload took minutes with no meaningful progress indication
  • If the connection dropped at 95%, the entire upload failed and had to restart from zero
  • Users on unreliable networks (school Wi-Fi, coffee shops) frequently lost recordings

The solution

I designed and implemented a parallel chunk upload pipeline using Web Workers — splitting the recording into chunks that upload concurrently and independently, so a dropped connection no longer meant losing the whole upload, and users got accurate, real-time progress instead of a single opaque request.


📚 What I Learned

Working on Powtoon Capture strengthened my experience in:

  • Browser Extension Development
  • Chrome Manifest V2
  • React
  • TypeScript
  • Content Scripts
  • Background Service Workers
  • Chrome Runtime Messaging
  • Browser Storage
  • Authentication
  • REST API Integration
  • Amazon S3 Integration
  • Performance Optimization

Links


🙏 Acknowledgements

Special thanks to the Powtoon team for providing the opportunity to contribute to this project and collaborate on building a production-ready browser extension.


This is an unofficial portfolio showcase. Powtoon Capture is a product of PowToon Limited; all screenshots and descriptions above are sourced from its public Chrome Web Store listing.

About

Architecture showcase — Chrome screen recording extension with 60,000+ users. Parallel chunk upload, Web Workers, Design System. (Source code is proprietary)

Topics

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

AltStyle によって変換されたページ (->オリジナル) /