Flutter Chrome Extensions

Kürşat Fevzican Şayhan

2 min readDec 6, 2023

Chrome extensions are software add-ons that have emerged to make things easier for users while browsing on Chrome.

For example;

· If you want to change the language of a site while browsing

· Find out the prices or past prices of the product you will purchase on other sites while shopping

· Download a video you watched to your computer

· Remove the ads that appear everywhere on the websites

we need Chrome extensions.

Now, let’s see how we can make these Chrome extensions with Flutter.

Installation

First, we start by creating a flutter web project.

Then, we need to edit the project > web > index.html file.

We add our height and width values into the tag.

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

We redirect to the main.dart.js script in the tag.

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

After the additions, the index.html file should look like the following.

<!DOCTYPE html>
<html style="height: 600px; width: 300px">
<head>
   <meta charset="UTF-8" />
   <title>Smple Chrm Extnsn</title>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

In the next step, we edit the project > web > manifest.json file.

{
     "name": "sample chrome extension",
     "description": "demo",
     "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
}

This is how the installation is completed.

Build

After the installation stages and code design, we move on to the build phase.

flutter build web - web-renderer html - csp

After the build is completed, we enter the chrome://extensions/ page. We open developer mode from the top right.

After opening it, we click on the Load Unpacked button at the top left. From here we select the project > build > web folder.

Flutter Chrome Extensions

Installation

Build

Screen View

Written by Kürşat Fevzican Şayhan