Sebastian Gomez

Jul 19, 2024

El Manifest y sus propiedades

El Manifest V3

Introducción

En este post, te guiaré a través de los pasos necesarios para desarrollar tu propia extensión para Chrome utilizando la versión 3 del manifiesto (Manifest V3). Desde la creación del archivo de manifiesto hasta la configuración de íconos y otros detalles esenciales, cubriremos todo lo que necesitas saber para empezar.

Primeros Pasos: Creando el Archivo de Manifiesto

El archivo de manifiesto es fundamental para cualquier extensión de Chrome. Proporciona al navegador información crucial sobre la extensión, como los archivos principales y las capacidades que utilizará. Con cada nueva versión del manifiesto, las características de la plataforma de extensiones cambian. En este post, trabajaremos con Manifest V3, y empezaremos creando un archivo JSON para nuestra extensión.

Estructura Básica del Archivo de Manifiesto:

Crea un archivo llamado manifest.json: Este archivo debe contener un objeto JSON con la siguiente estructura:

{
  "manifest_version": 3,
  "name": "Mi Extensión",
  "version": "0.0.1",
  "description": "Descripción de mi extensión"
}

Cargando la Extensión en Chrome

Una vez creado el archivo de manifiesto, el siguiente paso es cargar la extensión en Chrome.

1. Habilitar el Modo de Desarrollador:Abre Chrome y navega a chrome://extensions/.Activa el "Modo de Desarrollador" en la esquina superior derecha.
2. Cargar la Extensión:Haz clic en "Cargar descomprimida" y selecciona la carpeta que contiene tu archivo manifest.json.Verás tu extensión listada. Cualquier cambio que hagas en el manifiesto puede ser reflejado al recargar la extensión.

Añadiendo Íconos a la Extensión

Las extensiones suelen incluir íconos para mejorar la experiencia del usuario. Manifest V3 permite especificar diferentes tamaños de íconos para distintas partes del navegador.

Definir Íconos en el Manifiesto:

Añade una sección de íconos a tu manifest.json:

{
  "manifest_version": 3,
  "name": "Mi Extensión",
  "version": "0.0.1",
  "description": "Descripción de mi extensión",
  "icons": {
    "16": "icon-16.png",
    "48": "icon-48.png",
    "128": "icon-128.png"
  }
}

Preparar los Archivos de Íconos:

Crea íconos en los tamaños especificados (16x16, 48x48, 128x128) y colócalos en la carpeta de tu proyecto.

Actualizar y Recargar:

Después de actualizar el manifiesto con los íconos, recarga la extensión para ver los cambios reflejados.

Configurando la Acción de la Extensión

La API chrome.action en el Manifest V3 de Google Chrome Extensions permite controlar el ícono de la extensión que aparece en la barra de herramientas del navegador. Esta API es fundamental para gestionar cómo se presenta y se comporta la extensión en la interfaz del usuario. Al incluir la clave action en el archivo manifest.json de la extensión, se pueden definir elementos como el ícono predeterminado, el título que aparece al pasar el cursor sobre el ícono y una ventana emergente (popup) que se muestra cuando el usuario hace clic en el ícono. Esto mejora la interactividad y usabilidad de la extensión, permitiendo a los desarrolladores proporcionar información adicional o funciones específicas directamente desde la barra de herramientas del navegador.

La API también permite actualizar estos elementos de manera dinámica a través de varios métodos. Por ejemplo, se puede cambiar el ícono utilizando chrome.action.setIcon(), establecer un título con chrome.action.setTitle(), y definir o cambiar el contenido de una ventana emergente usando chrome.action.setPopup(). Además, se pueden gestionar las insignias que aparecen sobre el ícono para mostrar información de estado, como contadores, utilizando chrome.action.setBadgeText() y chrome.action.setBadgeBackgroundColor(). Estos métodos permiten que las extensiones adapten su apariencia y comportamiento según el contexto, como el contenido de la pestaña actual, mejorando así la experiencia del usuario final.

Añadir una Sección de Acción:

Actualiza tu manifest.json para incluir la sección action:

{
  "manifest_version": 3,
  "name": "Mi Extensión",
  "version": "0.0.1",
  "description": "Descripción de mi extensión",
  "icons": {
    "16": "icon-16.png",
    "48": "icon-48.png",
    "128": "icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "icon-16.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
    },
    "default_title": "Mi Asombrosa Extensión de Chrome"
  }
}

¿Cuál es la diferencia entre usar icons y action.default_icon? ⁠

La diferencia principal entre usar icons y action.icons en una extensión de Google Chrome radica en el propósito y el contexto de uso de cada uno:

