Intro
Chrome extension are used in chrome (obviously), and they allow the user to have an app in a small overlay on the top right of their chrome window. Some popular chrome extension include the likes of: grammerly, honey, JSON Viewer etc.
Today I will be showing how to create a simple chrome extension that runs a flutter app. The end result of what we are looking at looks like this:
Without any more hesitation let's get to it.
Tutorial Portion
The first thing that needs to be done after you create the project is restructuring the manifest file located in the web folder. We need to format our app to be a chrome extension, so the manifest will be:
The next step is to remove the script that calls creates the flutter app from index.html, and but it in another file I will name flutter_app.htm
This is because chrome extensions don't like it when you run scripts in index.html. We will call the created flutter_app.htm file as an iframe in index.htm:
We are done now for coding, let's see how we can add this as a chrome extension.
Adding a Chrome Extension
First run flutter build web inside your flutter project.
In your browser navigate to chrome://extensions/. Once there click on load unpacked in the top left corner
Open the build/web folder, then the flutter extension shoula appear on dashboard.
You can now open the flutter extension from the extensions menu in the top right of your chrome browser.
If you want to pin it, just click the pin button and it will be added to your list of pinned extensions
Conclusion
I hope this information was of value to you. This is a good idea if you want to build an app that has a chrome extension companion, like forest for example.
Source code: https://github.com/Mattds825/chrome_ext
If you want to run the source code first run 'flutter build web' then add build/web as an extension in chrome
Top comments (0)