시작하기
Chrome 확장 프로그램 개발에 오신 것을 환영합니다. 첫 번째 Chrome 확장 프로그램을 빌드하고 배포하는 데 필요한 모든 것을 살펴보세요.
개요
확장 프로그램이란 무엇인가요?
Chrome 확장 프로그램은 사용자 인터페이스를 맞춤설정하고 브라우저 이벤트를 관찰하고 웹을 수정하여 탐색 환경을 개선합니다. 확장 프로그램의 기능에 관한 예를 더 보려면 Chrome 웹 스토어를 방문하세요.
어떻게 구축되나요?
무엇을 할 수 있나요?
확장 프로그램 용어
Chrome 확장 프로그램은 다양한 역할을 수행하는 부분으로 구성됩니다.
매니페스트
확장 프로그램의 매니페스트는 특정 파일 이름(manifest.json)이 있어야 하는 유일한 필수 파일입니다. 또한 확장 프로그램의 루트 디렉터리에 있어야 합니다. 매니페스트는 중요한 메타데이터를 기록하고, 리소스를 정의하며, 권한을 선언하고, 백그라운드와 페이지에서 실행할 파일을 식별합니다.
서비스 워커
서비스 워커는 백그라운드에서 실행되며 북마크 삭제 또는 탭 닫기와 같은 브라우저 이벤트를 처리합니다. DOM에는 액세스할 수 없지만 이 사용 사례에서는 DOM을 오프스크린 문서와 결합할 수 있습니다.
콘텐츠 스크립트
콘텐츠 스크립트는 웹페이지 컨텍스트에서 자바스크립트를 실행합니다.
툴바 작업
사용자가 확장 프로그램 툴바 아이콘을 클릭할 때 코드를 실행하거나 Action API를 사용하여 팝업을 표시합니다.
측면 패널
브라우저의 측면 패널에 맞춤 UI를 표시합니다.
DeclarativeNetRequest
네트워크 요청을 가로채거나, 차단하거나, 수정합니다.
Chrome 웹 스토어에 게시
확장 프로그램을 직접 빌드하는 경우 시작하기 튜토리얼을 확인하세요. Chrome 웹 스토어에 게시하려면 먼저 몇 가지 사항을 알아야 합니다.
고품질 확장 프로그램 설계
지원할 기능을 선택할 때 확장 프로그램이 좁게 정의되고 이해하기 쉬운 단일 목적을 충족하는지 확인해야 합니다.
정책 숙지하기
Chrome 웹 스토어에 배포된 확장 프로그램은 개발자 프로그램 정책을 준수해야 합니다. 다음 정책을 살펴보고 확장 프로그램이 Chrome 웹 스토어에서 호스팅될 수 있도록 하세요.
모든 확장 프로그램 로직 포함
코드를 작성할 때는 모든 로직이 확장 프로그램 패키지에 포함되어야 합니다. 즉, 런타임 시 추가 JavaScript 코드를 다운로드할 수 없습니다. 확장 프로그램 보안 개선은 원격 호스팅 코드 실행의 대안을 제공합니다.
튜토리얼
다음 튜토리얼 중 하나를 선택하여 확장 프로그램 학습 여정을 시작하세요.
첫 번째 확장 프로그램
확장 프로그램 개발 워크플로에 익숙해질 수 있도록 첫 번째 Hello World 확장 프로그램을 만듭니다.
모든 페이지에서 스크립트 실행
지정된 사이트에 요소를 자동으로 추가하는 방법을 알아보세요.
활성 탭에 스크립트 삽입
툴바 아이콘을 클릭하여 현재 페이지의 스타일을 단순화하는 방법을 알아보세요.
탭 관리자 만들기
탭을 관리하는 팝업을 만드는 방법을 알아보세요.
서비스 워커로 이벤트 처리
확장 프로그램 서비스 워커를 만들고 디버그하는 방법을 알아봅니다.
확장 프로그램 디버그
디버깅 중에 로그 및 오류 메시지를 찾는 방법을 알아봅니다.