Create your Chrome Extension using Flutter

Published in

Flutter Students Club

4 min readFeb 15, 2022

Hi everyone. A month ago, while I’m surfing on the internet, I realized that I have such a problem. I wanted to check Bitcoin’s current price, but every time enter the currency site was hard for me. So, I decided to make a chrome extension with flutter. I want to tell you how I did it.

Firstly, I want to build a simple extension.
Then, the bitcoin checker extension, that I mentioned above, will be placed.

You don’t need an extra package for an extension. We can say that the extension is a different version of the web. We create this using build web. In a different way.

Here is important! You need to be sure that your flutter SDK is on the latest version. If not, you may have some crashes. Because web support is pretty new. And also, make sure you already have Chrome installed on your device.

Here is important too! For this article, I am assuming that you already have some idea about Flutter and its widgets. So if not please go to the below link and read more about it.

Flutter documentation

To see changes to the site since our last release, see What's new. Once you've gone through Get started, including…

docs.flutter.dev

Let’s get started

I created a new flutter project named chrome_extension.

First of all, we need to build our app for web. Change your device to chrome from the bottom bar.

And here we are. Our application is running on chrome without any error.

Now, go to your index.html file under web folder. Remove every line inside the body tag. Then, create a new script tag inside the body tag and specify type and source.

And then, you need to specify height and width inside the html tag. If not, an extension will be created with 0 height and 0 width. Lastly, your index.html code must be shown as below:

The next thing is to go to the manifest.json file. It is where you specify how you want your extension to behave. We can remove all of these and write again. Because we don’t need all of them.

There are many keys to the manifest.json file. You can read more from the link below.

manifest.json - Mozilla | MDN

The manifest.json file is the only file that every extension using WebExtension APIs must contain.

developer.mozilla.org

Now, everything is set. We need to build the latest version of our project. Copy this and paste it to your terminal:

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

If you want to know why we write this code, you can find more by writing flutter build web -h

Now, we need to upload our extension to chrome. Open Chrome and go to your extensions: chrome://extensions/

Make sure you toggle developer mode right corner.

Tap load unpacked button and add web folder under build folder.

Hoooraaaayyy! The extension has appeared!

The source code of the complete app is available on Github.

Now, bitcoin extension!!!

It’s time to build a real extension. We will use nomics.com API for current currency prices. You can get your API key at this link.

We need to get data from API. This CryptoApi class gets data and returns it as List<Currency>.

Then, create Currency model.

Now it’s time to build main.dart file and build our listview.

One more thing. manifest.json file is a little bit different from other example. I upload some icons for every screen size. Btw they are all same icon. But chrome says we need to specify them.

And also, I add host_permission. We are using API in our project. So, we should give permission to request data from API. Otherwise, access might be blocked by CORS policy.

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/ . 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.