Is it possible to build chrome extension with any flutter project?

flutter flutter-web chrome-extension-manifest-v3

152

According to the article referenced:

Three steps…

Remove non-supported scripts from index.html Navigate to web/index.html file and remove all the .. tags:

Then only insert the following tag inside the :

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

Set the extension view dimensions Extensions have a fixed dimension, so you need to explicitly specify the width and height values of the extension view inside the HTML.

Just replace the starting <html> tag with the following:

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

This will set the extension view’s height and width to 600 pixels and 350 pixels respectively.

Make some changes in manifest.json Navigate to web/manifest.json file and replace the entire content with the following:

{
    "name": "QR Code Extension",
    "description": "QR Code 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
}

Trying out the extension With the required changes done, you are ready to build and run it as a Chrome extension.

By default, when you run a Flutter web build using the following command:

flutter build web

It uses the HTML renderer for a mobile browser and CanvasKit renderer for a desktop browser.

To give a little bit of context, Flutter web has support for two types of renderers (according to the Docs):

HTML renderer Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.

CanvasKit renderer This renderer has faster performance with higher widget density (supports operation on pixel level) but adds about 2MB in download size.

But in order to use it as an extension, you have to specifically generate the build only using the HTML renderer. It can be done using the following command:

flutter build web --web-renderer html

🛑 Don’t run the command yet!

Finally, you have to use the --csp flag in order to disable the dynamic generation of code in the generated output which is necessary to satisfy CSP restrictions.

🟢 RUN this command:

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

You will find the generated files inside build/web folder present in your root Flutter project directory.

152

Author by

Adnan Turgay Aydın

Hey i am Adnan Turgay!

Updated on December 03, 2022

Comments

Adnan Turgay Aydın over 1 year

I have never build chrome extension with flutter, i want to try it but i have a question.

Is it possible to build chrome extension with any flutter project ?