개발을 진행하거나, 웹브라우저를 이용하여 업무를 하다보면, 의외로 크롬에 있는 웹스토어에서 extension을 다운받아 진행하는 경우들이 많습니다. 웹브라우저내의 스크린샷을 찍는다던지, 개발자의 경우 백엔드단에서의 CORS 이슈를 간단하게 on/off 하거나 쿠키 등을 설정할 수 있는 것처럼 Chrome extension은 개인적으로나 팀내에서 유용하게 쓰일 수 있는 extension들이 많습니다. 실제로 postman의 경우 이후에 독자적인 앱으로 발전하였고, 제가 속한 팀에서도 extension을 활용하여 개발운영에 대한 데브옵스 이슈들을 extension을 만들어 해결하고 있습니다.
이번 포스팅부터는 Chrome extension에 대한 간략한 내용과, 실제로 프론트엔드개발자가 Chrome extension을 어떻게 개발할 수 있을지에 대한 내용을 다뤄보고, 실제로 개발한 내용에 대한 경험을 공유해보고자 합니다.
Chrome extension?
extension은 브라우저 경험에서 돌아갈 수 있는 작은 소프트웨어라고 보시면 됩니다. 실제로 크롬의 기능에서 확장하여 다양한 기능들을 이용할 수 있으며, 브라우저내의 코어한 내용들도 제어가 가능합니다. 이를 통해서 브라우저내의 사용자 경험을 확대하고, 더 풍부하게 만들어 주기도 합니다.
브라우저 기반의 소프트웨어
브라우저기반의 소프트웨어이기 때문에, HTML, CSS, Javascript로 구성할 수 있습니다. 이러한 앱의 설정은 별도의 manifest를 통해서 작업 가능하며, 모든 파일들을 압축하여 .crx 패키지 형태로 배포됩니다. 이는 일반 웹 프로그램과 달리 웹콘텐츠에 의존하지 않는 것을 의미합니다.
Extension 아키텍쳐
chrome extension에 구성하는 아키텍쳐는 다음과 같은 요소들로 구성되어 있습니다.
- manifest
- Background script
- UI Elements
- Content script
- Options page
각 항목들에 대해서 살펴보도록 하겠습니다.
Background script
Background script는 일종의 extension에서 구성되어 있는 이벤트 핸들러라고 보시면 됩니다. extension에 필요한 브라우저 이벤트리스너가 포함되어 있으며, 이벤트가 발생할 때까지는 background script는 유휴 상태에서 로직을 수행합니다. 이러한 Background script는 필요할때만 로드되며, 유휴상태로 전환되면 언로드되는 형식을 가지고 있습니다.
UI Elements
extension의 사용자 인터페이스는 각 기능에 대한 목적성이 있어야 하며 최소화 되어야 한다는 가이드라인이 존재합니다. UI의 경우 chrome extension 버튼을 클릭시에 popup을 출력할 수 있는 형태로 구성되어 있으나, 검색 주소창 사용 또는 단축키 등의 UI를 포함할 수 있습니다. 특히, UI 구성은 팝업이 대표적인 형태입니다.
팝업페이지에서는 chrome extension에 내장되어 있는 tabs.create 또는 브라우저 객체의 window.open을 호출하여 다른 페이지를 출력할 수도 있습니다. 이러한 extension의 경우 chrome extension내의 content API를 사용하여 사용자가 팝업을 사용하는 경우에 대한 Background script 규칙을 설정할 수 있으며, Background script는 popup과 통신하여 기능을 수행할 수 있습니다.
Content script
실제 브라우저내의 웹페이지를 제어하는 영역입니다. 컨텐츠 스크립트에는 브라우저에 로딩된 페이지의 context에서 실행될 수 있는 Javascript를 삽입합니다. 이러한 Content script는 방문한 웹페이지의 DOM을 제어할 수도 있으며, 수정 및 쓰기가 가능합니다.
컨텐츠 스크립트는 Storage API를 사용하여 메세지를 교환하고 값을 저장하여 상위의 extension과 통신 가능합니다.
Options page
옵션페이지에서 extension에 대한 설정이 가능합니다. 이를 통해서 Settings 내에서 확장프로그램에 대한 제어가 가능합니다.
다음 포스팅에서는 React, Webpack을 활용하여 Chrome extension Popup을 만드는 과정을 포스팅하겠습니다. 감사합니다. :)
References