[Chrome Extension] Manifest V3 가이드

소개

크롬 확장프로그램 개발을 시작하기 위한 첫 걸음은 manifest.json 파일을 이해하는 것입니다. Manifest V3의 모든 설정과 사용법을 자세히 알아보겠습니다.

manifest.json 기본 구조

{
  "manifest_version": 3,
  "name": "My Extension",
  "description": "A simple Chrome extension",
  "version": "1.0.0",
  "permissions": [],
  "action": {},
  "background": {},
  "content_scripts": []
}

필수 필드 설명

기본 정보

{
  "manifest_version": 3,  // Manifest 버전 (V3 필수)
  "name": "My Extension",  // 확장프로그램 이름
  "version": "1.0.0",     // 버전 정보
  "description": "This is my first Chrome extension"  // 설명
}

아이콘 설정

{
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

주요 기능 설정

권한 설정

{
  "permissions": [
    "storage",           // 데이터 저장소 접근
    "tabs",             // 탭 정보 접근
    "activeTab",        // 현재 활성 탭 접근
    "scripting",        // 스크립트 실행 권한
    "notifications"     // 알림 권한
  ],
  "host_permissions": [
    "http://*/*",       // HTTP 사이트 접근
    "https://*/*"       // HTTPS 사이트 접근
  ]
}

백그라운드 워커

{
  "background": {
    "service_worker": "background.js",
    "type": "module"    // ES 모듈 사용 시
  }
}

콘텐츠 스크립트

{
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "css": ["styles/content.css"],
      "js": ["scripts/content.js"],
      "run_at": "document_end"
    }
  ]
}

팝업 설정

{
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "32": "images/icon32.png"
    },
    "default_title": "Click Me!"
  }
}

고급 설정

웹 접근성 설정

{
  "web_accessible_resources": [{
    "resources": [
      "images/*.png",
      "scripts/*.js",
      "styles/*.css"
    ],
    "matches": ["https://*.example.com/*"]
  }]
}

명령어 설정

{
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+Y",
        "mac": "Command+Shift+Y"
      },
      "description": "Run extension"
    }
  }
}

개발자 도구 확장

{
  "devtools_page": "devtools.html",
  "permissions": ["devtools"]
}

실전 예제

북마크 매니저 확장프로그램

{
  "manifest_version": 3,
  "name": "Smart Bookmarks",
  "version": "1.0",
  "description": "Enhanced bookmark management",

  "permissions": [
    "bookmarks",
    "storage",
    "tabs"
  ],

  "action": {
    "default_popup": "popup/bookmark.html",
    "default_icon": {
      "16": "icons/bookmark16.png",
      "48": "icons/bookmark48.png"
    }
  },

  "background": {
    "service_worker": "background/bookmark-manager.js"
  }
}

웹 스크래퍼 확장프로그램

{
  "manifest_version": 3,
  "name": "Web Scraper Pro",
  "version": "1.0",

  "permissions": [
    "activeTab",
    "scripting",
    "downloads"
  ],

  "host_permissions": [
    "https://*/*"
  ],

  "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content/scraper.js"],
    "css": ["styles/scraper.css"]
  }],

  "action": {
    "default_popup": "popup/scraper.html"
  },

  "background": {
    "service_worker": "background/scraper-worker.js"
  }
}

보안 고려사항

최소 권한 원칙

{
  "permissions": [
    "activeTab"  // tabs 대신 activeTab 사용
  ],
  "host_permissions": [
    "https://specific-domain.com/*"  // 전체 도메인 대신 특정 도메인만
  ]
}

Content Security Policy

{
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}

디버깅 및 테스트

개발용 설정

{
  "name": "My Extension (Dev)",
  "version": "1.0.0-dev",
  "content_scripts": [{
    "matches": ["http://localhost:*/*"]
  }]
}

로깅 설정

{
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "permissions": ["storage"],
  "minimum_chrome_version": "88"
}

배포 준비

프로덕션용 manifest

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0.0",
  "description": "Production ready extension",

  "permissions": [
    "activeTab",
    "storage"
  ],

  "action": {
    "default_popup": "popup.html"
  },

  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'"
  }
}