使用新的 Tabs Split View API 強化多工擴充功能

Anh Mac
Anh Mac

今年 2026 年 2 月，Chrome 145 推出了原生分割畫面，使用者可在同一個視窗中並排查看及管理分頁，不必再使用第三方工具管理不同的作業系統視窗。使用者可以透過瀏覽器控制項，手動在分割畫面中新增及移除分頁，但開發人員無法在 Chrome 擴充功能中，以程式輔助方式控制這些新的分頁版面配置。

Chrome 的分割畫面。
Chrome 的分割畫面功能可讓使用者並排管理分頁。

我們很高興宣布，Chrome 155 以上版本將推出全新的 Split View API！這項新 API 是與 Mozilla 和其他瀏覽器供應商在 WebExtensions 社群群組中密切合作開發而成，可讓擴充功能偵測、建立及管理內建分割畫面。

示範

運作方式

先前，擴充功能建構並排體驗時，會採用多種權宜做法，例如調整多個原生視窗的大小、將網頁嵌入 <iframe> 元素，或是使用側邊面板，但這些做法都不穩定。現在，新的 Split View API 會直接與 Chrome 的 Tabs API 整合，解鎖新的分頁版面配置管理功能。

資訊清單權限

Split View API 屬於 browser.tabs 命名空間，使用時不需要任何權限。

辨識分割畫面

每個 Tab 物件都包含 splitViewId 屬性。如果分頁屬於分割畫面，則會與配對分頁共用專屬 ID；否則 splitViewId 預設為 -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);

一般限制條件

如要讓兩個分頁加入分割畫面，必須符合下列規定：

  1. 分頁必須相鄰 (或建立相鄰分頁)。
  2. 分頁不得已處於分割畫面。
  3. 分頁必須處於相同的 pinned、windowId 和 groupId 狀態。

反之，取消分割兩個分頁時，分頁會保留相同的 pinned、windowId、groupId 狀態，以及彼此的相對位置。

建立分割畫面

擴充功能可透過兩種方法建立新的分割畫面：

  1. 使用 browser.tabs.create 中的新 splitWithTabId 參數，建立要與現有分頁分割的新分頁。
  2. 使用新的 browser.tabs.createSplit 方法配對兩個現有分頁。

範例

你可以使用 splitWithTabId 建立新分頁，並與現有分頁分割畫面。

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

根據預設，新分頁會建立在現有分頁的右側。

如要在現有分頁的左側建立新分頁，請將索引設為該分頁的索引：

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

你也可以配對兩個現有分頁，建立新的分割畫面。

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

取消分割檢視畫面

如要將分割畫面分成兩個獨立的分頁，擴充功能可以使用新的 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);

瞭解詳情

我們希望這項新功能可以為擴充功能帶來更有效率的工作流程。如要開始建構具備分割畫面功能的擴充功能，請參閱 Tabs API 說明文件。如有任何問題或需要 Split View API 相關協助，請造訪 Chromium 擴充功能 Google 群組。

祝你使用愉快！