Sebastian Gomez

Jul 19, 2024

Updated: Jun 24, 2026

El Manifest y sus propiedades

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.

Nota: Manifest V3 es la versión vigente y obligatoria en 2026. Manifest V2 quedó fuera de soporte, así que toda extensión nueva debe usar "manifest_version": 3.

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.

Habilita el Modo de Desarrollador. Abre Chrome y navega a chrome://extensions/. Activa el "Modo de Desarrollador" en la esquina superior derecha.
Carga 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 se puede reflejar 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.

Define los í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"
  }
}

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

Actualiza y recarga. 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 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ñade 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.default_icon en una extensión de Google Chrome radica en el propósito y el contexto de uso de cada uno:

icons:

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.

action.default_icon (dentro de la clave action):

Propósito: controla específicamente 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 action) se usa específicamente para controlar el ícono y el comportamiento del botón de acción de la extensión en la barra de herramientas del navegador.

Recarga y verifica. 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ñade el 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"
}

Define 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 extensión 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.

Crea la estructura de directorios para la 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

Crea 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"
  }
}

Actualiza 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:

Nota para el autor: aquí faltaba una imagen en el contenido original. Restaura la captura de la extensión cargada en la barra de herramientas antes de publicar.

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 localización o los íconos por defecto. ¡Buena suerte y manos a la obra!

Ejercicios propuestos

Crea un manifest.json mínimo con manifest_version, name, version y description, y cárgalo en chrome://extensions/ con el Modo de Desarrollador activado.
Añade los tres tamaños de íconos (16x16, 48x48, 128x128) y una clave action con su default_icon y default_title, recarga la extensión y comprueba que el ícono aparece en la barra de herramientas.
Agrega soporte de localización creando _locales/es/messages.json y usando las referencias __MSG_*__ en tu manifiesto. Define también default_locale.

Resumen en 3 puntos

El manifest.json es el corazón de toda extensión de Chrome y, en 2026, debe declarar "manifest_version": 3.
La clave icons define los íconos globales de la extensión, mientras que action.default_icon controla el ícono del botón en la barra de herramientas.
Con default_locale y la carpeta _locales puedes localizar tu extensión usando las referencias __MSG_*__ en el manifiesto.

Eso es todo, espero que este post te sea de utilidad y lo puedas aplicar a algún proyecto que tengas en mente.

Déjame un comentario si te sirvió, si quieres añadir alguna opinión o si tienes alguna duda. Y recuerda que si te gustó, también puedes compartirlo usando los links a las redes sociales aquí abajo.