이 페이지는 Cloud Translation API를 통해 번역되었습니다.

튜토리얼: Manifest V2로 이전

매니페스트 버전 1은 Chrome 18에서 지원 중단되었으며 매니페스트 버전 1 지원 일정에 따라 지원이 단계적으로 중단됩니다. 버전 1에서 버전 2로의 변경사항은 API 변경사항과 보안 변경사항이라는 두 가지 광범위한 카테고리로 분류됩니다.

이 문서에서는 매니페스트 버전 1에서 버전 2로 Chrome 확장 프로그램을 이전하기 위한 체크리스트를 제공하고, 이러한 변경사항의 의미와 변경사항이 적용된 이유에 대한 자세한 요약을 제공합니다.

API 변경사항 체크리스트

browser_actions 속성 또는 chrome.browserActions API를 사용하고 있나요?
browser_actions를 단일 browser_action 속성으로 대체합니다.
chrome.browserActions를 chrome.browserAction로 대체했습니다.
icons 속성을 default_icon로 바꿉니다.
name 속성을 default_title로 바꿉니다.
popup 속성을 default_popup로 바꿉니다. 이제 이 속성은 문자열이어야 합니다.
page_actions 속성 또는 chrome.pageActions API를 사용하고 있나요?
page_actions를 page_action로 대체했습니다.
chrome.pageActions를 chrome.pageAction로 대체했습니다.
icons 속성을 default_icon로 바꿉니다.
name 속성을 default_title로 바꿉니다.
popup 속성을 default_popup로 바꿉니다. 이제 이 속성은 문자열이어야 합니다.
chrome.self 속성을 사용하고 있나요?
chrome.extension로 대체합니다.
Port.tab 속성을 사용하고 있나요?
Port.sender로 대체합니다.
chrome.extension.getTabContentses() 또는 chrome.extension.getExtensionTabs() API를 사용하고 있나요?
chrome.extension.getViews( { "type" : "tab" } )로 대체합니다.
확장 프로그램에서 백그라운드 페이지를 사용하나요?
background_page 속성을 background 속성으로 바꿉니다.
페이지의 코드가 포함된 scripts 또는 page 속성을 추가합니다.
persistent 속성을 추가하고 false로 설정하여 백그라운드 페이지를 이벤트 페이지로 변환합니다.

보안 변경사항 체크리스트

HTML 페이지에서 인라인 스크립트 블록을 사용하고 있나요?
<script> 태그 내에 포함된 JS 코드를 삭제하고 외부 JS 파일에 배치합니다.
인라인 이벤트 핸들러 (예: 온클릭 등)를 사용 중인가요?
HTML 코드에서 삭제한 후 외부 JS 파일로 이동하고 대신 addEventListener()를 사용합니다.
확장 프로그램이 확장 프로그램의 패키지에 포함된 리소스 (예: 이미지, 스크립트)에 액세스해야 하는 웹페이지에 콘텐츠 스크립트를 삽입하나요?
web_accessible_resources 속성을 정의하고 리소스를 나열합니다 (선택사항으로 이러한 리소스에 대한 별도의 콘텐츠 보안 정책도 나열).
확장 프로그램에 외부 웹페이지가 삽입되어 있나요?
sandbox 속성을 정의합니다.
코드 또는 라이브러리가 eval(), 새로운 Function(), innerHTML, setTimeout()를 사용하거나 동적으로 평가되는 JS 코드 문자열을 전달하나요?
JSON 코드를 객체로 파싱하는 경우 JSON.parse()를 사용합니다.
CSP 친화적인 라이브러리(예: AngularJS)를 사용합니다.
매니페스트에 샌드박스 항목을 만들고 postMessage()를 사용하여 샌드박스 처리된 페이지와 통신하면서 영향을 받은 코드를 샌드박스에서 실행합니다.
jQuery 또는 Google 애널리틱스와 같은 외부 코드를 로드하고 있나요?
라이브러리를 다운로드하고 확장 프로그램에 패키징한 다음 로컬 패키지에서 로드하는 것이 좋습니다.
매니페스트의 'content_security_policy' 부분에서 리소스를 제공하는 HTTPS 도메인을 허용 목록에 추가합니다.

