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 code

Note: 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 code

Now we will use the next command to create the web application.

flutter build web --web-renderer html --csp
Copy the code

Then 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 code

We 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