[개인 프로젝트]Time Timer Mod - chrome extension 제작 (1) 개발 준비 과정

평소 시간 관리를 위해 "구글 시계"로 유명한 Time timer mod를 사용하곤 했다.
[구글 타이머 사진]
다른건 다 괜찮은데 이어폰을 끼고 웹 서핑이나 유튜브를 보는 중에는 해당 시계를 힐끔힐끔 쳐다보거나 타이머 종료음을 미처 듣지 못하고 시간을 쓰는 경우가 다반사였다. 이에 브라우저에 해당 타이머 기능을 넣으면 어떨까 생각하곤 했다.

그러던 와중 chrome extension을 제작하는 재미있는 유튜브 영상을 발견하였다. 해당 영상은 popup 화면에 간단한 타이머를 제작하는 영상이었는데, 이걸 보고 어쩌면 extension으로 구글 시계를 만들 수 있지 않을까 생각했다.
그렇게 Time timer mod for chrome extension 프로젝트 개발을 시작했고 해당 과정과 후기 등을 블로그에 남기려 한다.

목차

개발 준비

익스텐션 구조 파악

큰 구조는 다음과 같이 3가지로 구성되어 있다.

content.js
사용자 화면의 DOM, 스크립트들을 제어하는데 필요한 스크립트

background.js
익스텐션이 실제로 동작하는데 필요한 스크립트

popup.js
익스텐션 버튼을 눌렀을 때 뜨는 팝업창을 위한 스크립트

텍스트만으로는 이해가 안가서 구조도를 그려보았다.

popup 화면의 특정 버튼을 누르면 -> popup.js에서 해당 이벤트를 인식하고 background.js에 특정 메세지를 보낸 후 -> 해당 메세지의 특정 기능 수행 -> content.js에 변화 하는 식의 진행 과정이다.

content.js는 필수가 아니며 background 와 popup 만의 통신도 가능하다. 하지만 내가 하고 싶은 건 현재 chrome 브라우저의 DOM에 접근해야하기에 세 가지 모두 사용해야 했다. 구조를 파악했으면 manifest.json 이라는 파일을 생성하여 사용할 툴과 버젼 등을 정해주어야 한다.

Manifest.json

manifest.json 안에는 package.json 파일과 함께 익스텐션을 정의하는 정보가 포함된다.

{
  // ...
  "manifest_version": 3, ->2020.11 새롭게 출시된 version3
  "action": {
    "default_title": "...",
    "default_popup": "popup.html",
    "default_icon": "favicon.png"
  },
  "background": {
    "service_worker": "background.js" ->service worker로 사용할 파일 이름
  },
  "permissions": [ -> chrome API에서 허가를 받을 요소 설정
    "tabs",
    "activeTab", -> 현재 활성화된 탭의 정보를 얻음.
    "scripting", -> 해당 스크립트에 접근 허가 권한을 얻음.
    "cookies",
    "declarativeContent",
    "storage"
 ],

더 자세한 정보는 chrome extension doc 를 참고.

타이머 기능

이전에 이미 JS로 time timer mod를 만들어 본 적이 있다.

github 링크

이때 사용한 타이머 입력 및 각도 계산 등의 데이터를 그대로 사용하기로 했다. canvas를 이용해서 프레임마다 새롭게 부채꼴을 그려가면서 타이머가 흘러가는 모습을 시각화하였다. 익스텐션 사용 시 웹 서핑을 하면서도 사용이 가능하도록 하기 위해 가운데를 비워두고 테두리에만 빨간 시간 영역이 나타나도록 했다.

다음 이어서...