Develop your own Browser extension
summary
Shows that a browser extension can be built like a frontend SPA and actually replaces repetitive dev tasks: a Chrome-only extension is created with Vite + React build and loaded unpacked, using a chrome.cookies API adapter to switch from window.document.cookie to extension APIs; it sets and removes auth cookies and successfully manipulates an active tab. Automation uses React Testing Library to drive a form flow and demos an automated 25-step journey. Notes Chromium vs Firefox compatibility.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 2:00Project challenge and idea
- 4:15Why extensions use JavaScript
- 6:02Loading local extension
- 8:36What extensions can do
- 10:01Manifest JSON and permissions
- 11:29Extension functionality with JavaScript
- 12:55SPAs for extensions
- 13:16Local dev and cookies
- 15:03Production build and Chrome API
- 16:49Testing production extension
- 17:33Automating user journeys
related talks
29mEverything You Ever Wanted To Know About Cross-Browser Web Extensions
22mExtending the Web - explore new UI surfaces with WebExtensions
33mBecome a wizard and make the browser your own
41mCross browser extensions – lets make one
30mSave Time by Building Extensions for Your Browsers
33mBrowser Extensions
28mA hero's guide to developing with Chrome Dev Tools
10mMaking AI Coding Work for Enterprise-Grade Browser Extensions