Wednesday, May 25, 2022

How to create a Google Chrome extension with Flutter

We are going to learn how to create a Google Chrome extension with Flutter. The Flutter version in this article is Flutter 2.2.3 and has been tested also in 2.10.5. The extension will look like this:

Steps

We will start with the default project, the counter app that we all know.

First we will open the file index.html and search for the tag <script> because we will delete all the content inside it. We do not need this script because we do not need PWA functionality.

After deleting the previous code, we are going to add a new script in the <body> tag. It will look like this:

<body>

<script src="main.dart.js" type="application/javascript"></script>

</body>

Now we are going to replace the content of the manifest.json with the next json:

{
  "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
}

Note: If you want to know more about the manifest.json you can visit this website: Welcome to manifest 3.

Now we are going to create the web app with the next command:

flutter build web --web-renderer html --csp

Then we will open Chrome and go to chrome://extensions/ we will click Load unpacked and select the route ../build/web/. This route was generated in the previous step.

We can see that the extension was added successfully.

But there is a problem, if we click the extension we can only see a very small square:

We go back to the file index.html and we add the size in the <html> tag:

<html style="height: 600px; width: 350px">

We generate the web app again and we reload the extension. Now it works correctly:

Conclusion

With Flutter it is very easy to create Google Chrome extensions. You can find the source code of this article in Github

You can watch the video tutorial in youtube and remember to activate the subtitles in english:

0 comments:

Post a Comment

Entradas populares