초보자를 위한 Google 크롬 확장 매니페스트 v3

매니페스트 파일은 JSON 형식을 사용하여 확장에 대한 중요한 정보를 설명합니다. 여기에는 필수 필드, 권장 필드가 포함되어 있으며 다른 필드는 빌드 중인 확장에 따라 선택 사항입니다.

name는 확장자의 이름을 말하며 최대 45자여야 합니다.

version 확장 버전을 나타내는 점으로 구분된 숫자. 예를 들어; 1.0.0

manifest_version 버전의 매니페스트입니다. 최신은 3

host_permissions 확장 프로그램에 추가 권한이 필요한 URL 그룹입니다. 매니페스트 v3 이상에서 호스트 권한을 지정해야 합니다.

{
     "name": "My YT Bookmarks",
    "version": "0.1.0",
    "description": "Saving timestamps in YT videos",
    "permissions": ["storage", "tabs"],
    "host_permissions": ["https://*.youtube.com/*"],
    "manifest_version": 3
}

권장 필드는 다음과 같습니다.

description - 확장 기능에 대한 간략한 세부 정보

action 작업 키를 사용하면 chrome.action API를 사용하여 chromes UI에서 확장 프로그램의 도구 모음을 제어할 수 있습니다. 또한 기본 아이콘, 기본 제목 및 기본 팝업 html의 개체를 지정할 수 있습니다.

 "description": "Saving timestamps in YT videos",
"action": {
      "default_icon": {
        "16": "assets/ext-icon.png",
        "24": "assets/ext-icon.png",
        "32": "assets/ext-icon.png"
      },
      "default_title": "My YT Bookmarks",
      "default_popup": "popup.html"
    },

선택적 필드는 다음과 같습니다.

author 작성자 이름의 문자열입니다.

{
...
 "author": "Erica",
...
}

background 백그라운드 스크립트는 Chrome API를 통해 이벤트와 상호 작용합니다. 이러한 스크립트는 service_worker 키를 사용하여 개체로 등록됩니다.

{
...
 "background": {
      "service_worker": "background.js"
    },
...
}

permissions – 확장 프로그램이 제대로 작동하려면 chrome 저장소를 사용하는 것과 같은 다양한 권한이 필요할 수 있습니다. 필요한 권한은 문자열 배열로 전달됩니다.

{
...
 "permissions": ["storage", "tabs"],
...
}

web_accessible_resources 확장에 필요한 이미지 또는 기타 자산과 같은 다양한 리소스를 선언하는 개체 배열입니다.

{
...
 "web_accessible_resources": [
      {
        "resources": [
          "assets/bookmark.png",
          "assets/play.png",
          "assets/delete.png",
          "assets/save.png"
        ],
        "matches": ["https://*.youtube.com/*"]
      }
    ],
...
}

content_scripts는 페이지의 DOM을 조작하고 특정 페이지의 컨텍스트에서 실행할 수 있는 스크립트입니다.

{
...
 "content_scripts": [
      {
        "matches": ["https://*.youtube.com/*"],
        "js": ["contentScript.js"]
      }
    ],
...
}

스크립트가 JavaScript 라이브러리를 사용하는 경우에도 삽입해야 합니다.

{
...
 "content_scripts": [
      {
        "matches": ["https://*.youtube.com/*"],
        "js": [jquery, "contentScript.js"]
      }
    ],
...
}

최종 발언

크롬 확장 프로그램과 관련하여 할 일이 훨씬 더 많지만 여기에서 시작하는 것이 좋습니다. 곧 다른 모든 파일에 대해 자세히 살펴보겠습니다.