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

Anh Mac
Anh Mac

今年 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 グループをご覧ください。

ぜひお試しください。