I have never build chrome extension with flutter, i want to try it but i have a question.
Is it possible to build chrome extension with any flutter project ?
According to the article referenced:
Three steps…
Then only insert the following tag inside the :
<script src="main.dart.js" type="application/javascript"></script>
Just replace the starting <html>
tag with the following:
<html style="height: 600px; width: 350px">
This will set the extension view’s height and width to 600 pixels and 350 pixels respectively.
{
"name": "QR Code Extension",
"description": "QR Code Extension",
"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
}
Trying out the extension With the required changes done, you are ready to build and run it as a Chrome extension.
By default, when you run a Flutter web build using the following command:
flutter build web
It uses the HTML renderer for a mobile browser and CanvasKit renderer for a desktop browser.
To give a little bit of context, Flutter web has support for two types of renderers (according to the Docs):
HTML renderer Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.
CanvasKit renderer This renderer has faster performance with higher widget density (supports operation on pixel level) but adds about 2MB in download size.
But in order to use it as an extension, you have to specifically generate the build only using the HTML renderer. It can be done using the following command:
flutter build web --web-renderer html
🛑 Don’t run the command yet!
Finally, you have to use the --csp flag in order to disable the dynamic generation of code in the generated output which is necessary to satisfy CSP restrictions.
🟢 RUN this command:
flutter build web --web-renderer html --csp
You will find the generated files inside build/web folder present in your root Flutter project directory.