Crear una extensión para Google Chrome con Flutter
En este articulo vamos a aprender cómo crear una extensión para Google Chrome utilizando Flutter. La versión utilizada es Flutter 2.2.3 pero también funciona con las últimas versiones de Flutter hasta la 3.3.9. Al final la extensión se vera asi:
Pasos:
Vamos a iniciar con el proyecto por defecto que es el contador que todos conocemos.
Lo primero que tenemos que hacer es abrir el archivo index.html y buscar el tag <script> porque vamos a borrar todo su contenido. Este script no es necesario porque no necesitamos la funcionalidad de una PWA.
Después de borrar el código anterior vamos agregar un nuevo script. El <body> del archivo index.html quedaría de esta forma:
<body>
<script src="main.dart.js" type="application/javascript"></script>
</body>
Ahora vamos a reemplazar todo el contenido del archivo manifest.json con el siguiente json:
{
"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
}
Nota: Si quieres conocer más sobre el manifest.json puedes ver más información en la siguiente página Welcome to manifest 3.
Ahora vamos a generar la aplicación web con el siguiente comando:
flutter build web --web-renderer html --csp
Después vamos a navegar a chrome://extensions/ en Chrome y vamos a agregar el contenido de la carpeta ../build/web/ que generamos en el paso anterior, para esto damos click en Load unpacked y seleccionamos la ruta.
Podemos ver que la extensión se ha agregado exitosamente a Chrome:
Pero hay un problema, al darle click a la extensión solo se abre un pequeño cuadrito y no podemos ver nada:
Vamos a regresar al archivo index.html y vamos a agregar el tamaño de la ventana al tag <html>:
<html style="height: 600px; width: 350px">
Generamos otra vez la aplicación web y cargamos otra vez la extensión y ahora sí podemos ver que funciona correctamente:
Conclusión
Con Flutter es muy fácil crear extensiones para Google Chrome. El código fuente lo pueden encontrar en Github
Videotutorial en YouTube
Recuerda que también puedes ver el videotutorial de este curso en youtube:
