How to 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 3.29.0. The extension will look like this:

Chrome Extension made with Flutter

1. Create a new Flutter project

Create a new flutter project and make sure the Web platform is selected.

Create a new Flutter project with Web support

Then run the newly created project in your browser, and you will see the default counter app.

Default counter app running in Google Chrome

2. Set the width and height of your extension.

Set the width and height of your extension. The size of the extension must be between 25x25 and 800x600 pixels. You can find more information about the size in the Chrome Extension Documentation

In this example we will set the size of 340x600 pixels.

web/index.html
<!DOCTYPE html>
<html style="height: 600px; width: 340px">

3. Add a flutter_bootstrap.js file

info

The flutter_bootstrap.js contains the JavaScript code needed to initialize and run your Flutter app. Read more in Flutter web app initialization

Adding the flutter_bootstrap.js is not really needed to run your code in a Google Chrome Extension, but due to the following issue -Error: prepareServiceWorker took more than 4000ms to resolve- adding it will improve the extension's loading speed.

Create a filed called flutter_bootstrap.js and add the following content into it:

web/flutter_bootstrap.js
{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load();

4. Update the manifest.json

We have to update the manifest.json to the version Manifest V3 as follows:

{
    "name": "flutter_chrome_extension",
    "description": "flutter_chrome_extension",
    "version": "1.0.0",
    "content_security_policy": {
        "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
    },
    "action": {
        "default_popup": "index.html",
        "default_icon": "/icons/Icon-192.png"
    },
    "manifest_version": 3
}

Things to note from the code above are:

content_security_policy: Defines security restrictions on what kind of scripts and resources can be executed in the extension
script-src 'self' 'wasm-unsafe-eval'
- 'self': Allows scripts to be loaded and executed from the extension's own files.
- 'wasm-unsafe-eval': Allows WebAssembly (WASM) execution in an unsafe manner. Read more
object-src 'self': Allows objects like plugins, <object> elements, iframes, etc. To be loaded only from the extension's own resources

info

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

5. Create the web app and load it the browser

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

flutter build web --no-web-resources-cdn --pwa-strategy=none --wasm

Things to note from the command above are:

no-web-resources-cdn: Disabled using web static resources hosted on a CDN. If we do not use this option, flutter will try to fetch the renderer from the internet and the Google Chrome extension will crash.
pwa-strategy=none': Disable progressive web app because is not supported in Google Chrome Extensions.
wasm: Compile to WebAssembly (with fallback to JavaScript). See https://flutter.dev/to/wasm for more information.

The command will compile the project on the route build/web. Then we will open Chrome and go to chrome://extensions/. We will click Load unpacked and select the route ../build/web/.

Select Load unpacked to load our extension

We can see that the extension was added successfully.

Extension added successfully

We can see our Chrome Extension icon in the menu
We can also see our Chrome Extension if we open the extensions menu
Also, our Chrome Extension card can be seen on the chrome://extensions/ page.

6. Run the extension in Google Chrome

Finally, just click the extension icon to open it.

Chrome Extension running successfully

Conclusion

Creating a Google Chrome extension with Flutter is a very easy process, allowing developers to leverage Flutter’s powerful UI framework for web-based extensions. By following the steps outlined in this guide—setting up a Flutter project, configuring the manifest, handling security policies, and loading the extension in Chrome—you can build and deploy your own extension with ease. The integration of WebAssembly (WASM) further enhances performance, ensuring a smooth user experience.

You can find the source code of this article on GitHub

1. Create a new Flutter project​

2. Set the width and height of your extension.​

3. Add a flutter_bootstrap.js file​

4. Update the manifest.json​

5. Create the web app and load it the browser​

6. Run the extension in Google Chrome​

Conclusion​