How to Make Flutter Chrome Extension

How to Make Flutter Chrome Extension

    We will use simple steps to create flutter chrome extension

    1. Create a new project.

    2. Then go the project root folder and run

    flutter run -d chrome

    The above command will run your project on chrome.


    3. Then go and index.html inside your web folder and remove the code with script tags

    and then add new code

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

    So your body should look like this.


    4. Then find the manifest.json file inside web folder and. replace the code with the below code

        "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

    You can learn more about the manifest.json file with the link below


    5. And then stop the project from the terminal and run the below command

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

    It will create an extension for us and we would be able to load in the chrome extension


    6. Open a browser and type in chrome://extensions and you will see like below

    You need to enable developer mode on the right if you don't see Load unpacked.


    7. Then click on the Load unpacked button and the folder in your project app/build/web. You need to load the web folder itself.


    8. Go ahead and click on your extension and you will see it.


    9. You can resize the extension view in your index.html like

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

    So you index.html now look like this

    <!DOCTYPE html>
    <html style="height: 600px; width: 350px">
        If you are serving your web app in a path other than the root, change the
        href value below to reflect the base path you are serving from.
        The path provided below has to start and end with a slash "/" in order for
        it to work correctly.
        For more details:
      <base href="/">
      <meta charset="UTF-8">
      <meta content="IE=Edge" http-equiv="X-UA-Compatible">
      <meta name="description" content="Learn how to create a google chrome extension with Flutter">
      <!-- iOS meta tags & icons -->
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="apple-mobile-web-app-title" content="flutter_chrome_extension">
      <link rel="apple-touch-icon" href="icons/Icon-192.png">
      <link rel="manifest" href="manifest.json">
    <script src="main.dart.js" type="application/javascript"></script>


    Recent posts