chrome extension 어플리케이션 구조

chrome extension 어플리케이션은 크게 5가지 영역으로 구분된다.

 

• manifest.json

  • 익스텐션 앱에 대한 정보를 나열해 놓은 json

  • 앱 소개, 버전 및 개발자 정보와 앱 개발 시 필요한 필수로 명시해야 하는 값 등이 기록되어 있다.

 

 

• background

  • 익스텐션 앱의 백그라운드 스크립트 처리 영역

  • manifest.json 의 background 항목에 스크립트 파일을 명시해줘야 한다.

  • 크롬 브라우저가 정상 실행되고 익스텐션 앱이 활성화 되어있다면 등록한 스크립트가 실행된다. 

  • background 스크립트의 디버깅은 ‘크롬브라우저 > 도구더보기 > 확장프로그램 > 해당 앱 백그라운드 활성화’ 에서 가능하다.

 

 

• ui

  • 익스텐션 앱의 ui 를 구성

  • ui element 를 구성하는 html 과, ui element 의 이벤트 핸들러가 선언 된 스크립트로 구성된다. (웹 페이지 컨텐츠 영역이랑 혼동하지 말자)

  • manifest.json 의 declarativeContent 항목에 html 파일을 명시한 뒤, background 스크립트에서 선택적으로 html 이 동작하도록 할 수 있다. 

ui 스크립트(popup) 와 background 스크립트 관계

 

 

 

• content

  • 웹 페이지 컨텐츠 영역에서 실행되는 스크립트 

  • 해당 페이지의 컨텐츠 요소를 읽거나 수정이 가능하다.

  • content 스크립트 사용을 위해 manifest.json activeTab 퍼미션이 필요하다.

  • 디버깅은 웹 페이지 컨텐츠 영역에서 스크립트가 실행되므로 '크롬 개발자도구 - Console’ 에서 가능하다.

  • content 스크립트에서 익스텐션 storage API 를 통해 background 스크립트 혹은 ui 스크립트와 데이터 송수신이 가능하다.

     

    

    content 스크립트 영역

    

    storage API 를 이용한 content 스크립트와 다른 스크립트 간의 데이터 송수신 구조

 

 

• option

  • 해당 익스텐션 앱에 사용되는 기능에 대한 설정이 가능한 스크립트 

 

 

 

참고: https://developer.chrome.com/extensions/overview

저작자표시비영리동일조건

'프론트엔드' 카테고리의 다른 글

DOM(DOM API), Browser API  (0)	2020.09.04
chrome extension 어플리케이션 구조  (0)	2020.04.21