Chrome과 Edge를 위한 실제 브라우저 확장 프로그램 빌드하기
브라우저 확장 프로그램을 통해 웹 페이지를 수정하고, 브라우저 동작을 자동화하며, 네트워크 요청을 가로채고, Chrome Web Store와 Edge Add-ons 마켓플레이스를 통해 사용자에게 직접 커스텀 도구를 배포할 수 있습니다. 이 트랙에서는 현재 필수 확장 프로그램 형식인 Manifest V3를 처음 manifest.json부터 크로스 브라우저 배포 및 프로덕션 보안까지 배웁니다. 모든 개념은 Chrome과 Edge가 실제로 제공하는 API를 기반으로 합니다.
학습 내용
Manifest V3가 권한, 서비스 워커, 컴포넌트 라이프사이클을 어떻게 구조화하는지 배웁니다. 그 후 팝업과 옵션 페이지로 실제 UI를 빌드하고, 페이지 DOM을 읽고 다시 쓰는 콘텐츠 스크립트를 주입하며, 컨텍스트 메뉴와 옴니박스 같은 브라우저 UI 표면을 활용합니다. 데이터 관점에서는 확장 프로그램 메시징, 스토리지 API, 그리고 광범위한 호스트 권한 없이 웹 요청을 수정하는 declarativeNetRequest를 마스터합니다. 또한 프로그래밍 방식 브라우저 제어, 디버깅 및 성능 프로파일링, 보안에 중점을 둔 고급 권한 모델도 다룹니다. 트랙은 크로스 브라우저 호환성 기법과 확장 프로그램 빌드 파이프라인에 최신 JavaScript 프레임워크를 통합하는 것으로 마무리됩니다.
학습 경로
12개의 코스가 A1부터 C1까지 걸쳐 있습니다. 첫 번째 코스는 무료이며 Manifest V3 기초를 소개합니다. A1–A2는 매니페스트 구조와 핵심 권한 모델을 확립합니다. B1 코스는 실용적인 기술을 구축합니다: UI 구성, 콘텐츠 스크립트 주입, 브라우저 UI 통합, 그리고 Chrome Web Store와 Edge 마켓플레이스에 게시. 4개의 B2 코스는 더 깊이 있게 다룹니다 — 메싱과 영속성, 선언적 네트워크 요청 수정, 브라우저 자동화, 성능 최적화를 통한 디버깅. 마지막 2개의 C1 코스는 고급 권한, 보안 강화, 최신 프레임워크 사용과 함께 진정한 크로스 브라우저 호환성 달성을 다룹니다.
학습 방식
각 코스는 실시간 피드백과 막힐 때 사용 가능한 AI 튜터와 함께 내장 에디터에서 완료하는 짧고 실습적인 레슨으로 나뉩니다. 매니페스트 파일, 백그라운드 서비스 워커, 콘텐츠 스크립트, 옵션 페이지 등 실제 확장 프로그램 코드를 작성하므로 모든 레슨이 Chrome이나 Edge에 직접 로드할 수 있는 작동하는 확장 프로그램을 생성합니다.