Have you ever wondered if you could use your Flutter skills to create a Chrome extension? With the web support in Flutter gaining maturity, now is the perfect time to explore this fusion. In this guide, I’ll walk you through the steps to convert your Flutter project into a fully functional Chrome extension.
Pre-requisites
Before diving in, make sure you have:
- An existing Flutter project (or the drive to start one!).
- The latest version of Flutter installed.
- Ensuring Flutter’s Web Support:
If you initiated your Flutter project before web support was introduced, or simply didn’t activate Web support, don’t fret. Activating web support is a breeze. In your project’s top-level directory, run:
flutter create — platforms web
This command equips your project with the necessary configurations for web deployment.
- Tweaking the index.html file
The entry point of your Flutter web app is the index.html file.
Navigate to the web/index.html directory, and:
Link the Compiled JavaScript:
Insert the script tag to execute the Dart-compiled JavaScript:
Set the Extension’s Size:
Extensions often pop up with a predefined size. To set a fixed dimension for your extension view, modify the starting tag:<!DOCTYPE html>
<html style="height: 600px; width: 300px">
<head>
<meta charset="UTF-8" />
<title>chromextension</title>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
- Crafting the manifest.json
Chrome seeks metadata about the extension from manifest.json. This file dictates the extension’s behavior and attributes. Replace the content of the web/manifest.json file with the appropriate extension configuration, including name, description, version, content security policy, default popup, and icon:
{
"name": "extension demo",
"description": "demo",
"version": "1.0.0",
"content_security_policy": {
"extension_pages": "script-src 'self' ; object-src 'self'"
},
"action": {
"default_popup": "index.html",
"default_icon": "icons/Icon-192.png"
},
"manifest_version": 3
}- Building the Extension
Flutter requires certain flags for optimal web building, especially for Chrome extensions:
flutter build web --web-renderer html --csp
— web-renderer html Uses HTML and CSS for rendering.
--cspAdheres to browser-enforced content security policies.- Testing Waters: Installing & Testing the Extension
Before the grand reveal, test your extension locally.
Open Chrome, type chrome://extensions.
Activate ‘Developer mode’.
Click ‘Load unpacked’ and select the createdbuild/web folder from your Flutter project directory.