Browser Extensions with Flutter
summary
A Flutter UI plus a TypeScript backend implements a bookmarks extension: a service worker listens for the browser's star/bookmark event and sends URLs to a shared DB, while the Flutter pop-up renders a clickable list that calls chrome.tabs.create to open links. Practical details include a build script that copies pubspec into manifest, forcing local CanvasKit and the manifest CSP and no-CDN flags, and heavy use of JS interop to convert promises/objects. Works in Chrome; Safari needs Xcode conversion.
AI-written summary · about
chapters (10)
- 0:00Flutter browser extensions intro
- 1:05Extension types and use cases
- 4:40When Flutter fits extensions
- 6:49Bookmarks app example
- 12:37Flutter setup for extensions
- 15:05Listening to browser events
- 16:32JS interop for Chrome API
- 24:20Testing and debugging extensions
- 25:46Styling and deployment
- 27:13Q&A
related talks
33mBecome a wizard and make the browser your own
22mExtending the Web - explore new UI surfaces with WebExtensions
29mEverything You Ever Wanted To Know About Cross-Browser Web Extensions
41mCross browser extensions – lets make one
53mFlutter in Action
38mBuilding Cross-Platform Browser Add-ons
20mDevelop your own Browser extension
33mBrowser Extensions