Propósito: Define los íconos de la extensión que se utilizan en diferentes contextos dentro de la interfaz de usuario de Chrome, como en la página de la tienda Chrome Web Store, el administrador de extensiones, y la barra de herramientas del navegador.

Contexto: Es una configuración global para la extensión que especifica los íconos en diferentes tamaños para que Chrome pueda usarlos donde sea apropiado.

Propósito: Específicamente controla el ícono de la acción de la extensión que aparece en la barra de herramientas del navegador. Esto es relevante para extensiones que tienen una interacción directa con el usuario a través de un botón en la barra de herramientas.

Contexto: Se usa para definir la apariencia del ícono de la acción y su comportamiento (como mostrar un popup al hacer clic) directamente en la barra de herramientas del navegador.

Entonces, icons se usa para definir los íconos globales de la extensión en varios tamaños para diferentes partes de la interfaz de Chrome, mientras que action.default_icon (dentro de la clave default_icon) se usa específicamente para controlar el ícono y comportamiento del botón de acción de la extensión en la barra de herramientas del navegador.

Recargar y Verificar:

Recarga la extensión y verifica que los íconos y el título predeterminado aparezcan correctamente en la barra de herramientas.

Añadiendo Información Adicional

Puedes incluir más información en el manifiesto para personalizar aún más tu extensión.

Añadir Correo Electrónico del Autor:

Añade una línea en tu manifest.json para incluir el correo del autor:

{
  "manifest_version": 3,
  "name": "Mi Extensión",
  "version": "0.0.1",
  "description": "Descripción de mi extensión",
  "icons": {
    "16": "icon-16.png",
    "48": "icon-48.png",
    "128": "icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "icon-16.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
    },
    "default_title": "Mi Asombrosa Extensión de Chrome"
  },
  "author": "miemail@example.com"
}

Definir el Idioma Predeterminado:

Especifica el idioma predeterminado utilizando default_locale:

{
  "manifest_version": 3,
  "name": "Mi Extensión",
  "version": "0.0.1",
  "description": "Descripción de mi extensión",
  "icons": {
    "16": "icon-16.png",
    "48": "icon-48.png",
    "128": "icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "icon-16.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
    },
    "default_title": "Mi Asombrosa Extensión de Chrome"
  },
  "author": "miemail@example.com",
  "default_locale": "es"
}

Al utilizar localización en nuestra extension óes necesario crear una estructura de directorios que incluya los archivos de localización correspondientes. Aquí tienes los pasos para agregar la localización a tu extensión de Chrome:

Crear la Estructura de Directorios para Localización:

En la raíz de tu proyecto (es decir en public), crea una carpeta llamada _locales. Dentro de esta carpeta, crea una subcarpeta para cada idioma que desees soportar. En este caso, vamos a añadir soporte para español (es).

my-chrome-extension/
├── _locales/
│   └── es/
│       └── messages.json
├── public/
│   ├── icon-16.png
│   ├── icon-48.png
│   └── icon-128.png
├── src/
├── manifest.json
└── package.json

Crear el Archivo de Localización:

Dentro de la carpeta es, crea un archivo llamado messages.json y añade el contenido de los mensajes localizados. Este archivo contiene los mensajes en español que se usarán en tu extensión.

{
  "appName": {
    "message": "Mi Extensión"
  },
  "appDescription": {
    "message": "Descripción de mi extensión"
  },
  "defaultTitle": {
    "message": "Mi Asombrosa Extensión de Chrome"
  }
}

Actualizar el Archivo manifest.json:

Asegúrate de que el manifest.json utilice los mensajes localizados. Aquí tienes un ejemplo actualizado:

{
  "manifest_version": 3,
  "name": "__MSG_appName__",
  "version": "0.0.1",
  "description": "__MSG_appDescription__",
  "icons": {
    "16": "icon-16.png",
    "48": "icon-48.png",
    "128": "icon-128.png"
  },
  "action": {
    "default_icon": {
      "16": "icon-16.png",
      "48": "icon-48.png",
      "128": "icon-128.png"
    },
    "default_title": "__MSG_defaultTitle__"
  },
  "author": "miemail@example.com",
  "default_locale": "es"
}

Así debería lucir tu extensión:

Conclusión

Desarrollar extensiones para Chrome puede parecer una tarea desafiante al principio, pero con una buena comprensión del manifiesto y siguiendo estos pasos, puedes crear fácilmente tu primera extensión. A medida que avances, explorarás más características y capacidades para hacer que tu extensión sea aún más útil y atractiva como la localizacion o los iconos por defecto. ¡Buena suerte y manos a la obra!