일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- js promise
- javascript eventloop
- 순차리스트
- javascript destructuring
- es6 destructuring
- react class method bind
- react event bind
- 크롬 익스텐션 개발
- DOM API
- parcel
- react
- task queue
- javascript class method bind
- client side rendering
- JavaScript
- es6 promise
- Browser API
- javascript spread
- react lifecycle
- javascript arrow function
- 선형리스트
- es6 symbol
- es6 module
- #javascript #자바스크립트 완벽가이드 #자바스크립트 코뿔소
- server side rendering
- es7 async await
- web server vs was
- chrome extension development
- 자료구조
- js arrow function
- Today
- 49
- Total
- 400,421
비실이의 개발 성장기
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 이 동작하도록 할 수 있다.
-
-
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 |