크롬 분할 화면, 확장 프로그램에서 두 탭을 직접 묶는 법

세 줄 요약

Chrome 155의 Tabs API로 기존 두 탭을 묶거나 새 탭을 기존 탭 옆에 열 수 있다.
같은 창에 있어도 그룹·고정 상태가 다르거나 서로 떨어진 탭은 그대로 묶을 수 없다.
분할 제어 자체에는 추가 권한이 없지만, 탭 URL을 읽거나 페이지에 접근하는 권한은 따로 판단해야 한다.

확장이 별도 창을 만들지 않고 두 탭을 나란히 놓는다

자료 비교나 링크 미리보기 확장을 만들 때 브라우저 창 두 개의 크기를 직접 조절하던 방식에 새 선택지가 생겼다. Chrome 155의 Split View API는 브라우저가 제공하는 분할 화면을 확장에서 만들고 해제하게 한다.

사용자가 메뉴로 여는 분할 화면은 Chrome 145부터 제공됐다. 이번 변화는 그 레이아웃을 확장 코드가 제어할 수 있다는 점이다. 기본 분할 기능을 쓰기 위해 확장을 설치해야 한다는 뜻은 아니다. 크롬 도움말의 분할 보기는 한 창 안에서 두 사이트를 표시하는 기능이다.

이미 열린 두 탭과 새로 여는 탭은 호출이 다르다

기존 두 탭을 묶을 때는 chrome.tabs.createSplit에 탭 ID 두 개를 넘긴다. 아래는 사용자가 선택한 유효한 두 ID를 이미 확보한 상황의 부분 코드다. 반환값은 Promise이므로 await로 분할 화면 ID를 받는다.

const splitViewId = await chrome.tabs.createSplit([
  firstTabId,
  secondTabId
]);

기존 탭에 새 탭을 붙이려면 tabs.create의 splitWithTabId를 쓴다. 기본 위치는 기존 탭의 오른쪽이며, URL을 생략하면 새 탭 페이지가 열린다.

await chrome.tabs.create({
  splitWithTabId: existingTabId
});

이 호출은 확장의 서비스 워커나 확장 페이지에서 사용한다. 일반 웹페이지 안에 주입한 content script에서 Tabs API를 직접 호출하는 구조는 지원되지 않는다.

같은 창에 있다는 것만으로는 충분하지 않다

두 탭을 고르기만 하면 어떤 조합이든 분할되는 것은 아니다. Chrome은 다음 조건을 요구한다.

확인 항목	필요한 상태
탭 순서	서로 바로 이웃해야 한다.
기존 분할	둘 다 다른 분할 화면에 속해 있지 않아야 한다.
`windowId`	같은 창이어야 한다.
`groupId`	그룹 상태가 같아야 한다.
`pinned`	고정 여부가 같아야 한다.

예를 들어 왼쪽 탭만 고정돼 있거나 두 탭 사이에 다른 탭이 끼어 있다면 이 조건을 충족하지 않는다. 확장의 탭 선택 화면에서 조건을 알려 주면 사용자는 어떤 조합을 만들 수 있는지 이해할 수 있다. 기존 탭의 배치를 바꾸는 기능을 넣는다면 그 변경도 사용자 흐름에 드러내는 편이 적절하다.

화면을 나누는 권한과 내용을 읽는 권한은 다르다

Split View 제어 자체에는 추가 권한이 필요하지 않다. 그러나 확장이 탭의 URL·제목을 읽어 선택 목록을 만들거나 웹페이지에 스크립트를 넣는다면 그 작업의 접근 권한을 따로 검토해야 한다. 화면 배치 기능이 페이지 내용까지 읽을 권한을 주지는 않는다.

activeTab은 사용자의 동작을 계기로 현재 탭에 임시 호스트 권한을 주는 방식이다. 모든 탭의 정보를 상시 읽는 기능과 같은 범위로 생각해서는 안 된다.

분할을 풀 때는 탭 ID가 아니라 앞서 얻은 분할 화면 ID를 넘긴다. 다음 코드는 만들기 직후가 아니라 사용자가 분할 해제를 선택한 시점에 실행할 동작이다.

await chrome.tabs.unsplit(splitViewId);

분할 해제는 두 탭을 일반 탭으로 돌려놓는다. 비교가 끝났다고 페이지를 닫을 필요는 없다. 확장 개발자는 두 탭을 묶는 동작, 조건을 충족하지 못했을 때의 안내, 다시 분리하는 동작을 한 흐름으로 설계할 수 있다.