Melhorar as extensões multitarefa com a nova API Tabs Split View

Anh Mac
Anh Mac

Em fevereiro de 2026, o Chrome 145 lançou a visualização dividida nativa que permite aos usuários ver e gerenciar guias lado a lado na mesma janela, sem precisar usar ferramentas de terceiros para gerenciar janelas separadas do SO. Embora os usuários possam adicionar e remover manualmente guias de uma tela dividida usando os controles do navegador, não era possível para os desenvolvedores controlar programaticamente esses novos layouts de guias em extensões do Chrome.

Visualização dividida no Chrome.
Com a Tela dividida no Chrome, os usuários podem gerenciar guias lado a lado.

Temos uma novidade incrível: a nova API Split View, disponível a partir do Chrome 155. Desenvolvida em colaboração com a Mozilla e outros fornecedores de navegadores no WebExtensions Community Group, essa nova API permite que as extensões detectem, criem e gerenciem visualizações divididas integradas.

Demonstração

Como funciona

Antes, as extensões que criavam experiências lado a lado dependiam de soluções alternativas frágeis, como redimensionar várias janelas nativas, incorporar páginas em elementos <iframe> ou usar painéis laterais. Agora, a nova API Split View se integra diretamente à API Tabs do Chrome para desbloquear novos recursos de gerenciamento de layout de guias.

Permissões do manifesto

A API Split View faz parte do namespace browser.tabs e não requer permissões para ser usada.

Identificar visualizações divididas

Cada objeto Tab contém uma splitViewId propriedade. Se a guia fizer parte de uma visualização dividida, ela vai compartilhar um identificador exclusivo com a guia pareada. Caso contrário, o splitViewId será definido como -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);

Restrições gerais

Para que duas guias possam entrar em uma visualização dividida, elas precisam atender aos seguintes requisitos:

  1. As guias precisam estar (ou ser criadas) lado a lado.
  2. As guias não podem estar em uma visualização dividida.
  3. As guias precisam ter o mesmo estado pinned, windowId e groupId.

Por outro lado, quando duas guias não estão divididas, elas mantêm os mesmos estados pinned, windowId, groupId, além do posicionamento relativo entre si.

Como criar visualizações divididas

Há dois métodos para uma extensão criar uma nova visualização dividida:

  1. Crie uma nova guia que será dividida com uma guia atual usando o novo parâmetro splitWithTabId em browser.tabs.create.
  2. Pareie duas guias atuais com o novo método browser.tabs.createSplit.

Exemplos

Você pode criar uma nova guia usando splitWithTabId para dividir com uma guia aberta.

await browser.tabs.create({splitWithTabId: existingTab.id});

Por padrão, a nova guia será criada à direita da guia atual.

Para criar uma nova guia à esquerda da guia atual, defina o índice como o índice dessa guia:

  await browser.tabs.create({splitWithTabId: existingTab.id, index: existingTab.index});

Também é possível criar uma nova visualização dividida combinando duas guias abertas.

  await browser.tabs.createSplit([existingTab1.id, existingTab2.id]);

Desfazer a divisão de visualizações divididas

Para separar uma visualização dividida em duas guias independentes, uma extensão pode usar o novo 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);

Saiba mais

Esperamos que esse novo recurso impulsione fluxos de trabalho mais produtivos para suas extensões. Para começar a criar extensões com recursos de visualização dividida, confira a documentação da API Tabs. Se você tiver dúvidas ou precisar de ajuda com a API Split View, acesse o grupo do Google Extensões do Chromium.

Boa divisão!