API 변경사항 요약

매니페스트 버전 2에서는 브라우저 작업 및 페이지 작업 API에 몇 가지 변경사항을 도입하고 몇 가지 이전 API를 최신 API로 대체합니다.

브라우저 작업의 변경사항

브라우저 작업 API의 이름 지정이 몇 가지 변경되었습니다.

browser_actions 및 chrome.browserActions 속성이 단일 속성 browser_action 및 chrome.browserAction로 대체되었습니다.
이전 browser_actions 속성 아래에는 icons, name, popup 속성이 있었습니다. 이러한 함수는 다음으로 대체되었습니다.
default_icon: 브라우저 작업 배지 아이콘
default_name - 배지 위로 마우스를 가져가면 도움말에 표시되는 텍스트
브라우저 작업의 UI를 나타내는 HTML 페이지의 default_popup (이제 문자열이어야 하며 객체는 아니어야 함)

페이지 작업 변경사항

브라우저 작업의 변경사항과 마찬가지로 Page Actions API도 변경되었습니다.

page_actions 및 chrome.pageActions 속성이 단수인 page_action 및 chrome.pageAction로 대체되었습니다.
이전 page_actions 속성 아래에는 icons, name, popup 속성이 있었습니다. 이러한 함수는 다음으로 대체되었습니다.
default_icon: 페이지 작업 배지 아이콘
default_name - 배지 위로 마우스를 가져가면 도움말에 표시되는 텍스트
페이지 작업의 UI를 나타내는 HTML 페이지의 default_popup (이제 문자열이어야 하며 객체는 아니어야 함)

삭제 및 변경된 API

일부 확장 프로그램 API가 삭제되고 새로운 API로 대체되었습니다.

background_page 속성이 background로 대체되었습니다.
chrome.self 속성을 삭제했습니다. chrome.extension를 사용하세요.
Port.tab 속성이 Port.sender로 대체되었습니다.
chrome.extension.getTabContentses() 및 chrome.extension.getExtensionTabs() API가 chrome.extension.getViews( { "type" : "tab" } )로 대체되었습니다.

보안 변경사항 요약

매니페스트 버전 1에서 버전 2로의 이동과 함께 다양한 보안 관련 변경사항이 있습니다. 이러한 변경사항은 대부분 Chrome의 콘텐츠 보안 정책 채택에서 비롯됩니다. 정책이 미치는 영향을 알아보려면 이 정책을 자세히 읽어야 합니다.

인라인 스크립트 및 이벤트 핸들러는 허용되지 않습니다.

콘텐츠 보안 정책으로 인해 HTML 콘텐츠와 인라인으로 연결된 <script> 태그는 더 이상 사용할 수 없습니다. 이러한 파일은 외부 JS 파일로 이동해야 합니다. 또한 인라인 이벤트 핸들러도 지원되지 않습니다. 예를 들어 확장 프로그램에 다음 코드가 있다고 가정해 보겠습니다.

<html>
<head>
  <script>
    function myFunc() { ... }
  </script>
</head>
</html>

이 코드를 사용하면 런타임 시 오류가 발생합니다. 이 문제를 해결하려면 <script> 태그 콘텐츠를 외부 파일로 이동하고 src='path_to_file.js' 속성을 사용하여 참조합니다.

마찬가지로 많은 웹 개발자가 흔히 사용하는 편의 기능인 인라인 이벤트 핸들러도 실행되지 않습니다. 예를 들어 다음과 같은 일반적인 인스턴스를 고려하세요.

<body onload="initialize()">
<button onclick="handleClick()" id="button1">

Manifest V2 확장 프로그램에서는 작동하지 않습니다. 인라인 이벤트 핸들러를 삭제하고 외부 JS 파일에 배치한 다음 addEventListener()를 사용하여 대신 이벤트 핸들러를 등록합니다. 예를 들어 JS 코드에서 다음을 사용합니다.

