개발자는 Chrome 109부터 chrome.offscreen API 및 매니페스트 권한을 사용하여 백그라운드 페이지에서 확장 프로그램 서비스 워커로 전환하는 기능을 대체할 수 있습니다. 이 권한을 요청하면 사용자 환경을 방해하는 새 창이나 탭을 눈에 띄지 않게 열 필요 없이 화면 밖 문서를 만들어 DOM API를 사용할 수 있습니다. 이제 chrome.offscreen API를 Chrome 확장 프로그램에서 사용할 수 있습니다.
Chromium에서 Manifest V3 확장 프로그램은 서비스 워커 기반이지만 서비스 워커는 전체 문서 기반 페이지 (백그라운드 및 이벤트 페이지 포함)와 동일한 API 및 메커니즘을 지원하지 않습니다. 또한 콘텐츠 스크립트를 사용하여 웹페이지의 DOM API에 액세스하면 페이지마다 다른 콘텐츠 보안 정책을 적용해야 합니다. 이 문제를 해결하기 위해 Manifest V3 확장 프로그램이 전용 API를 통해 런타임에 최소, 범위가 지정되며, 상대적으로 권한이 없는 오프스크린 문서를 열 수 있도록 허용함으로써 DOM 관련 기능과 API를 지원하는 오프스크린 문서를 도입합니다.
기능 정보
화면 밖 문서는 서비스 워커에서 지원되지 않는 사용 사례 (예: 오디오 재생)를 처리하도록 특별히 설계되었기 때문에 이 페이지의 전체 기간 및 부여되는 권한은 확장 프로그램 서비스 워커의 권한과는 별개입니다.
이 페이지에는 작업 실행을 중지하면 페이지가 해제된다는 점에서 Manifest V2의 이벤트 페이지와 유사한 전체 기간 메커니즘이 있습니다. 또한 사용자 에이전트에서 명시된 목적을 위해 전체 기간을 추가로 제한할 수 있습니다.
오프스크린 문서는 DOM API에만 액세스할 수 있는 API의 공백을 메우도록 설계되었습니다. 이 때문에 확장 프로그램 API를 이 컨텍스트에서 직접 노출할 필요가 없습니다. 확장 프로그램에서 '백그라운드 페이지 대체'로 사용할 가능성을 줄이기 위해 chrome.runtime 메시지 API만 화면 밖 문서에 노출됩니다. 개발자는 서비스 워커를 통해 화면 밖 문서를 클라이언트로서 클레임하여 웹 메시징을 사용할 수도 있습니다.
일부 사용 사례(특히 사이트 스크래핑)에서는 교차 출처 프레임에 대한 액세스가 필요하므로 이러한 문서에서 현재 확장 페이지와 동일한 규칙에 따라 교차 출처 프레임을 삽입할 수 있습니다. 오프스크린 문서에서는 확장 프로그램에 의해 지정된 콘텐츠 스크립트를 이러한 프레임에서 실행하여 필요한 콘텐츠를 일반 웹페이지에서와 마찬가지로 스크래핑할 수 있습니다.
이유 및 목적 필요
오프스크린 문서를 만들려면 명시된 이유와 추가 근거가 필요합니다. 이러한 이유는 API 참조 문서에 나열되어 있으며, 문서의 전체 기간을 다양한 방식으로 처리합니다. 예를 들어 오디오 재생용으로 열린 문서는 현재 클립보드 관리를 위해 연 문서와 다른 전체 기간에 적용된 규칙이 다릅니다. 사유에 화면 밖 문서의 목적에 관한 세부정보를 추가할 수도 있습니다. 이는 문서에 영향을 미치는 매개변수가 아니라 개발자가 작성한 문자열입니다. 개발자가 의견과 사용 사례를 공유하게 되므로 시간이 지남에 따라 API에 이유가 더 추가될 수 있습니다.
향후 계획
쉽게 구현할 수 있도록 이 API의 첫 번째 버전은 한 번에 확장 프로그램당, 프로필당 한 페이지만 지원합니다. 향후 버전에서는 이 문제를 완화하여 여러 페이지를 지원할 수 있습니다. 현재 확장 프로그램이 활성 시크릿 프로필과 함께 분할 모드로 실행되는 경우 일반 및 시크릿 프로필 모두에 화면 밖 문서가 하나씩 있을 수 있습니다. 또한 나중에 확장 프로그램 worker DOM 기능을 제공할 예정입니다. 오프스크린 API를 사용하는 함수를 서비스 워커의 주석 처리된 동등한 함수와 연결하여 확장 프로그램의 '미래 경쟁력을 확보'할 수 있습니다.
// Solution 1 - Service workers cannot directly interact with
// the system clipboard. To work around this, we'll create an offscreen
// document and pass the data we want to write to the clipboard.
async function addToClipboard(value) {
await chrome.offscreen.createDocument({
url: 'offscreen.html',
reasons: [chrome.offscreen.Reason.CLIPBOARD],
justification: 'Write text to the clipboard.',
});
}
// Solution 2 – Once extension service workers can use the Clipboard API,
// replace the offscreen document based implementation with something like this
async function addToClipboardV2(value) {
navigator.clipboard.writeText(value);
}
또한 DOM 기능과 API가 서비스 워커에 추가되면 서비스 워커의 현재 상태와 화면 밖 문서를 사용해야 하는 이유에 따라 문서를 만들어야 하는 이유 목록이 추가되거나 줄어듭니다.
결론
화면 밖 문서를 사용하면 현재 서비스 워커에서 수행할 수 없는 DOM 또는 창 상호작용 액세스를 요구하는 확장 프로그램을 사용할 수 있습니다. 또한 새로운 사용 사례를 추가하고 향후 해결되는 사용 사례를 제거할 수 있는 유연한 접근 방식을 제공합니다. 확장 프로그램은 특정 사용 사례에 제안된 오프스크린 문서 API를 사용해야 하며 확장 프로그램의 기본 백그라운드 컨텍스트는 매니페스트에 지정된 서비스 워커로 유지되어야 합니다. 화면 밖 문서는 API 액세스가 제한되어 있으므로 기본 확장 프로그램 로직을 저장하는 장소가 아니어야 합니다. 화면 밖 문서의 수명은 해당 문서를 생성한 서비스 워커와는 별개입니다. 확장 프로그램의 서비스 워커 전체 기간과 관련된 서비스 워커 전체 기간 고려사항과 사용 사례는 별도의 블로그 게시물에서 다룹니다. 화면 밖 문서를 사용해야 하는 이유는 기능과 API가 서비스 워커 자체에 추가됨에 따라 시간이 지남에 따라 달라집니다. 이러한 과정이 진행되는 동안 개발자 여러분의 의견을 기다리고 있습니다.