시작하기 섹션을 읽은 후 이 가이드를 통해 확장 프로그램 구성요소, Manifest V3에서의 기능, 결합 방법을 알아보세요. 먼저 확장 프로그램이 할 수 있는 작업을 숙지하세요. 그런 다음 확장 프로그램 핵심 개념 섹션을 통해 이러한 기능을 결합하는 방법을 알아보세요.

사용자 인터페이스 디자인

대부분의 확장 프로그램이 작동하려면 일종의 사용자 상호작용이 필요합니다. 확장 프로그램 플랫폼은 확장 프로그램에 상호작용을 추가하는 다양한 방법을 제공합니다. 이러한 메서드에는 Chrome 툴바, 측면 패널, 컨텍스트 메뉴 등에서 실행된 팝업이 포함됩니다.
chrome.sidePanel API를 사용하여 브라우저의 측면 패널에 웹페이지의 기본 콘텐츠와 함께 콘텐츠를 호스팅합니다.
툴바에서 확장 프로그램 아이콘의 표시를 관리합니다.
Google 크롬의 컨텍스트 메뉴에 항목을 추가합니다.

브라우저 제어

Chrome의 확장 프로그램 API를 사용하면 브라우저의 작동 방식을 변경할 수 있습니다.
설정 재정의는 확장 프로그램이 선택된 Chrome 설정을 재정의하는 방법입니다. 또한 확장 프로그램은 HTML 페이지 재정의를 사용하여 Chrome에서 일반적으로 제공하는 페이지를 대체할 수 있습니다. 확장 프로그램은 북마크 관리자, 기록 탭 또는 새 탭을 재정의할 수 있습니다.
DevTools 확장 프로그램은 확장 프로그램에 추가된 DevTools 페이지를 통해 DevTools 전용 확장 프로그램 API에 액세스하여 Chrome DevTools에 기능을 추가합니다. chrome.debugger API를 사용하여 Chrome의 원격 디버깅 프로토콜을 호출할 수도 있습니다. 하나 이상의 탭에 연결하여 네트워크 상호작용을 계측하고 자바스크립트를 디버그하고 DOM을 변경하는 등의 작업을 수행할 수 있습니다.
chrome.notifications API를 사용하면 템플릿을 사용하여 알림을 만들고 사용자의 작업 표시줄에 이러한 알림을 표시할 수 있습니다.
브라우저의 방문 페이지 기록과 상호작용하려면 chrome.history API를 사용하고 기타 인터넷 사용 기록을 관리하려면 chrome.browsingData API를 사용합니다. chrome.topSites를 사용하여 가장 많이 방문한 사이트에 액세스합니다.
chrome.tabs, chrome.tabGroups, chrome.windows과 같은 API를 사용하여 사용자의 브라우저를 만들고 수정하고 정렬합니다.
chrome.commands API를 사용하여 확장 프로그램에서 작업을 트리거하는 단축키를 추가합니다. 예를 들어 바로가기를 추가하여 브라우저 작업을 열거나 확장 프로그램에 명령어를 전송할 수 있습니다.
chrome.identity API를 사용하여 OAuth 2.0 액세스 토큰을 가져옵니다.
chrome.management API는 설치되어 실행 중인 확장 프로그램의 목록을 관리하는 방법을 제공합니다. 내장된 새 탭 페이지를 재정의하는 확장 프로그램에 특히 유용합니다.
chrome.omnibox API를 사용하면 Chrome의 검색주소창 (주소 표시줄)에 키워드를 등록할 수 있습니다.
chrome.privacy API를 사용하여 사용자 개인 정보 보호에 영향을 미칠 수 있는 Chrome 기능의 사용을 관리합니다. Chrome의 프록시 설정을 관리하려면 chrome.proxy API도 참고하세요.
chrome.downloads API를 사용하여 프로그래매틱 방식으로 다운로드를 시작, 모니터링, 조작, 검색합니다.
chrome.bookmarks API 및 chrome.readingList API를 사용하여 이러한 목록을 만들고 구성하고 조작합니다.

