[Javascript] Chrome extension 을 위한 manifest.json 옵션

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

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

Manifest, 기본 포맷

{
    // 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

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

name and short_name

{
    "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으로 시작할 수 없다. 아래가 유효한 버전이다.
    {
      "version": "1",
      "version": "1.0",
      "version": "2.10.2",
      "version": "3.1.2.4567"
    }
    
  • 자동 업데이트 시스템은 버전을 비교하여 설치된 확장 프로그램을 업데이트해야하는지 여부를 결정하며, 게시 된 확장 프로그램에 설치된 확장 프로그램보다 최신 버전이 있으면 확장 프로그램이 자동으로 업데이트한다.
    {
      "version_name": "1.0 beta",
      "version_name": "build rc2",
      "version_name": "3.1.2.4567"
    }
    
  • 또한 위와 같이 version_name 을 이용할 수 도 있다.

description

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

homepage_url

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

icons

{
    "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

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

web_accessible_resources

{
    "web_accessible_resources": [
        "src/frame.html"
    ]
}

  • 웹 페이지의 컨텍스트에서 사용할 패키지의 리소스의 경로를 지정하는 옵션이다.

출처

Comments