window.addEventListener("load", initialize);
...
document.getElementById("button1").addEventListener("click",handleClick);

이 방법을 사용하면 확장 프로그램의 동작을 사용자 인터페이스 마크업과 훨씬 더 깔끔하게 구분할 수 있습니다.

콘텐츠 삽입

확장 프로그램이 외부에서 사용할 수 있거나 외부 소스에서 가져온 콘텐츠를 삽입할 수 있는 몇 가지 시나리오가 있습니다.

웹페이지의 확장 프로그램 콘텐츠: 확장 프로그램이 웹페이지에 삽입된 콘텐츠 스크립트에 사용되는 리소스 (예: 이미지, 스크립트, CSS 스타일 등)를 삽입하는 경우 외부 웹페이지에서 사용할 수 있도록 web_accessible_resources 속성을 사용하여 이러한 리소스를 허용 목록에 추가해야 합니다.

{
...
  "web_accessible_resources": [
    "images/image1.png",
    "script/myscript.js"
  ],
...
}

외부 콘텐츠 삽입: 콘텐츠 보안 정책은 로컬 스크립트 및 객체만 패키지에서 로드할 수 있도록 허용하므로 외부 공격자가 확장 프로그램에 알 수 없는 코드를 도입할 수 없습니다. 그러나 jQuery 또는 Google 애널리틱스 코드와 같은 외부 제공 리소스를 로드하려는 경우가 있습니다. 다음과 같은 두 가지 방법이 있습니다.

관련 라이브러리 (예: jQuery)를 로컬로 다운로드하고 확장 프로그램과 함께 패키징합니다.
매니페스트의 'content_security_policy' 섹션에서 HTTPS 출처를 허용 목록에 추가하여 제한된 방식으로 CSP를 완화할 수 있습니다. Google 애널리틱스와 같은 라이브러리를 포함하려면 다음과 같은 방법을 사용합니다.
```
{
  ...,
  "content_security_policy": "script-src 'self'
  https://ssl.google-analytics.com; object-src 'self'",
  ...
}
```

동적 스크립트 평가 사용

새 매니페스트 v2 체계의 가장 큰 변경사항 중 하나는 확장 프로그램이 더 이상 eval() 또는 새 Function()와 같은 동적 스크립트 평가 기법을 사용할 수 없거나 setTimeout()와 같이 eval() 사용을 유발하는 함수에 JS 코드 문자열을 전달할 수 없다는 것입니다. 또한 Google 지도 및 특정 템플릿 라이브러리와 같이 흔히 사용되는 특정 JavaScript 라이브러리가 이러한 기법 중 일부를 사용하는 것으로 알려져 있습니다.

Chrome은 Chrome에 액세스할 수 없는 자체 출처의 페이지를 실행할 수 있는 샌드박스를 제공합니다.* 배열됩니다 새로운 콘텐츠 보안 정책에서 eval() 등을 사용하려면 다음 안내를 따르세요.

매니페스트 파일에 샌드박스 항목을 만듭니다.
샌드박스 항목에 샌드박스에서 실행할 페이지를 나열합니다.
postMessage()를 통해 메시지를 전달하는 기능을 사용하여 샌드박스 처리된 페이지와 통신합니다.

자세한 방법은 샌드박스 평가 문서를 참고하세요.

추가 자료

매니페스트 버전 2의 변경사항은 개발자가 더 안전하고 강력하게 설계된 확장 프로그램과 앱을 빌드하도록 안내하기 위해 설계되었습니다. 매니페스트 버전 1에서 버전 2로의 전체 변경사항 목록을 보려면 매니페스트 파일 문서를 참고하세요. 샌드박스를 사용하여 안전하지 않은 코드를 격리하는 방법에 관한 자세한 내용은 샌드박스 평가 문서를 참고하세요. 콘텐츠 보안 정책에 대한 자세한 내용은 확장 프로그램 관련 튜토리얼과 HTML5Rocks 소개를 참조하세요.