크롬 확장 프로그램 알아보기 (1)

최근 사내에서 업무의 효율성을 높이기위해 개인적으로 진행한 크롬 익스텐션을 개발하였는데 그 과정에서 알게된 내용들을 정리하려고 합니다.

 

크롬 익스텐션

크롬브라우저에서는 다양한 확장 프로그램들을 사용할 수 있습니다. 크롬 웹 스토어를 접속하면 다양한 확장 프로그램들을 확인할 수 있습니다. 등록된 앱을 사용할수도 있지만 필요한것이 있다면 직접 개발하여 스토어에 등록하고 사용할 수도 있습니다. 여기서는 직접 개발하기위해 필요한 내용들을 기록하려고 합니다.

 

간단하게 만들어보기

우선 간단한 확장 프로그램을 생성해 보도록 하겠습니다. 여기서는 딱 두개의 파일만 있으면 됩니다.

• sample1
  •  index.html
  • manifest.json

이렇게 sample1 폴더에 두개의 파일을 생성합니다. 

 

 

 

위와같이 작성하고 확장프로그램(chrome://extensions/) 으로 이동해서 우측상단에 개발자모드를 활성화 하고 

압축해제된 확장 프로그램을 로드합니다. 버튼을 누르고 sample1 폴더를 로드하면 확장 프로그램 목록에 추가되는걸 확인할 수 있습니다.

 

sample1 확장 프로그램

popup 노출

 

manifest.json 뜯어보기

매니페스트를 사전적 정의를 검색해보면 명백한 이라고 나옵니다. 프로그래밍적용어로 어떤 의미를 갖고 사용되는지 찾아보면 

매니페스트 파일(manifest file)은 컴퓨팅에서 집합의 일부 또는 논리정연한 단위인 파일들의 그룹을 위한 메타데이터를 포함하는 파일이다. 예를 들어, 컴퓨터 프로그램의 파일들은 이름, 버전 번호, 라이선스, 프로그램의 구성 파일들을 가질 수 있다.
-위키백과-

 

즉 매니페스트는 크롬 확장프로그램에 대해서 명백하게 정의하는 파일이라고 볼 수 있습니다. 해당 프로그램의 버전, 설명, 이름, 아이콘, 어떤 기능과 동작에 어떤 파일을 사용할것인지 에 대해서 정할 수 있습니다.

매니페스트 파일 형식

 

"action"

action sample github

action 은 크롬브라우저에서 확장 프로그램의 도구 모음 버튼을 제어할때 사용합니다. 매니페스트에서는 기본 popup 으로 index.html 을 연결해 주고 있기때문에 해당 프로그램 아이콘을 클릭하면 index.html 에 담긴 내용이 popup 형태로 나오는걸 확인 할 수 있습니다.

• popup 의 사이즈는 최대 width: 800px / height: 600px 이 넘지 않습니다.
• 사이즈가 넘어가게될경우 자동으로 스크롤이 발생합니다.
• action 을 매니페스트에 선언해야 chrome.action 과 관련된 메소드들을 사용할 수 있습니다.

매니페스트의 action 에 정의할 수 있는건 popup 이외에도 

• default_title
• default_icon

을 정할 수 있습니다. default_title 은 우측 상단에 있는 확장 프로그램 아이콘에 마우스를 올렸을때 나타나는 설명이라고 볼 수 있는데 html 태그에 넣을 수 있는 속성중 title 과 같다고 볼 수 있습니다.

 

default_icon 은 우측 상단에 표시될 아이콘을 지정 할 수 있습니다. 16, 24, 32 등 사이즈별로 아이콘을 설정해두면 해상도에 따라 아이콘이 깨져보이는걸 방지할 수 있습니다.

default_icon: {
   "16": "test16.png",
   "24": "test24.png",
    "32": "icons/32.png",
    "72": "icons/72.png",
    "128": "icons/128.png",
    "512": "icons/512.png"
}

 

여기까지가 메니페스트에서 설정할 수 있는 action 부분이고 popup 내에서 js 코드로 설정할 수 있는 부분이 있습니다. 

popup.js 란 파일을 생성하고 index.html 에 script 로 불러옵니다. 그리고 아래와같은 코드를 작성하면 배지를 생성할 수 있습니다.

 

팝업에 스크립트를 추가했기때문에 확장 프로그램을 실행시켜서 한번은 팝업을 활성화 시켜야 적용됩니다. 

 

확장 프로그래램을 클릭하여 실행했을때 특정 스크립트를 삽입하여 동작하게 하려면 background.js, content.js 를 생성하고 아래와같이 작성하면됩니다. 이때 매니페스트에서 default_popup 은 제거해야 동작하는걸 확인 할 수 있습니다. background.js 는 매니페스트에서 정의할 수 있는데 해당파일을 정의하면 확장프로그램 전용 개발자도구를 활성화해서 콘솔을 확인할 수 있습니다.

 

 

background 는 크롬 익스텐션이 동작하는데 필요한 다양한 이벤트 핸들러를 스크립트로 작성할 수 있는 영역이고 

content 는 실질적으로 브라우저와 확장 프로그램간의 메세지를 주고받아 이벤트를 처리하는 영역입니다. 이후에 좀더 자세히 알아보도록 하겠습니다.

 

매니페스트 가아닌 chrome.action 메소드에 어떤 종류가 있는지 더 자세히 알고싶으면 여기를 방문해주세요

 

"commands"

commands 를 활용하면 확장 프로그램에 단축키를 지정 할 수 있습니다. 

 

 

"icons"

action 내부에 default_icon 은 확장 프로그램을 우측 상단에 추가했을때 보여질 아이콘을 지정했더라면 icons 에 추가한 이미지는 

chrome://extensions/ 에서 목록에 보여지거나 알림창을 띄울때 보여질 이미지를 추가합니다.

 

"options_page"

만약 사용자에게 확장 프로그램을 이용할때 별도의 선택권을 주거나 옵션을 설정할 수 있도록 하려면 options_page 를 매니페스트에 선언하여 활용할 수 있습니다. 이름이 page 인 이유는 확장프로그램의 옵션을 선택하면 옵션 페이지로 이동하게 됩니다.

// manifest.json
{
   ...
   "options_page": "options.html"
}

 

루트에 options.html 파일을 생성하고 option page 라는 텍스트를 작성하고 해당 확장프로그램에서 우클릭 => 옵션을 선택하면 옵션페이지가 나타나고 option page 라는 텍스트를 확인 할 수 있습니다.

 

여기까지 완성된 매니페스트 파일과 파일 디렉토리 구조는 아래와 같습니다.

 

 

options 를 적용하는 방법에 대해서 공식문서를 보면 나와있긴하지만 코드가 길어서 제 나름대로 비슷하지만 축약해 보았습니다. 

우선 여기서 예시를 들고있는건 옵션페이지에서 버튼을 클릭했을때 확장 프로그램의 팝업인 popup.html 의 돔을 조작하는 방법입니다. 쉽게 설명하면 옵션페이지에서 다크모드 토글을 만들수도 있을것같습니다.

 

option 페이지에 버튼을 두개 추가하고 스크립트를 작성합니다. 버튼의 텍스트로 popup 의 배경색을 변경하려는 로직인데 여기서는 chrome.storage 를 활용합니다. 크롬확장프로그램에서 자체적으로 제공하는 저장소 개념으로 보시면되는데 이걸 사용하려면 매니페스트에서 접근 허용을 선언해줘야합니다.

// manifest.json
{
   ...
   "permissions": ["storage", "activeTab", "scripting"],
}

 

옵션에서 컬러의 변경사항에 대해서 저장소를 활용하여 변경하도록 하였으니 popup.js 에서 저장소에 있는 컬러값을 가져와 반영하는 로직을 작성해줘야합니다.

// popup.js
chrome.storage.sync.get("color", ({ color }) => {
  document.body.style.backgroundColor = color
})

 

크롬 확장 프로그램을 개발하면서 주의해야할점은 확장 프로그램 관련 로직이 변경되었을경우 새로고침을 별도로 해주어야 반영이 되기때문에 이 부분을 잘 체크하면서 해야합니다. UI 부분은 코드만 변경해도 바로 확인이 가능하지만 로직관련 부분은 확장프로그램 새로고침을 해야합니다.

 

이제 옵션 페이지에서 버튼을 번갈아가면서 선택하고 확장프로그램을 실행해보면 배경색상이 바뀌는걸 확인 할 수 있습니다.

 

 

참고자료

Chrome Extensions Samples

GitHub - GoogleChrome/chrome-extensions-samples: Chrome Extensions Samples

Chrome Developers Docs

Getting started - Chrome Developers

우아한형제들 기술블로그 - 크롬익스텐션 개발기

크롬 익스텐션에서 데이터를 어떻게 다룰 것인가? (피트스탑과제 – 크롬 익스텐션 개발기) | 우

React17 Chrome Extension Boilerplate

GitHub - lxieyang/chrome-extension-boilerplate-react: A Chrome Extensions boilerplate using React 17 and Webpack 5.

우아한형제들 기술블로그 - 크롬 확장 플러그인 톺아보기

크롬 확장 플러그인 톺아보기 | 우아한형제들 기술블로그