Nâng cao các tiện ích đa nhiệm bằng Tabs Split View API mới

Anh Mac
Anh Mac

Đầu năm nay, vào tháng 2 năm 2026, Chrome 145 đã ra mắt chế độ xem tách đôi gốc. Chế độ này cho phép người dùng xem và quản lý các thẻ song song trong cùng một cửa sổ, giúp người dùng không cần phải dựa vào các công cụ của bên thứ ba để quản lý các cửa sổ hệ điều hành riêng biệt. Mặc dù người dùng có thể thêm và xoá thẻ khỏi chế độ xem chia tách theo cách thủ công thông qua các chế độ kiểm soát của trình duyệt, nhưng nhà phát triển không thể kiểm soát theo chương trình bố cục thẻ mới này trong tiện ích Chrome.

Màn hình chia đôi trong Chrome.
Chế độ xem chia đôi trong Chrome cho phép người dùng quản lý các thẻ song song.

Chúng tôi rất vui mừng thông báo về Split View API mới, có sẵn từ Chrome 155! Được phát triển trong sự hợp tác chặt chẽ với Mozilla và các nhà cung cấp trình duyệt khác trong Nhóm cộng đồng WebExtensions, API mới này cho phép các tiện ích phát hiện, tạo và quản lý chế độ xem chia tách tích hợp.

Bản minh hoạ

Cách hoạt động

Trước đây, các tiện ích tạo trải nghiệm song song dựa vào các giải pháp tạm thời không ổn định như thay đổi kích thước nhiều cửa sổ gốc, nhúng các trang vào các phần tử <iframe> hoặc sử dụng các bảng điều khiển bên. Giờ đây, Split View API mới tích hợp trực tiếp với Tabs API của Chrome để mở khoá các chức năng quản lý bố cục thẻ mới.

Quyền trong tệp kê khai

Split View API là một phần của không gian tên browser.tabs và không yêu cầu bất kỳ quyền nào để sử dụng.

Xác định chế độ xem chia đôi

Mỗi đối tượng Tab đều chứa một thuộc tính splitViewId. Nếu thẻ là một phần của màn hình chia đôi, thì thẻ đó sẽ dùng chung một giá trị nhận dạng riêng biệt với thẻ được ghép nối; nếu không, splitViewId sẽ mặc định là -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);

Hạn chế chung

Để có thể kết hợp thành chế độ xem chia đôi, hai thẻ phải đáp ứng các yêu cầu sau:

  1. Các thẻ phải nằm cạnh nhau (hoặc được tạo cạnh nhau).
  2. Các thẻ không được ở chế độ màn hình chia đôi.
  3. Các thẻ phải có cùng trạng thái pinned, windowIdgroupId.

Ngược lại, khi hai thẻ được hợp nhất, chúng sẽ giữ nguyên trạng thái pinned, windowId, groupId cùng với vị trí tương đối của mỗi thẻ với nhau.

Tạo chế độ xem chia đôi

Tiện ích có thể tạo chế độ xem phân tách mới bằng 2 phương thức:

  1. Tạo một thẻ mới sẽ tách với một thẻ hiện có bằng tham số splitWithTabId mới trong browser.tabs.create.
  2. Ghép nối hai thẻ hiện có bằng phương thức browser.tabs.createSplit mới.

Ví dụ

Bạn có thể tạo một thẻ mới bằng cách dùng biểu tượng splitWithTabId để chia đôi với một thẻ hiện có.

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

Theo mặc định, thẻ mới sẽ được tạo ở bên phải thẻ hiện có.

Để tạo một thẻ mới ở bên trái thẻ hiện có, hãy đặt chỉ mục làm chỉ mục của thẻ đó:

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

Bạn cũng có thể tạo màn hình chia đôi mới bằng cách ghép hai thẻ hiện có.

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

Huỷ chia đôi màn hình

Để tách màn hình chia đôi thành hai thẻ độc lập, tiện ích có thể dùng phương thức browser.tabs.unsplit mới.

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

Tìm hiểu thêm

Chúng tôi hy vọng khả năng mới này sẽ giúp các tiện ích của bạn có quy trình làm việc hiệu quả hơn. Để bắt đầu tạo tiện ích có khả năng chia đôi màn hình, hãy xem tài liệu về Tabs API. Nếu bạn có câu hỏi hoặc cần được trợ giúp về Split View API, hãy truy cập vào Nhóm Google Tiện ích Chromium.

Chúc bạn chia tách video thành công!