Meningkatkan kualitas ekstensi multitasking dengan Tabs Split View API baru

Anh Mac

Awal tahun ini pada Februari 2026, Chrome 145 memperkenalkan Tampilan Terpisah native yang memberi pengguna kemampuan untuk melihat dan mengelola tab secara berdampingan dalam jendela yang sama, sehingga tidak perlu lagi mengandalkan alat pihak ketiga untuk mengelola jendela OS yang terpisah. Meskipun pengguna dapat menambahkan dan menghapus tab secara manual dari tampilan terpisah melalui kontrol browser, developer tidak dapat mengontrol tata letak tab baru ini secara terprogram di ekstensi Chrome.

Dengan senang hati kami mengumumkan Split View API baru, yang tersedia mulai Chrome 155. Dikembangkan melalui kolaborasi erat dengan Mozilla dan vendor browser lainnya di WebExtensions Community Group, API baru ini memungkinkan ekstensi mendeteksi, membuat, dan mengelola tampilan terpisah bawaan.

Demo

Cara kerjanya

Sebelumnya, ekstensi yang membuat pengalaman berdampingan mengandalkan solusi sementara yang tidak stabil seperti mengubah ukuran beberapa jendela native, menyematkan halaman dalam elemen <iframe>, atau menggunakan panel samping. Sekarang, Split View API baru terintegrasi langsung dengan Tabs API Chrome untuk membuka kemampuan pengelolaan tata letak tab baru.

Izin manifes

Split View API adalah bagian dari namespace browser.tabs, dan tidak memerlukan izin apa pun untuk digunakan.

Mengidentifikasi tampilan terpisah

Setiap objek Tab berisi properti splitViewId. Jika tab adalah bagian dari tampilan terpisah, tab tersebut akan membagikan ID unik dengan tab yang dipasangkannya; jika tidak, splitViewId akan ditetapkan ke -1 secara default.

// 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);

Batasan umum

Agar dua tab dapat bergabung ke tampilan terpisah, tab tersebut harus memenuhi persyaratan berikut:

1. Tab harus (atau dibuat) berdekatan satu sama lain.
2. Tab tidak boleh sudah berada dalam tampilan terpisah.
3. Tab harus memiliki status pinned, windowId, dan groupId yang sama.

Sebaliknya, saat dua tab tidak dibagi, tab tersebut akan mempertahankan status pinned, windowId, groupId yang sama beserta pemosisian relatif satu sama lain.

Membuat tampilan terpisah

Ada dua metode yang dapat digunakan ekstensi untuk membuat tampilan terpisah baru:

1. Buat tab baru yang akan dibagi dengan tab yang ada menggunakan parameter splitWithTabId baru di browser.tabs.create.
2. Pasangkan dua tab yang ada dengan metode browser.tabs.createSplit baru.

Contoh

Anda dapat membuat tab baru menggunakan splitWithTabId untuk membagi tab yang ada.

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

Secara default, tab baru akan dibuat di sebelah kanan tab yang ada.

Untuk membuat tab baru di kiri tab yang ada, tetapkan indeks sebagai indeks tab tersebut:

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

Anda juga dapat membuat tampilan terpisah baru dengan menyandingkan dua tab yang ada.

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

Membatalkan pemisahan tampilan terpisah

Untuk memisahkan tampilan terpisah menjadi dua tab independen, ekstensi dapat menggunakan metode browser.tabs.unsplit baru.

const splitViewId = browser.tabs.createSplit([tab1.id, tab2.id]);
// Unsplitting the split view into two independent tabs
await browser.tabs.unsplit(splitViewId);

Pelajari lebih lanjut

Kami harap kemampuan baru ini akan meningkatkan produktivitas alur kerja untuk ekstensi Anda. Untuk mulai membuat ekstensi dengan kemampuan tampilan terpisah, lihat dokumentasi Tabs API. Jika ada pertanyaan atau memerlukan bantuan terkait Split View API, buka Grup Google ekstensi Chromium.

Selamat memisahkan!