chrome extension 제작기 2 - 개발 단계 + 최종 완성본

사전 준비 🔎 

검색해보니 chrome extension 앱 개발하는게 엄청 간단했다. 

그냥 vanilla JS 로만 개발한 프로젝트도 많고 심지어 공식 홈페이지에서도 vanilla JS로 모든 기능을 구현하는 법을 보여줬다. 

크롬 공식 튜토리얼(https://developer.chrome.com/docs/extensions/get-started#tutorials) 에 대부분의 기능이 모두 구현되어있다. 그리고 코드도 엄청 간단하다. 한 튜토리얼당 15분도? 안걸리는 것 같다. 생각보다 엄~~청 간단해서 놀랐다. 

 

개발 셋팅 💻

사용기술

HTML, CSS, JavaScript + WEB API + Chrome Extension API 

chrome은 웹 브라우저이기 때문에 당연하게도 HTML, CSS, JavaScript로 개발할수있다. 또한 브라우저 extension이기 때문에 당연하게도 브라우저 엔진에서 제공하는 WEB API도 사용 가능하고, 추가로 나는 브라우저 중에서도 chrome extension을 만들것이기 때문에 Chrome Extension API도 쓸수있다. 

 

manifest.json  파일 설정

JSON 포맷의 파일로 크롬 익스텐션을 개발하든, 사파리 익스텐션을 개발하든 브라우저 익스텐션을 개발하는 프로젝트라면 `manifest.json` 파일은 필수적으로 필요하다. 이 파일은 반드시 프로젝트 루트 경로에 있어야한다.

`manifest.json` 파일에는 어떤 파일이 필요한지, 어떤 권한이 필요한지, 어떤 아이콘을 쓰는지 등등 익스텐션의 설정 파일이라고 생각하면 된다

 

설정 예시 

{
  // 필수: manifest 파일 버전 
  "manifest_version": 3,

  // 필수: 확장 프로그램 이름 
  "name": "mySampleApp",

  // 필수: 확장 프로그램 버전 
  "version": "1.0.0",

  // 필수: 확장 프로그램 설명 
  "description": "이 확장은 알림을 제공합니다!",

  // 확장 프로그램 아이콘 (extension store에 등록시 128사이즈는 필수임)
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },

  // 확장이 사용하는 기능에 따라 필요한 권한 명시
  "permissions": [
    "notifications",
    "storage"
  ],

  // 브라우저 툴바 아이콘 클릭 시 팝업 설정
  "action": {
    "default_popup": "popup.html",
    "default_icon": "icon48.png"
  },

  // 백그라운드 Service Worker 설정
  "background": {
    "service_worker": "background.js"
  }
}

`manifest.json` 파일에 필수적으로 들어가야할 요소는 아래와 같다. 

 

-   "manifest_version": 3 // 꼭 버전 3으로 명시해야함

- "name" (앱 이름 작성)

- "version" (앱 버전 작성) 

- "description" (앱 설명 작성)

- "icons" (앱 아이콘 이미지, 필수는 아니지만 나중에 chrome 익스텐션 스토어에 등록하려면 필요함) 

 

위의 요소들 말고는 필수가 아니며, 나머지는 본인이 개발하는 앱 기능에 따라 넣어주면 된다.

나는 팝업을 열고 알림을 설정하는 앱이였기때문에 아래 요소들을 추가로 넣어줬다. 

 

- "pemissions" (앱에서 사용하는 권한)

- "action" (아이콘 클릭했을때 보여지는 팝업 ui)

- "background" (앱이 사용되지 않을때도 알림을 울리도록 백그라운드 설정) 

 

위의 요소들 중에서 특히 중요한건, `permissions`를 잘 셋팅해야한다. 나는 크롬 앱 스토어에 올리고 저  `permissions`을 잘못 셋팅해서 한번 거절당했다. ㅠ 

크롬 공식 튜토리얼을 한번씩 따라하니까 반 이상은 만들어졌다.!! 🐶이득. 사실 필수 기능이 워낙 단순했기 때문에, js만 보면 하루만에 다 만들 수 있는 양이었지만, Web Worker와 Service Worker가 헷갈려서 처음에 좀 헤맸다. 그리고 다 만들고 보니 storage 를 꼭 써야했다는 걸 알았다. 흡,, storage를 쓰지 않으면 이전에 만들어 놓은 알림은 설정 되어 있으나, 팝업을 껐다가 켰을때 이전 데이터에 대한 정보를 볼수 없어서 삭제가 안됐음!  

 

추가로, 보기 좋은 떡이 먹기도 좋은법!  디자인도 시간을 조금 더 썼다. ChatGPT를 채찍질해서 로고도 만들었다.ㅋㅋㅋ 

디자인에 집중한 시간빼고 기능 구현에만 쓴 시간은 주말 하루만 꼬박?이면  될 듯!

chatGPT 채찍질하기

 

 

결과물 🚩

 

최종 완성된 나의 로고!!  챗gpt를 계속 채찍질했더니 마음에 드는 로고가 나왔다. ㅎㅎ 역시 챗gpt는 계속 채찍질을 해야한다..

 

최종 구현한 기능은 아래와 같다. 

 

구현 기능 :

 

- 알림 시작 시간 설정

 

- 알림 종료 시간 설정

 

- 반복 주기 설정

 

- 알림 저장 및 미리보기 

 

- 알림 삭제 

 

최종 UI

개발하다보니까 아쉬운 부분도 많고, 추가로 넣고 싶은 기능도 많았다. 

ex) localization, 알림 여러개 셋팅, 다음 알림 시간 알려주기 등등등  

이건 나중에 넣어야겠다(언제..?). 그리고 생각보다 디자인이 오래 걸렸다. 기능구현이랑 디자인이랑 1:1 로 비슷하게 걸린 것 같다. 

 

언넝 만들어서 써야하기도하고, 유저의 피드백을 더 빨리 모으는게 좋다고 생각해서 우선 여기서 스탑하고 크롬 웹 스토어에 등록하기로 결정!!

 

다음단계 >>

2025.04.14 - [기타등등] - chrome extension 제작기 3 - 개발자 등록 + extension web store 에 앱 등록