Chrome extension 을 위한 manifest.json 옵션

Chrome extension 개발을 위한 manifest 각 옵션들

모든 Chrome extension 을 개발하기에 앞서 manifest.json 파일이 있다. 그리고 Chrome extension 에 올릴 때 이 manifest 라는 JSON 형태의 파일을 분석해서 원하는 크롬 확장 기능을 사용할 수 있도록 해준다. 살펴보다 보니 생각보다 이 옵션에 대한 자세한 글이 없어 구글 개발자를 위한 페이지를 보고 글을 썼다. 출처는 아래에 기재되어 있으니 필요하면 아래의 출처 사이트로 가서 보면 된다.

Manifest, 기본 포맷

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
{
// Required
"manifest_version": 2,
"name": "My Extension",
"version": "versionString",

// Recommended
"default_locale": "en",
"description": "A plain text description",
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
},

// Pick one (or none)
"browser_action": {...},
"page_action": {...},

// Optional
"action": "",
"author": "",
"automation": "",
"background": {
// Recommended
"persistent": false,
// Optional
"service_worker_script":
},
"chrome_settings_overrides": {...},
"chrome_ui_overrides": {
"bookmarks_ui": {
"remove_bookmark_shortcut": true,
"remove_button": true
}
},
"chrome_url_overrides": {...},
"commands": {...},
"content_capabilities": ...,
"content_scripts": [{...}],
"content_security_policy": "policyString",
"converted_from_user_script": "",
"current_locale": "",
"declarative_net_request": "",
"devtools_page": "devtools.html",
"event_rules": [{...}],
"externally_connectable": {
"matches": ["*://*.example.com/*"]
},
"file_browser_handlers": [...],
"file_system_provider_capabilities": {
"configurable": true,
"multiple_mounts": true,
"source": "network"
},
"homepage_url": "http://path/to/homepage",
"import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
"incognito": "spanning, split, or not_allowed",
"input_components": "",
"key": "publicKey",
"minimum_chrome_version": "versionString",
"nacl_modules": [...],
"oauth2": "",
"offline_enabled": true,
"omnibox": {
"keyword": "aString"
},
"optional_permissions": ["tabs"],
"options_page": "options.html",
"options_ui": {
"chrome_style": true,
"page": "options.html"
},
"permissions": ["tabs"],
"platforms": "",
"requirements": {...},
"sandbox": [...],
"short_name": "Short Name",
"signature": "",
"spellcheck": "",
"storage": {
"managed_schema": "schema.json"
},
"system_indicator": "",
"tts_engine": {...},
"update_url": "http://path/to/updateInfo.xml",
"version_name": "aString",
"web_accessible_resources": [...]
}

일단 기본 포맷은 위와 같이 되어 있다. 해당 포스팅에서는 이 중 주로 사용하는 것 및 필요한 것을 위주로만 설명한다.

manifest_version

1
2
3
{
"manifest_version": 2
}
  • required
  • 패키지에 필요한 매니페스트 파일 형식의 버전을 지정하는 하나의 숫자로 이루어진 정보이다. Chrome 18 이상부터는 string 형이 아닌 숫자형 2으로 작성해야 한다. manifest_versionChrome 17 이하에서는 2를 설정 하지 않는 것이 좋습니다. 확장 프로그램이 이전 버전의 Chrome 에서 작동해야하는 경우 버전 1을 사용하면 된다.

name and short_name

1
2
3
4
{
"name": "martin`s chrome extension",
"short_name": "chrome extension"
}
  • required
  • 해당 옵션은 최대 45자 이내로 작성해야 하며 확장 프로그램의 이름을 나타난다. 여기에서의 이름은 확장 프로그램 관리, 크롬 브라우저의 Toolbox 내 그리고 Chrome 의 웹 스토어에 기재된다.
  • short_name 의 경우, name 보다는 짧은 이름을 정할 때 사용하며, 최대 12자 이내로 작성한다. 해당 필드는 필수값은 아니며, 따로 기재하지 않으면 name 옵션의 이름을 따라 간다. 해당 옵션 같은 경우는 긴 글자의 name 을 노출하기에 공간이 부족한 앱 실행기나 새 탭 페이지 등에서 사용된다.

