Chrome Extension의 설정 파일, manifest

📍Manifest란?

✅크롬 익스텐션의 설정 파일 역할로, 필수로 존재해야 한다

- JSON 형식 (manifest.json 형태로 존재)

- 익스텐션의 루트에 위치

 

📍Manifest  V3

✅2023년 4월 현재 최신 버전

- 2022년 1월부터 V2 버전의 새로운 앱 등록이 금지됨

 

📍Manifest  V3 포맷

✅필수 프로퍼티

- manifest_version

- name

- version

 

✅권장되는 프로퍼티

- action

- default_locale

- icons

- description

 

1. action : 크롬 우측 상단의 아이콘의 세부 정보를 담당하는 객체

- default_icon : 우측 상단의 아이콘 이미지

- default_title : 아이콘에 커서 올리면 표시할 타이틀

- default_popup : 아이콘 클릭시 노출할 팝업창의 위치

 

2. default_locale : 익스텐션의 기본 언어를 설정하는 문자열

- 루트의 _locales 디렉토리를 필요로 함

⭐_locales 폴더가 없는 경우 프로퍼티를 지워야 한다

참고

https://developer.chrome.com/docs/extensions/reference/i18n/

chrome.i18n - Chrome Developers

 

3. icons : 익스텐션을 대표할 아이콘 객체

- 16

- 32

- 48

- 128 픽셀들이 존재

⭐전부 정확한 크기의 이미지를 넣을 필요없다 (크롬에서 알아서 바꿔서 씀)

 

4. description : 익스텐션 설명

 

✅나머지는 옵셔널

 

✅예시

{
  "manifest_version": 3,
  "name": "익스텐션 이름",
  "version": "1.0.1",
  "description": "익스텐션 설명",
  "icons": {
    "16": "icon256.png",
    "32": "icon256.png",
    "48": "icon256.png",
    "128": "icon256.png"
  },
  "author": "작성자",
  "action": {
    "default_icon": {
      "16": "icon256.png",
      "24": "icon256.png",
      "32": "icon256.png"
    },
    "default_title": "우상단 아이콘에 커서 올리면 표시되는 이름",
    "default_popup": "우상단 아이콘을 클릭 시 노출될 팝업창의 html 위치"
  },
  "permissions": ["storage", "alarms", "notifications"], // 앱에서 사용할 권한
  "background": {
    "service_worker": "background.js" // 서비스 워커 파일의 위치
  },
  "options_page": "options/options.html" // 우상단 아이콘 우클릭 시 메뉴에 넣을 옵션창 위치
}