Sebastian Gomez

Jul 21, 2024

Updated: Jun 25, 2026

Explorando las Pestañas en Extensiones de Chrome

En este post vamos a profundizar en el uso de las pestañas en las extensiones de Chrome. Anteriormente, dentro de esta serie, vimos funciones básicas como chrome.runtime.onInstalled y chrome.tabs.create. Ahora nos enfocaremos en las diversas funcionalidades que la Chrome Tabs API nos ofrece y en cómo podemos utilizarlas para mejorar nuestras extensiones.

Nota sobre Manifest V3. Todos los ejemplos de este capítulo apuntan a Manifest V3, que es el estándar vigente para extensiones de Chrome (Manifest V2 ya llegó al final de su vida útil). Dos consecuencias prácticas que conviene tener presentes: el código de fondo ya no vive en una página de background persistente sino en un service worker, así que los listeners de eventos deben registrarse en el nivel superior de ese service worker (no dentro de una función que se ejecute más tarde); y desde Chrome 88 todos los métodos de chrome.tabs devuelven Promesas, por lo que podemos usar async/await, que es el estilo idiomático hoy. Puedes consultar la referencia oficial en developer.chrome.com/docs/extensions/reference/api/tabs.

Consultando Pestañas con Chrome Tabs API

La Chrome Tabs API permite realizar diversas operaciones como consultar, crear, actualizar y eliminar pestañas. Una de las funciones más utilizadas es chrome.tabs.query, que nos permite obtener información sobre las pestañas activas en la ventana actual.

Uso de `chrome.tabs.query`: esta función recibe un objeto queryInfo con los filtros de la consulta. En Manifest V3 lo idiomático es usar la versión que devuelve una Promesa y esperarla con await.

// Estilo moderno (MV3) con async/await
async function logActiveTab() {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  console.log(tab.id); // ID de la pestaña activa
}

logActiveTab();

Si trabajas con código heredado, es posible que veas la misma consulta escrita con un callback. Sigue funcionando, pero hoy preferimos async/await:

// Estilo heredado con callback (todavía válido)
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  console.log(tabs[0].id); // ID de la pestaña activa
});

Obteniendo información de la pestaña: puedes obtener diversa información de las pestañas, como el ID, el estado, la URL, el título y más.

async function logTabInfo() {
  const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
  console.log(`ID: ${activeTab.id}, URL: ${activeTab.url}`);
}

logTabInfo();

Importante: los datos sensibles requieren permisos. Propiedades como tab.url, tab.title y tab.favIconUrl solo estarán disponibles si tu extensión declara el permiso tabs o tiene host permissions que coincidan con la página. Sin esos permisos, esas propiedades llegan como undefined, aunque el resto del objeto (por ejemplo tab.id) sí esté presente. Recuerda declararlo en tu manifest.json, por ejemplo con "permissions": ["tabs"].

Eventos en Chrome Tabs API

La Chrome Tabs API proporciona varios eventos que nos permiten reaccionar a cambios en las pestañas. Recuerda registrar estos listeners en el nivel superior del service worker, para que sigan funcionando aunque el service worker se haya suspendido y vuelto a iniciar. A continuación vemos algunos de los eventos más comunes.

Evento `onCreated`: se activa cuando se crea una nueva pestaña.

chrome.tabs.onCreated.addListener((tab) => {
  console.log('Pestaña creada:', tab);
});

Evento `onUpdated`: se activa cuando se actualiza una pestaña, por ejemplo cuando cambia la URL o termina de cargar.

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  console.log('Pestaña actualizada:', tab);
});

Evento `onActivated`: se activa cuando una pestaña pasa a estar activa.

chrome.tabs.onActivated.addListener((activeInfo) => {
  console.log('Pestaña activada:', activeInfo.tabId);
});

Ejemplo de uso de eventos

Supongamos que queremos registrar cada vez que se crea o se actualiza una pestaña y mostrar esa información en la consola. Fíjate en que, dentro de onActivated, ahora usamos await chrome.tabs.get(...) en lugar de un callback anidado.

chrome.tabs.onCreated.addListener((tab) => {
  console.log('Pestaña creada:', tab);
});

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete') {
    console.log('Pestaña terminó de cargar:', tab);
  }
});

chrome.tabs.onActivated.addListener(async (activeInfo) => {
  const tab = await chrome.tabs.get(activeInfo.tabId);
  console.log('Pestaña activada:', tab);
});

Gestión de Pestañas

Además de consultar y escuchar eventos, también puedes realizar acciones como mover o cerrar pestañas.

Mover pestañas: utiliza chrome.tabs.move para cambiar la posición de una pestaña.

async function moveTab(tabId, newIndex) {
  const tab = await chrome.tabs.move(tabId, { index: newIndex });
  console.log('Pestaña movida:', tab);
}

Cerrar pestañas: utiliza chrome.tabs.remove para cerrar una o más pestañas.

async function closeTab(tabId) {
  await chrome.tabs.remove(tabId);
  console.log('Pestaña cerrada');
}

Conclusión

La Chrome Tabs API es una herramienta poderosa para desarrollar extensiones que interactúan de forma avanzada con las pestañas del navegador. Desde la consulta y la gestión de pestañas hasta la reacción a eventos específicos, esta API ofrece todo lo necesario para crear experiencias de usuario ricas y funcionales, y con Manifest V3 y las Promesas el código queda más limpio y fácil de leer.

Ejercicios propuestos

1. Crea una extensión mínima en Manifest V3 con un service worker y registra los listeners onCreated, onUpdated y onActivated en el nivel superior. Observa en la consola del service worker cómo se disparan.
2. Declara el permiso tabs en tu manifest.json y comprueba que ahora tab.url y tab.title ya no llegan como undefined. Luego quita el permiso y observa la diferencia.
3. Reescribe un ejemplo con callback al estilo async/await usando chrome.tabs.query, y añade manejo de errores con try/catch.

Resumen en 3 puntos

1. Estos ejemplos apuntan a Manifest V3: el código de fondo vive en un service worker y los listeners se registran en su nivel superior.
2. Desde Chrome 88 todos los métodos de chrome.tabs devuelven Promesas, así que el estilo idiomático es async/await, aunque la forma con callback sigue siendo válida.
3. Para leer tab.url, tab.title o tab.favIconUrl necesitas el permiso tabs o host permissions; de lo contrario esas propiedades llegan como undefined.

Espero que este post te haya ayudado a comprender mejor cómo trabajar con las pestañas en Chrome y te inspire a explorar las posibilidades que ofrecen las APIs del navegador para crear extensiones más dinámicas y útiles.

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 enlaces a las redes sociales aquí abajo. ¡Hasta la próxima!