All'inizio di quest'anno, a febbraio 2026, Chrome 145 ha introdotto la visualizzazione divisa nativa che consente agli utenti di visualizzare e gestire le schede affiancate nella stessa finestra, eliminando la necessità di utilizzare strumenti di terze parti per gestire finestre del sistema operativo separate. Sebbene gli utenti possano aggiungere e rimuovere manualmente le schede da una visualizzazione divisa tramite i controlli del browser, gli sviluppatori non potevano controllare a livello di programmazione questi nuovi layout delle schede nelle estensioni di Chrome.
Siamo felici di annunciare la nuova API Split View, disponibile a partire da Chrome 155. Sviluppata in stretta collaborazione con Mozilla e altri fornitori di browser nel gruppo della community WebExtensions, questa nuova API consente alle estensioni di rilevare, creare e gestire le visualizzazioni suddivise integrate.
Demo
Come funziona
In precedenza, le estensioni che creavano esperienze affiancate si basavano su soluzioni alternative fragili
come il ridimensionamento di più finestre native, l'incorporamento di pagine in elementi <iframe>
o l'utilizzo di riquadri laterali. Ora, la nuova API Split View si integra direttamente
con l'API
Tabs di Chrome per sbloccare
nuove funzionalità di gestione del layout delle schede.
Autorizzazioni manifest
L'API Split View fa parte dello spazio dei nomi browser.tabs e non richiede autorizzazioni per l'utilizzo.
Identificare le visualizzazioni divise
Ogni oggetto Tab contiene una
proprietà splitViewId.
Se la scheda fa parte di una visualizzazione divisa, condivide un identificatore univoco con la scheda
accoppiata; in caso contrario, splitViewId è impostato su -1 per impostazione predefinita.
// 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);
Vincoli generali
Affinché due schede possano essere unite in una visualizzazione divisa, devono soddisfare i seguenti requisiti:
- Le schede devono essere adiacenti (o create) tra loro.
- Le schede non devono essere già in una visualizzazione divisa.
- Le schede devono avere lo stesso stato
pinned,windowIdegroupId.
Al contrario, quando due schede vengono unite, mantengono gli stessi stati pinned,
windowId, groupId e il posizionamento relativo l'una rispetto all'altra.
Creazione di visualizzazioni divise
Esistono due metodi con cui un'estensione può creare una nuova visualizzazione divisa:
- Crea una nuova scheda che verrà divisa con una scheda esistente utilizzando il nuovo
parametro
splitWithTabIdinbrowser.tabs.create. - Accoppia due schede esistenti con il nuovo metodo
browser.tabs.createSplit.
Esempi
Puoi creare una nuova scheda utilizzando splitWithTabId per dividerla con una scheda esistente.
await browser.tabs.create({splitWithTabId: existingTab.id});
Per impostazione predefinita, la nuova scheda verrà creata a destra della scheda esistente.
Per creare una nuova scheda a sinistra della scheda esistente, imposta l'indice come indice di quella scheda:
await browser.tabs.create({splitWithTabId: existingTab.id, index: existingTab.index});
Puoi anche creare una nuova visualizzazione divisa accoppiando due schede esistenti.
await browser.tabs.createSplit([existingTab1.id, existingTab2.id]);
Annullare la divisione delle visualizzazioni divise
Per separare una visualizzazione divisa in due schede indipendenti, un'estensione può utilizzare il
nuovo metodo 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);
Scopri di più
Ci auguriamo che questa nuova funzionalità possa rendere più produttivi i workflow delle tue estensioni. Per iniziare a creare estensioni con funzionalità di visualizzazione divisa, consulta la documentazione dell'API Tabs. Se hai domande o hai bisogno di aiuto con l'API Split View, visita il gruppo Google delle estensioni di Chromium.
Buona divisione!