본 포스트는 크롬 익스텐션 개발자 페이지(https://developer.chrome.com/extensions/overview)를 토대로 작성되었습니다.
그냥 공부하는 차원에서 개발자스러운 번역 중...
아키텍쳐
많은 익스텐션들은 메인로직을 담당하는 보이지않는 페이지(invisible page), 백그라운드 페이지(background page)를 가지고 있다. 또한 UI 를 표현하는 다른 페이지를 포함시킬 수 있다. 만약 사용자가 로드한 웹 페이지(익스텐션에 포함된 페이지가 아닌)와 인터렉션이 필요하다면 컨텐츠 스크립트(content script) 를 사용해야만 한다.
백그라운드 페이지 (The background page)
backgroud.html 에 정의되는 백그라운드 페이지(background page)는 익스텐션의 행위를 제어하는 자바스크립트 코드가 포함될 수 있다. 두 가지 타입의 백그라운드 페이지가 있는데, 영속 백그라운드 페이지(persistent background pages)와 이벤트 페이지(event pages)이다. 영속 백그라운드 페이지는 그 이름과 같이 항상 열려져 있다. 이벤트 페이지는 필요에 의해 열리거나 닫힌다. 백그라운드 페이지에서 사용할 필요가 없을 때는 이벤트 페이지를 사용할 것을 권한다.
이벤트 페이지와 백그라운드 페이지의 상세한 내용을 참고하길 바란다.
UI 페이지 (UI pages)
익스텐션에는 UI 표현을 위한 일반적인 HTML 페이지들이 포함된다. 예를 들어, 브라우저 액션이 팝업을 가지고 있다면 이것은 HTML 파일로 구현된다. 어떤 익스텐션은 커스터마이징을 위해 옵션 페이지(options pages)를 가질 수 있다. 다른 타입의 특수 페이지는 오버라이드 페이지(override page)이다. 마지막으로 tabs.create 나 window.open() 을 이용하여 익스텐션 내에 있는 HTML 파일을 표시할 수 있다.
익스텐션 내에 있는 HTML 페이지는 다른 DOM에 완벽하게 접근할 수 있으며, 함수 호출도 가능하다.
아래 그림은 브라우저 액션 팝업의 아키텍쳐를 보여준다. 팝업의 컨텐츠는 HTML 파일(popup.html)로 정의된 웹페이지이다. 이 익스텐션 또한 백그라운드 페이지(background.html)에서 발생한다. 팝업은 백그라운드 페이지에 중복 코드를 필요로 하지 않는다. 팝업은 백그라운드 페이지에서 함수로 호출할 수 있기 때문이다.
자세한 내용은 브라우저 액션(Browser Actions), 옵션(Options), 오버라이드 페이지(Override Pages)와 페이지 간 커뮤니케이션(Communication between pages)를 참고하길 바란다.
컨텐츠 스크립트 (Content scripts)
익스텐션이 웹페이지와 인터렉션을 필요로 한다면 컨텐츠 스크립트(content scripts)를 필요로 한다. 컨텐츠 스크립트는 자바스크립트로 이루어졌으며 브라우저 상의 페이지에 로드되어 실행된다. 컨텐츠 스크립트는 로드된 페이지의 스크립트의 일부라고 생각하면 된다. (익스텐션의 부분은 아님)
컨텐츠 스크립트는 웹 페이지의 상세를 읽을 수 있고 페이지를 변경할 수 있다. 아래의 그림과 같이 컨텐츠 스크립트는 웹 페이지의 DOM 을 읽고 변경할 수 있다. 그러나 익스텐션의 백그라운 페이지는 변경할 수 없다.
컨텐츠 스크립트는 익스텐션과 완벽하게 차단되지 않는다. 컨텐츠 스크립트는 아래의 그림과 같이 익스텐션과 메시지를 주고받을 수 있다. 예를 들어 컨텐츠 스크립트가 웹 페이지의 RSS feed 를 발견할 때마다 메시지를 보낼 수도 있다. 또는 백그라운드 페이지가 브라우저 페이지의 변화를 컨텐츠 스크립트에 문의하여 메시지를 받을 수도 있다.
좀 더 상세한 정보는 컨텐츠 스크립트(Contents Scripts)를 참고하길 바란다.