This is a DEMO project for building a browser extension alongside a Flutter mobile app. This code will simulate a bookmarking app that allows a user to access a (fake) database of bookmarks that they can access, add, edit and delete using either the mobile app or the browser extension.
This example code was built as part of a presentation for FlutterConUSA2024.
You can view the slide deck here: Browser Extensions with Flutter ADD PDF LINK
Video of the presentation will be available soon.
You must have Flutter, node and npm installed on your machine to run this project.
- Clone the repo
- Run
npm installin the root directory - Run
flutter pub get
There are two demos in this project: One demonstrating usage of the Chrome Tabs API and the other demonstrating usage of the Chrome Storage API.
To build the Tabs extension, run scripts/build-tabs.sh to compile the typescript code, run the versioning script and build into the build/web directory. You can then load unpacked the extension from there. For Storage, run scripts/build-storage.sh.
You can build and run the mobile app as you would normally.
For more on Flutter/Dart JS interop: Flutter JS Interop
For more on extensions: Chrome Extensions
How to convert to Safari: Safari Extensions