A library for accessing the chrome.*
APIs available in Chrome extensions.
This allows to build Chrome extension with Dart & Flutter and to interop with the native APIs easily with a high-level type-safe interface.
The JS interop is build on top of dart:js_interop
(static interop) which make it ready for future WASM compilation.
import 'example/chrome_tabs.dart';
import 'example/chrome_alarms.dart';
import 'example/chrome_power.dart';
import 'example/chrome_runtime.dart';
import 'example/chrome_storage.dart';
- Chrome Extensions API reference
- See example folder for some examples of Flutter and Dart Chrome extensions
Here are some personal tips to build Chrome extension using the Flutter UI framework.
In order to develop in a comfortable environment with hot-reload, most of the app (the UI part) should be developed using Flutter desktop.
This requires an abstraction layer between the UI and the chrome_extension
APIs.
In the Desktop entry point, a fake implementation of this abstraction layer is used, like this:
import 'example/desktop_entry_point.dart#example';
Launch this entry point in desktop with
flutter run -t lib/main_desktop.dart -d macos|windows|linux
And the real entry point (the one used in the actual compiled extension) looks like:
import 'example/real_entry_point.dart#example';
web/manifest.json
{
"manifest_version": 3,
"name": "my_extension",
"permissions": [
"activeTab"
],
"options_page": "options.html",
"background": {
"service_worker": "background.dart.js"
},
"action": {
"default_popup": "index.html",
"default_icon": {
"16": "icons-16.png"
}
},
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
}
}
import 'example/build_script.dart#example';
It builds the flutter app and compiles all the other Dart scripts (for example: options.dart.js, popup.dart.js, background.dart.js)
Write tests for the extension using puppeteer-dart
.
import 'example/test.dart';