Cómo crear una extensión de Google Chrome con Flutter

En este artículo aprenderemos a crear una extensión de Google Chrome con Flutter. La versión de Flutter utilizada es Flutter 3.29.0. La extensión se verá así:

Extensión de Chrome hecha con Flutter

1. Crear un nuevo proyecto de Flutter

Crea un nuevo proyecto de Flutter y asegúrate de que la plataforma Web esté seleccionada.

Crear un nuevo proyecto de Flutter con soporte para Web

Luego, ejecuta el proyecto recién creado en tu navegador y verás la aplicación predeterminada del contador.

Aplicación predeterminada del contador ejecutándose en Google Chrome

2. Configurar el ancho (width) y alto (height) de la extensión

Debes establecer el ancho y alto de la extensión. El tamaño debe estar entre 25x25 y 800x600 píxeles. Puedes encontrar más información sobre los tamaños en la documentación de extensiones de Chrome

En este ejemplo, estableceremos un tamaño de 340x600 píxeles.

web/index.html
<!DOCTYPE html>
<html style="height: 600px; width: 340px">

3. Agregar el archivo flutter_bootstrap.js

info

El archivo flutter_bootstrap.js contiene el código JavaScript necesario para inicializar y ejecutar tu aplicación Flutter. Puedes leer más en Inicialización de aplicaciones web en Flutter.

Agregar el archivo flutter_bootstrap.js no es estrictamente necesario para ejecutar el código en una extensión de Google Chrome, pero debido a este error -Error: prepareServiceWorker took more than 4000ms to resolve- incluirlo mejorará la velocidad de carga de la extensión.

Crea un archivo llamado flutter_bootstrap.js y agrega el siguiente contenido:

web/flutter_bootstrap.js
{{flutter_js}}
{{flutter_build_config}}

_flutter.loader.load();

4. Actualizar el archivo manifest.json

Debemos actualizar el archivo manifest.json a la versión Manifest V3 de la siguiente manera:

{
    "name": "flutter_chrome_extension",
    "description": "flutter_chrome_extension",
    "version": "1.0.0",
    "content_security_policy": {
        "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
    },
    "action": {
        "default_popup": "index.html",
        "default_icon": "/icons/Icon-192.png"
    },
    "manifest_version": 3
}

Algunos puntos clave del código anterior:

content_security_policy: Define restricciones de seguridad sobre qué tipo de scripts y recursos pueden ejecutarse en la extensión.
script-src 'self' 'wasm-unsafe-eval'
- 'self': Permite que los scripts se carguen y ejecuten desde los propios archivos de la extensión.
- 'wasm-unsafe-eval': Permite la ejecución de WebAssembly de forma no segura. Más información
object-src 'self': Permite que objetos como complementos, elementos <object>, iframes, etc., se carguen solo desde los recursos de la extensión.

info

Si deseas saber más sobre manifest.json, puedes visitar este enlace: Bienvenido a manifest V3

5. Crear la aplicación web y cargarla en el navegador

Ahora vamos a crear la aplicación web con el siguiente comando:

flutter build web --no-web-resources-cdn --pwa-strategy=none --wasm

Puntos clave del comando:

no-web-resources-cdn: Desactiva el uso de recursos estáticos web alojados en un CDN. Si no usamos esta opción, Flutter intentará obtener el renderizador desde internet y la extensión de Chrome fallará.
pwa-strategy=none': Desactiva el soporte para Progressive Web Apps (PWA), ya que no es compatible con extensiones de Google Chrome.
wasm: Compila a WebAssembly (con respaldo a JavaScript). Más información en Flutter WebAssembly.

El comando compilará el proyecto en la ruta build/web. Luego, abriremos Chrome y navegaremos a chrome://extensions/. Daremos clic en Load unpacked y seleccionaremos la ruta ../build/web/.

Seleccionar "Load unpacked" para cargar nuestra extensión

Podemos ver que la extensión se agregó con éxito.

Extensión añadida exitosamente

Podemos ver el icono de nuestra extensión en el menú.
También podemos ver nuestra extensión en el menú de extensiones.
Además, la tarjeta de nuestra extensión aparece en la página chrome://extensions/.

6. Ejecutar la extensión en Chrome

Finalmente, solo hay que hacer clic en el icono de la extensión para abrirla.

Extensión de Chrome ejecutándose con éxito

Conclusión

Crear una extensión de Google Chrome con Flutter es un proceso muy sencillo, lo que permite a los desarrolladores aprovechar el potente framework de UI de Flutter para crear extensiones basadas en la web. Siguiendo los pasos de esta guía, configurar un proyecto de Flutter, actualizar el manifiesto, manejar políticas de seguridad y cargar la extensión en Chrome, puedes construir y desplegar tu propia extensión con facilidad. La integración con WebAssembly (WASM) mejora aún más el rendimiento, asegurando una experiencia fluida para los usuarios.

Puedes encontrar el código fuente de este artículo en GitHub

1. Crear un nuevo proyecto de Flutter​

2. Configurar el ancho (width) y alto (height) de la extensión​

3. Agregar el archivo flutter_bootstrap.js​

4. Actualizar el archivo manifest.json​

5. Crear la aplicación web y cargarla en el navegador​

6. Ejecutar la extensión en Chrome​

Conclusión​