A principios de este año, en febrero de 2026, Chrome 145 introdujo la Vista dividida nativa, que les brinda a los usuarios la capacidad de ver y administrar pestañas una al lado de la otra en la misma ventana, lo que elimina la necesidad de depender de herramientas de terceros para administrar ventanas separadas del SO. Si bien los usuarios pueden agregar y quitar pestañas manualmente de una vista dividida a través de los controles del navegador, los desarrolladores no podían controlar de forma programática estos nuevos diseños de pestañas en las extensiones de Chrome.
Nos complace anunciar la nueva API de Split View, disponible a partir de Chrome 155. Esta nueva API, desarrollada en estrecha colaboración con Mozilla y otros proveedores de navegadores en el grupo de la comunidad de WebExtensions, permite que las extensiones detecten, creen y administren vistas divididas integradas.
Demostración
Cómo funciona
Anteriormente, las extensiones que creaban experiencias en paralelo dependían de soluciones alternativas frágiles, como cambiar el tamaño de varias ventanas nativas, incorporar páginas en elementos <iframe> o usar paneles laterales. Ahora, la nueva API de Split View se integra directamente con la API de Tabs de Chrome para desbloquear nuevas capacidades de administración del diseño de pestañas.
Permisos del manifiesto
La API de Split View forma parte del espacio de nombres browser.tabs y no requiere permisos para usarse.
Cómo identificar las vistas divididas
Cada objeto Tab contiene una propiedad splitViewId.
Si la pestaña forma parte de una vista dividida, comparte un identificador único con su pestaña vinculada; de lo contrario, splitViewId se establece de forma predeterminada en -1.
// Querying all split views in the current windows
const tabs = await browser.tabs.query({ currentWindow: true });
const splitViews = tabs.map(tab => tab.splitViewId).filter(splitViewId => splitViewId !== -1);
Restricciones generales
Para que dos pestañas puedan unirse a una vista dividida, deben cumplir con los siguientes requisitos:
- Las pestañas deben estar (o crearse) adyacentes entre sí.
- Las pestañas no deben estar ya en una vista dividida.
- Las pestañas deben tener el mismo estado de
pinned,windowIdygroupId.
Por el contrario, cuando se descombinan dos pestañas, conservarán los mismos estados de pinned, windowId y groupId, junto con el posicionamiento relativo entre sí.
Cómo crear vistas divididas
Existen dos métodos por los que una extensión puede crear una nueva vista dividida:
- Crea una pestaña nueva que se dividirá con una existente usando el nuevo parámetro
splitWithTabIdenbrowser.tabs.create. - Vincula dos pestañas existentes con el nuevo método
browser.tabs.createSplit.
Ejemplos
Puedes crear una pestaña nueva con splitWithTabId para dividirla con una pestaña existente.
await browser.tabs.create({splitWithTabId: existingTab.id});
De forma predeterminada, la pestaña nueva se creará a la derecha de la pestaña existente.
Para crear una pestaña nueva a la izquierda de la pestaña existente, establece el índice como el índice de esa pestaña:
await browser.tabs.create({splitWithTabId: existingTab.id, index: existingTab.index});
También puedes crear una nueva vista dividida vinculando dos pestañas existentes.
await browser.tabs.createSplit([existingTab1.id, existingTab2.id]);
Cómo dejar de dividir vistas divididas
Para separar una vista dividida en dos pestañas independientes, una extensión puede usar el nuevo método browser.tabs.unsplit.
const splitViewId = browser.tabs.createSplit([tab1.id, tab2.id]);
// Unsplitting the split view into two independent tabs
await browser.tabs.unsplit(splitViewId);
Más información
Esperamos que esta nueva función potencie los flujos de trabajo más productivos para tus extensiones. Para comenzar a crear extensiones con capacidades de vista dividida, consulta la documentación de la API de Tabs. Si tienes alguna pregunta o necesitas ayuda con la API de Split View, visita el grupo de Google de extensiones de Chromium.
¡Disfruta de la división!