웹 제어하기

웹페이지의 콘텐츠와 동작을 동적으로 변경합니다. 스크립트를 삽입하고 네트워크 요청을 가로채고 웹 API를 사용하여 웹페이지와 상호작용하여 웹을 제어하고 수정할 수 있습니다.
콘텐츠 스크립트는 웹페이지 내에서 실행되는 파일입니다. 표준 DOM (Document Object Model)을 사용하여 브라우저에서 방문하는 웹페이지의 세부정보를 읽고, 변경하고, 정보를 상위 확장 프로그램에 전달합니다.
"activeTab" 권한은 사용자가 확장 프로그램을 호출할 때(예: 작업 클릭) 확장 프로그램에 현재 활성 탭에 대한 임시 액세스 권한을 부여합니다. 탭에 대한 액세스는 사용자가 해당 페이지에 있는 동안 지속되고 사용자가 다른 페이지로 이동하거나 탭을 닫으면 취소됩니다.
chrome.declarativeNetRequest, chrome.webRequest, chrome.webNavigation API를 사용하여 네트워크 요청을 관찰, 차단, 수정합니다.
chrome.tabCapture 또는 getDisplayMedia()와 같은 웹 플랫폼 API를 사용하여 탭, 창, 화면에서 오디오 및 동영상을 녹음하는 다양한 접근 방식을 알아보세요.
chrome.contentSettings API를 사용하여 웹사이트에서 쿠키, 자바스크립트, 플러그인과 같은 기능을 사용할 수 있는지 여부를 관리합니다. 좀 더 일반적으로 말하면, 콘텐츠 설정을 사용하면 Chrome의 동작을 전체가 아닌 사이트별로 맞춤설정할 수 있습니다.

핵심 개념

웹 플랫폼 및 확장 프로그램 API를 사용하면 다양한 UI 구성요소와 확장 플랫폼 기능을 결합하여 더 복잡한 기능을 빌드할 수 있습니다.
확장 프로그램 서비스 워커 (service-worker.js)는 브라우저가 백그라운드에서 실행되는 이벤트 기반 스크립트입니다. 주로 데이터를 처리하고 확장 프로그램의 여러 부분에서 작업을 조정하며 확장 프로그램의 이벤트 관리자로도 사용됩니다.
권한의 작동 방식 및 권한이 필요하지 않을 때 요청하지 않아야 하는 경우 권한을 이해합니다.
콘텐츠 스크립트 또는 다른 확장 프로그램 페이지는 확장 프로그램 서비스 워커로부터 정보를 보내거나 받아야 하는 경우가 많습니다. 이러한 경우 한쪽은 상대방에서 보낸 메시지를 수신하고 같은 채널에서 응답할 수 있습니다.
확장 프로그램이 기본 애플리케이션과 메시지를 교환하도록 사용 설정합니다.
Manifest V3 확장 프로그램은 사용 중인 모든 코드를 확장 프로그램 자체에서 번들로 묶어야 합니다. 이를 위한 다양한 전략이 있습니다.
Chrome 확장 프로그램에는 모든 확장 프로그램 구성요소에서 사용할 수 있는 특수 Storage API가 있습니다. 여기에는 특정 사용 사례를 위한 4개의 별도 저장소 영역과 데이터가 업데이트될 때마다 추적하는 이벤트 리스너가 포함되어 있습니다.
서비스 워커에는 DOM 액세스 권한이 없습니다. Offscreen API를 사용하면 확장 프로그램이 새 창이나 탭을 열어 사용자 환경을 방해하지 않으면서 숨겨진 문서에서 DOM API를 사용할 수 있습니다.
교차 출처 격리를 사용하면 웹페이지에서 SharedArrayBuffer와 같은 강력한 기능을 사용할 수 있습니다. 확장 프로그램은 "cross_origin_embedder_policy""cross_origin_opener_policy" 매니페스트 키에 적절한 값을 지정하여 교차 출처 분리를 선택할 수 있습니다.