본문 바로가기
웹개발/크롬 익스텐션

크롬 익스텐션 개발기 (1) : 기본 설정

by 현댕5697 2021. 1. 17.
반응형

3주간 동아리에서 팀 프로젝트로 웹 클리퍼 기능의 크롬 익스텐션을 개발하게 되었다.

크롬 익스텐션 개발과 관련된 정보가 많은 것이 아니라 힘들기도 했지만, 만들고 나니까 굉장히 뿌듯하다.

그래서 크롬 익스텐션을 만들면서 배웠던 내용들을 전체적으로 정리해보고자 한다!

 

일단 이 프로젝트를 진행하면서 chrome API 문서를 엄청 읽었다.

developer.chrome.com/docs/extensions/reference/

 

API Reference - Chrome Developers

The complete reference to all APIs made available to Chrome Extensions. This includes APIs for the deprecated Chrome Apps platform as well as APIs still in beta and dev.

developer.chrome.com

근데 공식 문서에 사용 예시가 많지 않아서 stackoverflow를 엄청 찾아봤던 것 같다... stackoverflow 최고!!

 

 

일단 크롬 익스텐션은 크게 popup, newtab, option, background, content 이렇게 5부분으로 나눌 수 있다.

우리는 이중에서 popup, newtabm option, background를 사용했었다.

1) popup: 익스텐션 파비콘을 클릭하면 나오는 팝업창을 담당하는 부분

2) newtab: 크롬에서 새 탭 열기 버튼을 클릭했을 때 생성된는 새 탭을 담당하는 부분

3) option: 익스텐션에서 우클릭 후 옵션을 선택하면 열리는 페이지를 담당하는 부분

4) background: 눈에 보이는 부분은 아니지만 익스텐션이 실행될 때 함께 실행되는 부분

 

*참고로 파비콘이란

주소창 옆의 익스텐션 아이콘을 말한다.

 

그래서 코드를 짠 후에 개발자 도구에서 콘솔을 확인하려면 각각의 개발자 도구를 열어야 한다.

처음에 이걸 몰랐어서 왜 콘솔이 안 찍히는지 계속 고민했었다....

 

popup의 경우에는 팝업창에서 우클릭 후 개발자 도구를 선택하여 콘솔창을 확인할 수 있다.

newtab의 경우에는 뉴탭 화면에서 F12 또는 우클릭 후 개발자도구를 선택하면 된다.

background의 경우에는 확장 프로그램 관리 페이지에 들어가서 우리의 프로그램의 '뷰 검사'에 있는 background.html을 클릭하면 볼 수 있다. 이때 반드시 우측 상단의 개발자 모드가 활성화 된 상태여야 한다.

option의 경우에는 option 화면에서 F12나 우클릭으로 개발자도구를 열면 된다.

 

*참고로, 확장 프로그램 관리 페이지에 자신의 프로그램을 등록하고 싶다면, 좌측 상단의 '압축해제된 확장 프로그램을 로드합니다' 버튼을 클릭하고 리액트 프로젝트를 빌드한 폴더를 등록하면 된다.

 

 

크롬 익스텐션을 만들 때 중요한것이 바로 manifest.json 파일이다. 

이 파일에서 우리는 popup, newtab, option 등 여러 설정을 관리할 수 있다.

아래의 코드는 우리 팀이 익스텐션을 만들때 사용했던 manifest.json의 코드이다.

{	
    "name": "Cookie Parking Chrome Extention",
    "options_page": "options.html",
    "background": {
        "page": "background.html",
        "icon": "icon-34.png"
    },
    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": "icon-34.png"
    },
    "chrome_url_overrides": {
        "newtab": "newtab.html"
    },
    "icons": {
        "128": "icon-128.png"
    },
    "web_accessible_resources": [
        "icon-128.png",
        "icon-34.png"
    ],
    "permissions": [
        "activeTab",
        "<all_urls>",
        "tabs",
        "storage"
    ],
    "externally_connectable" : {
        "matches": 
        ["https://www.cookieparking.com/*"]
    },
    "manifest_version": 2,
    "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
    "web_accessible_resources" :[
        "assets/font/SpoqaHanSansNeo-Medium.ttf"
    ]
}

 

1. newtab 설정하기

'chrome_url_overrides' 항목의 newtab 프로퍼티에 뉴탭에서 띄울 html 파일 이름을 넣어주면 된다.

그리고 'permissions' 항목에 "activeTab"을 추가해주어야 한다.

 

2. popup 설정하기

'browser_action' 항목의 default_pop에 팝업에서 띄울 html 파일 이름을 넣어주면 된다.

default_icon을 통해서는 익스텐션의 파비콘을 지정할 수 있다.

그런데 이때 주의해야 할 점이 파비콘으로 사용해줄 이미지 파일 이름을 바로 넣는 것이 아니라, 이미지 파일 이름을 'icon-34'로 변경해야 한다는 점이었다.

그냥 이미지 파일 이름인 favicon-34.png를 넣으니 자꾸 오류가 발생했었는데, 이유는 아직 모르겠다.

그리고 34라는 숫자는 이미지 파일의 크기를 말하는 것이기 때문에 34*34 크기로 이미지 파일을 변환해야 한다.

오류나는 이유를 찾아냈다!!

background의 index.js 파일에서 import로 icon-34.png, icon-128.png를 불러오고 있었기 때문에 이 두 파일만 manifest.json 파일에서 사용할 수 있었던 것이다!!

따라서 background에서 import 해오기만 하면 import 한 이미지 파일들 모두 manifest.json에서 사용할 수 있다. 

 

3. option 설정하기

'options_page'에 옵션 페이지에서 띄울 html 파일 이름을 넣어주면 된다.

 

4. background 설정하기

'background' 항목의 page에 background에서 실행되길 원하는 html 파일을 넣어주면 된다.

 

5. 기본 아이콘 설정하기

'icons' 항목은 기본 아이콘으로 설정할 이미지 파일을 지정할 수 있다.

이때도 사용할 이미지 파일 이름을 icon-128로 변경하는 과정이 필요했다.

그리고 128*128 크기의 이미지 파일을 사용하였다.

 

 

 

우리 프로그램은 new tab과 popup, option, background 기능을 모두 사용해야 했다. 

그렇기 때문에 newtab.html, popup.html, option.html, background.html 파일이 모두 필요했다.

그런데 리액트는 build를 하고 나서 html 파일이 한 개만 생성된다는 문제가 있었다. 

그래서 처음에는 리액트 프로젝트 파일을 4개나 만들어야 하는 것인지 고민했었다.

 

그러다가 chrome extension boiler plate를 발견하였다!!

이 boiler plate는 webpack 설정을 건드려서 하나의 리액트 프로젝트 파일에서 build를 하여도, newtab.html, popup.html, option.html, background.html가 생성되도록 해주고 있다!!!!

 

github.com/lxieyang/chrome-extension-boilerplate-react

 

lxieyang/chrome-extension-boilerplate-react

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

github.com

 

정말정말 감사합니다 lxieyang님.....

반응형

댓글