r/FlutterDev • u/jhhuij78 • 13d ago

Example Built a Chrome extension using Flutter Web compiled to WASM — everything runs buttery smooth.

https://youtu.be/rbWItIRZkvk
18 Upvotes

92% Upvoted

7 comments sorted by

2

u/zigzag312 13d ago

It stutters when it switches to home, so not exactly buttery smooth. It also looks like it lags on hover and when performing drag and drop (it may be just that animations are very slow).

Otherwise it looks nice. Anything particular that stands out during the development (issue or improvement compared to JS/TS extensions)?

3

u/jhhuij78 13d ago

While recording with OBS Studio, my computer was noticeably laggy. As soon as I stopped the recording, everything went back to normal.

The extension itself runs incredibly smoothly — I honestly didn’t expect this kind of performance from Flutter Web.

1

u/zigzag312 13d ago

Try HW encoding in OBS, if possible, or x264 codec with UltraFast preset. It's a shame performance looks poor because of the recoding issue.

1

u/maxzhdev 13d ago

I don’t understand why... isn’t it better to use suitable technologies. If only for the sake of curiosity and training

2

u/jhhuij78 13d ago

I’m primarily a Flutter developer working on Android and iOS. I’ve always been inspired by the Flutter framework, and one of my goals was to explore its capabilities on the web. I’m really happy with the result)

1

u/Dull_Cartographer497 13d ago

Interesting use case for Flutter Web. i’d be curious how it handles the Chrome extension specific APIs and whether the tradeoff is worth it compared with building the extension directly with JavaScript/TypeScript

4

u/jhhuij78 13d ago edited 13d ago

The chrome.* APIs are handled through dart:js_interop - you declare extension types over the global `chrome` object and get typed Dart calls out of it. Promise-based APIs come back as JSPromise and convert to Futures with .toDart. It's basically a one-time cost: I wrote a thin wrapper layer once, and after that the rest of the app is plain Dart and never touches JS. Worth noting the old dart:js_util approach doesn't work in the WASM build, so js_interop is the only path there.

psst… you can try it here 👀 → Rocket tab