新しい Tabs Split View API でマルチタスク拡張機能を強化する

Anh Mac
Anh Mac Software Engineer

今年 2026 年 2 月に Chrome 145 で導入されたネイティブの分割ビューでは、同じウィンドウ内でタブを並べて表示して管理できるため、個別の OS ウィンドウを管理するためにサードパーティ製ツールを使用する必要がなくなります。ユーザーはブラウザのコントロールを使用して分割ビューのタブを手動で追加、削除できますが、デベロッパーが Chrome 拡張機能でこれらの新しいタブのレイアウトをプログラムで制御することはできませんでした。

Chrome の分割ビュー。
Chrome の分割ビューでは、タブを並べて管理できます。

Chrome 155 から利用可能になる新しい分割ビュー API をご紹介します。Mozilla や WebExtensions Community Group の他のブラウザ ベンダーと緊密に連携して開発されたこの新しい API により、拡張機能は組み込みの分割ビューを検出、作成、管理できます。

デモ

仕組み

これまで、拡張機能で並列エクスペリエンスを構築するには、複数のネイティブ ウィンドウのサイズ変更、<iframe> 要素へのページの埋め込み、サイドパネルの使用など、脆弱な回避策に頼っていました。新しい分割ビュー API は、Chrome の Tabs API と直接統合され、新しいタブ レイアウト管理機能が利用できるようになりました。

マニフェストの権限

分割ビュー API は browser.tabs 名前空間の一部であり、使用するのに権限は必要ありません。

分割ビューを特定する

すべての Tab オブジェクトには splitViewId プロパティが含まれています。タブが分割ビューの一部である場合、タブはペアのタブと固有の識別子を共有します。それ以外の場合、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);

一般的な制約

2 つのタブを分割ビューに結合するには、次の要件を満たしている必要があります。

  1. タブは隣接している（または隣接して作成されている）必要があります。
  2. タブがすでに分割ビューになっていないこと。
  3. タブは同じ pinned、windowId、groupId の状態である必要があります。

逆に、2 つのタブを分割解除すると、同じ pinned、windowId、groupId の状態と、互いの相対的な位置が保持されます。

分割ビューを作成する

拡張機能が新しい分割ビューを作成する方法は 2 つあります。

  1. browser.tabs.create の新しい splitWithTabId パラメータを使用して、既存のタブと分割する新しいタブを作成します。
  2. 新しい browser.tabs.createSplit メソッドを使用して、既存の 2 つのタブをペア設定します。

例

splitWithTabId を使用して新しいタブを作成し、既存のタブと分割できます。

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

デフォルトでは、新しいタブは既存のタブの右側に作成されます。

既存のタブの左側に新しいタブを作成するには、インデックスをそのタブのインデックスとして設定します。

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

既存の 2 つのタブをペア設定して、新しい分割ビューを作成することもできます。

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

分割ビューの分割を解除する

分割ビューを 2 つの独立したタブに分離するために、拡張機能は新しい 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 グループをご覧ください。

ぜひお試しください。