今年 2 月，Chrome 145 推出了原生分屏视图，让用户能够在同一窗口中并排查看和管理标签页，无需再依赖第三方工具来管理单独的操作系统窗口。虽然用户可以通过浏览器控件手动向分屏视图添加标签页和从中移除标签页，但开发者无法在 Chrome 扩展程序中以编程方式控制这些新的标签页布局。
我们很高兴地宣布，新版分屏视图 API 已推出，从 Chrome 155 开始提供！此新 API 是在 WebExtensions 社区组中与 Mozilla 和其他浏览器供应商密切合作开发的，可让扩展程序检测、创建和管理内置的分屏视图。
演示
运作方式
以前，构建并排体验的扩展程序依赖于脆弱的解决方法，例如调整多个原生窗口的大小、将网页嵌入 <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);
一般限制条件
两个标签页必须满足以下要求，才能加入拆分视图：
- 标签页必须彼此相邻（或创建为彼此相邻）。
- 标签页不得已处于拆分视图中。
- 标签页必须具有相同的
pinned、windowId和groupId状态。
相反，当两个标签页取消拆分时，它们将保留相同的 pinned、windowId、groupId 状态以及彼此之间的相对位置。
创建拆分视图
扩展程序可以通过以下两种方法创建新的拆分视图：
- 使用
browser.tabs.create中的新splitWithTabId参数创建一个新标签页，该标签页将与现有标签页拆分。 - 使用新的
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 文档。如果您对分屏视图 API 有任何疑问或需要相关帮助，请访问 Chromium 扩展程序 Google 群组。
祝您分账顺利！