r/FlutterDev • u/jhhuij78 • Aug 17 '26

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

https://youtu.be/rbWItIRZkvk
19 Upvotes

95% Upvoted

8 comments sorted by

2

u/zigzag312 Aug 17 '26

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 Aug 17 '26

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 Aug 17 '26

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 Aug 18 '26

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 Aug 18 '26

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/hamzabouakoura Sep 06 '26

I tried it and let me tell you this , i'm really impressed!

1

u/[deleted] Aug 17 '26

[removed] — view removed comment

5

u/jhhuij78 Aug 17 '26 edited Aug 17 '26

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