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:
| { | |
| "name": "Flutter Ext", | |
| "version": "1.0", | |
| "description": "This is a flutter chrome extension", | |
| "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'", | |
| "browser_action": { | |
| "default_popup": "index.html", | |
| "default_icon": "/icons/Icon-192.png" | |
| }, | |
| "manifest_version": 2 | |
| } |
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
| <html> | |
| <body> | |
| <script> | |
| if ("serviceWorker" in navigator) { | |
| window.addEventListener("load", function () { | |
| navigator.serviceWorker.register("flutter_service_worker.js"); | |
| }); | |
| } | |
| </script> | |
| <script src="main.dart.js" type="application/javascript"></script> | |
| </body> | |
| </html> |
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:
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta content="IE=Edge" http-equiv="X-UA-Compatible" /> | |
| <meta name="description" content="A new Flutter project." /> | |
| <!-- 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="chrome_ext" /> | |
| <link rel="apple-touch-icon" href="icons/Icon-192.png" /> | |
| <!-- Favicon --> | |
| <link rel="shortcut icon" type="image/png" href="favicon.png" /> | |
| <title>chrome_ext</title> | |
| <link rel="manifest" href="manifest.json" /> | |
| </head> | |
| <body> | |
| <!-- This script installs service_worker.js to provide PWA functionality to | |
| application. For more information, see: | |
| https://developers.google.com/web/fundamentals/primers/service-workers --> | |
| <iframe src="flutter_app.htm" frameborder="0"></iframe> | |
| </body> | |
| </html> |
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)