version

  • 해당 필드는 크롬 익스텐션의 버전을 식별하기 위한 1~4개의 점으로 이루어진 정수이다.
  • 숫자는 0~65535 사이의 값이어야 하며 0으로 시작할 수 없다. 아래가 유효한 버전이다.

    1
    2
    3
    4
    5
    6
    {
    "version": "1",
    "version": "1.0",
    "version": "2.10.2",
    "version": "3.1.2.4567"
    }
  • 자동 업데이트 시스템은 버전을 비교하여 설치된 확장 프로그램을 업데이트해야하는지 여부를 결정하며, 게시 된 확장 프로그램에 설치된 확장 프로그램보다 최신 버전이 있으면 확장 프로그램이 자동으로 업데이트한다.

    1
    2
    3
    4
    5
    {
    "version_name": "1.0 beta",
    "version_name": "build rc2",
    "version_name": "3.1.2.4567"
    }
  • 또한 위와 같이 version_name 을 이용할 수 도 있다.

description

1
2
3
{
"description": "설명에 대한 필드 입니다."
}
  • 해당 크롬 익스텐션에 대해서 설명하는 필드로서 최대 132자로 입력 가능하다.

homepage_url

1
2
3
{
"homepage_url": "http://blog.martinwork.co.kr/"
}
  • 해당 크롬 익스텐션에 대한 homepage url 정보를 담고 있다.
  • 크롬 익스텐션 관리 페이지에서 해당 url 에 대한 정보를 담고 있다.
  • 이 필드는 만약 해당 크롬 익스텐션을 나만의 사이트에서 제공하고 있을 때, 유용하게 사용할 수 있다.

icons

1
2
3
4
5
6
7
{
"icons": {
"16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png"
}
}
  • 해당 크롬 익스텐션을 대표하는 아이콘을 등록하는 필드이다.
  • 128 X 128 사이즈의 icon 은 무조건 제공을 해야하며, 이 아이콘은 크롬 웹 스토어에서 설치할 때 사용된다.
  • 48 X 48 사이즈의 경우, 크롬 익스텐션 관리 페이지에서 제공된다.
  • 16 X 16 사이즈의 경우, 크롬 익스텐션 파비콘으로 사용된다.
  • PNG 로 제공되는 것이 좋으나, 이 외에도 MP, GIF, ICO, and JPEG 등으로 제공해주어도 된다.

permissions

1
2
3
4
5
6
7
{
"permissions": [
"storage",
"tabs",
"activeTab"
]
}
  • 대부분의 Chrome API 를 사용하기 위해 크롬 익스텐션 혹은 앱에는 해당 필드의 사용 목적에 따른 권한을 입력해주어야 한다.
  • 해당 권한 필드는 혹시나 크롬 익스텐션이나 앱이 악성 코드에 의해 손상되더라도 피해를 줄이는 데에 도움을 준다.
  • 어떤 권한 옵션들은 사용자가 설치하기 전에 경고 창을 보여주기도 한다.
  • 만약 어떠한 API 를 사용함에 있어 권한이 필요하다면 그것에 대한 문서가 어떻게 하면 되는지 알려준다. 예를 들어 Storage 페이지는 storage 권한을 어떻게 선언하면 되는지 알려준다.

web_accessible_resources

1
2
3
4
5
{
"web_accessible_resources": [
"src/frame.html"
]
}
  • 웹 페이지의 컨텍스트에서 사용할 패키지의 리소스의 경로를 지정하는 옵션이다.

출처

현재 이커머스회사에서 frontend 개발자로 업무를 진행하고 있는 Martin 입니다. 글을 읽으시고 궁금한 점은 댓글 혹은 메일(hoons0131@gmail.com)로 연락해주시면 빠른 회신 드리도록 하겠습니다. 이 외에도 네트워킹에 대해서는 언제나 환영입니다.:Martin(https://github.com/martinYounghoonKim
VueJS를 이용한 JWT 인증 기반 CRUD 구현하기
자료구조, 리스트(List) 와 배열(Array)