[Outdated] How to Create a Google Chrome Extension with Flutter (Uses Removed Web HTML Renderer)

warning

Flutter 3.29.0 has removed the HTML renderer, making the information in this article outdated. Please refer to the updated article for Flutter 3.29.0 and later. Create a Google Chrome Extension with Flutter

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

Steps

We will start with the default project, the counter app 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.

Remove this script

After deleting the previous code, we will 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 following 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 straightforward to create Google Chrome extensions. You can find the source code of this article on GitHub

Steps​

Conclusion​

Steps

Conclusion