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

이명환·2020년 11월 21일

구글 확장 프로그램 개발

목록 보기

1/5

구글 크롬 확장 프로그램은 구글 크롬 브라우저를 수정하는 브라우저 확장 프로그램이다. 이러한 확장은 HTML, JavaScript 및 CSS 와 같은 웹 기술을 기반으로 사용하여 작성된다. 크롬 확장 프로그램은 크롬 웹 스토어를 통해 다운로드 할 수 있다.

구글 확장프로그램을 개발하는데 필요한 Extension의 구조를 알아보자

Extension 아키텍쳐

manifest
Background script
UI Elements
Content script
Options page

Extension의 구조는 크게 5부분으로 나눌 수 있다. 하나씩 살펴보자.

manifest

{
    "name": "shopping table",
    "version": "1.0",
    "description": "Easy shopping!",
    "manifest_version": 2,
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
      },
    "background": {
        "persistent": false,
        "scripts": ["background.js"]
    },
    "content_scripts": [
        {
        "matches": ["https://*"],
        "js": ["content.js"]
        }
      ],
    "permissions": [
        "tabs",
        "<all_urls>"
    ]

  }

json 형태로 확장프로그램에 대한 정보들과 사용할 js , 접근할 url , 권한들을 설정할 수 있다. 확장프로그램의 기본적인 정보와 설정을 하는 것이 manifest이다.

Background script

Background script는 extension에서 구성되어 있는 이벤트 핸들러이다.
extension에 필요한 브라우저 이벤트리스너가 포함되어 있으며, 이벤트가 발생할 때까지는 background script는 유휴 상태에서 로직을 수행한다. 이러한 Background script는 필요할때만 로드되며, 유휴상태로 전환되면 언로드되는 형식을 가지고 있다.

manifest에서 Background script로 동작할 js파일을 설정할 수 있다.

UI Elements

기본적으로 chrome extension 버튼(아이콘)을 클릭하면 popup을 출력할 수 있는 형태로 구성되어 있으나, 검색 주소창 사용 또는 단축키 등의 UI를 포함할 수 있다.

팝업페이지에서는 chrome extension에 내장되어 있는 tabs.create 또는 브라우저 객체의 window.open을 호출하여 다른 페이지를 출력할 수도 있다. 이러한 extension의 경우 chrome extension내의 content API를 사용하여 사용자가 팝업을 사용하는 경우에 대한 Background script 규칙을 설정할 수 있으며, Background script는 popup과 통신하여 기능을 수행할 수 있다.

Content script

브라우저내의 웹페이지를 제어하는 영역이다. Content script에는 브라우저에 로딩된 페이지의 context에서 실행될 수 있는 Javascript를 삽입할 수 있다. 이러한 Content script는 방문한 웹페이지의 DOM을 제어할 수도 있으며, 수정 및 쓰기가 가능하다.