Sebastian Gomez
Personalizando extensiones de Chrome con Badges y Tooltips
Jul 21, 2024
Updated: Jun 24, 2026

Personalizando extensiones de Chrome con Badges y Tooltips

En este post exploraremos cómo podemos modificar y personalizar la interfaz de usuario (UI) de Chrome utilizando las opciones de override que proporciona el navegador. Esta guía es especialmente útil para desarrolladores que quieren crear extensiones de Chrome más atractivas y funcionales.

Modificación de la página de nueva pestaña

Una de las funcionalidades más interesantes de Chrome es la capacidad de sobrescribir páginas específicas, como la página de nueva pestaña, el administrador de marcadores y el historial. Para empezar, vamos a centrarnos en cómo cambiar la página de nueva pestaña.

Sobrescribir la página de nueva pestaña: Chrome permite reemplazar la página de nueva pestaña mediante la opción chrome_url_overrides en el archivo manifest.json de tu extensión.

Para hacerlo, agrega la siguiente configuración en tu manifest.json:

{
  "chrome_url_overrides": {
    "newtab": "mypage.html"
  }
}

Crea un archivo mypage.html con el contenido que desees mostrar. Por ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>Mi Nueva Pestaña</title>
</head>
<body>
    <h1>Hola Mundo</h1>
</body>
</html>

Una vez configurado, cada vez que abras una nueva pestaña en Chrome se mostrará el contenido de mypage.html.

Personalización del historial y los marcadores

Además de la página de nueva pestaña, también puedes modificar las páginas de historial y marcadores de la misma manera. Solo tienes que ajustar la configuración en tu archivo manifest.json.

Para la página de historial:

{
  "chrome_url_overrides": {
    "history": "mypage.html"
  }
}

Para la página de marcadores:

{
  "chrome_url_overrides": {
    "bookmarks": "mypage.html"
  }
}

Uso del Action API

Chrome ofrece el Action API, que nos permite controlar el botón de la barra de herramientas de nuestra extensión y otras partes de la UI. Este API es muy útil para agregar interactividad y personalización.

Tooltips: puedes configurar un tooltip que se muestra cuando el usuario pasa el cursor sobre el ícono de tu extensión. La forma declarativa es usar la clave default_title, que debe ir anidada dentro de la clave "action" en tu manifest.json:

{
  "action": {
    "default_title": "Mi Asombrosa Extensión de Chrome"
  }
}

Si prefieres establecer el título de forma programática, por ejemplo para cambiarlo según el estado de la extensión, puedes usar el equivalente del API desde tu service worker:

chrome.action.setTitle({ title: 'Mi Asombrosa Extensión de Chrome' });

Badges: los badges son pequeños textos que se muestran sobre el ícono de la extensión, muy útiles para notificaciones. Se configuran de forma programática con el Action API:

chrome.action.setBadgeText({ text: '1' });
chrome.action.setBadgeBackgroundColor({ color: '#000000' });

Ejemplos de uso del Action API

Para ilustrar cómo utilizar el Action API, veamos algunos ejemplos prácticos.

Establecer texto en el badge:

chrome.action.setBadgeText({ text: 'Nuevo' });

Cambiar el color del badge:

chrome.action.setBadgeBackgroundColor({ color: '#FF0000' });

Y si combinamos ambas cosas dentro del service worker en segundo plano de Manifest V3, podemos dar la bienvenida al usuario cuando se instala la extensión, fijando el tooltip y un badge al mismo tiempo:

// background.js (service worker declarado en manifest.json como "background": { "service_worker": "background.js" })
chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setTitle({ title: 'Mi Asombrosa Extensión de Chrome' });
  chrome.action.setBadgeText({ text: 'Nuevo' });
  chrome.action.setBadgeBackgroundColor({ color: '#FF0000' });
});

Estos pequeños cambios pueden hacer que tu extensión sea más informativa y atractiva para los usuarios.

Explorando más APIs

Este post solo ha arañado la superficie de las capacidades de personalización de Chrome. En futuros posts exploraremos otros APIs disponibles, como el manejo de marcadores y los menús contextuales, que pueden llevar tus extensiones al siguiente nivel.

Ejercicios propuestos

  1. Crea una extensión que sobrescriba la página de nueva pestaña con tu propio mypage.html y muéstrale un mensaje de bienvenida al usuario.
  2. Desde el service worker en segundo plano, establece un tooltip con chrome.action.setTitle y un badge con chrome.action.setBadgeText cuando la extensión se instale.
  3. Cambia el color del badge según un estado de tu extensión (por ejemplo, rojo cuando hay notificaciones pendientes y verde cuando no las hay).

Resumen en 3 puntos

  1. Con chrome_url_overrides en manifest.json puedes sobrescribir la página de nueva pestaña, el historial y los marcadores.
  2. El tooltip se define de forma declarativa con default_title anidado bajo la clave "action", o de forma programática con chrome.action.setTitle.
  3. Los badges se controlan con chrome.action.setBadgeText y chrome.action.setBadgeBackgroundColor desde el service worker.

Espero que este post te haya sido útil para comprender cómo puedes empezar a personalizar la UI de Chrome. Si tienes alguna duda o necesitas más detalles, no dudes en dejar un comentario. La capacidad de personalizar la UI de Chrome mediante la sobrescritura de páginas y el Action API abre un mundo de posibilidades para los desarrolladores de extensiones. Imagina y crea. Hasta la próxima.

Sebastian Gomez

Sebastian Gomez

Creador de contenido principalmente acerca de tecnología.

Leave a Reply

0 Comments

Advertisements

Related Posts

Categorias