Chrome Extension 개발 - 기본구조

Chrome Extension

• Google Chrome Extension: 구글 크롬 브라우저를 수정하는 브라우저 확장 프로그램
• HTML, JavaScript 및 CSS 기반으로 작성됨
• 크롬 웹 스토어를 통해 다운로드 가능

 

Chrome Extension Architecture

• manifest
• Background Script
• UI Elements
• Content Script
• Options page

 

Manifest

• 확장 프로그램에 대한 정보들과 사용할 js, 접근할 url, 권한 설정 
• 확장프로그램의 기본적인 정보와 설정

 

Background Script

• extension에 필요한 Browser Event Listener 포함
• 이벤트가 발생할 때까지는 유휴 상태에서 로직 수행
• Background Script는 필요할 때만 로드
• manifest에서 background script로 동작할 js 파일 지정
• background.js

 

UI Elements

• 기본적으로 Chrome extension 버튼(아이콘)을 클릭하면 popup을 출력할 수 있는 형태로 구성
• 검색 주소창 사용 or 단추키 등의 UI를 포함할 수 있음
• Background Script는 popup과 통신하여 기능을 수행
• popup.js
• popup.html

 

Content Script

• 브라우저 내의 웹페이지를 제어하는 영역
• 브라우저에 로딩된 페이지의 context에서 실행될 수 있는 Javascript를 삽입할 수 있음
• 웹페이지의 DOM을 제어, 수정 및 쓰기 가능
• Storage API를 사용 -> 메세지를 교환, 값을 저장하여 상위의 extension과 통신 가능
• contentscript.js

 

Options page

• extension에 대한 설정 가능
• 이를 통해 settings 내에서 확장 프로그램에 대한 제어가 가능
• manifest에 옵션 페이지 등록해줘야 함

 

---

참고자료

• https://velog.io/@goban/%EA%B5%AC%EA%B8%80-%ED%99%95%EC%9E%A5%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8-%EA%B0%9C%EB%B0%9C-1-%EA%B8%B0%EB%B3%B8%EA%B5%AC%EC%A1%B0

구글 확장프로그램 개발 (1)-기본구조