The original address: yayocoding.blogspot.com/2021/07/how…
Yayocoding.blogspot.com/
Release date: July 8, 2021
We will learn how to create a Google Chrome extension with Flutter. The version of Flutter in this article is Flutter 2.2.3.
We’ll start with the default project, which we all know as the counter application.
First, we will open the index.html file and search for the tag
After removing the previous code, we will add a new script to the tag. It’s going to look something like this.
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
Copy the codeNote: If you want to learn more about manifest.json, you can visit this website. Welcome to MANIFEST 3.
{
"name": "flutter_chrome_extension"."description": "flutter_chrome_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
}
Copy the codeNow we will use the next command to create the web application.
flutter build web --web-renderer html --csp
Copy the codeThen we’ll open Chrome and go to Chrome :// Extensions/we’ll click Load Unpacked and select route.. / build/web /. This route was generated in the previous step.
We can see that the extension was successfully added.
But there’s a problem, if we click on the extension, we only see a tiny square.
Let’s go back to the file index.html and add the size to the < HTML > tag.
<html style="height: 600px; width: 350px">
Copy the codeWe built the network application again and reloaded the extension. Now it works.
conclusion
It is very easy to create Google Browser extensions using Flutter. You can find the source for this article on Github
You can watch the video on YouTube with English subtitles enabled.
www.youtube.com/watch?v=7U5…
www.deepl.com translation