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

Anh Mac Software Engineer

Vào tháng 2 năm 2026, Chrome 145 đã ra mắt chế độ xem phân chia gốc. Chế độ này cho phép người dùng xem và quản lý các thẻ cạnh nhau trong cùng một cửa sổ, nhờ đó 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ổ riêng biệt của hệ điều hành. Mặc dù người dùng có thể thêm và xoá thẻ khỏi chế độ xem 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 các tiện ích Chrome.

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 phân chia 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 cạnh nhau dựa vào các giải pháp tạm thời không ổn định như đổ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 là một phần của màn hình chia đôi, thẻ này sẽ chia sẻ 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, windowId và groupId.

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ẻ.

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

Tiện ích có thể tạo màn hình chia đôi mới theo hai phương thức sau:

1. Tạo một thẻ mới sẽ tách với một thẻ hiện có bằng cách sử dụ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ột 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 bạn có quy trình làm việc hiệu quả hơn cho các tiện ích của mình. Để 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ó thắc mắc 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 sẻ thành công!