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

튜토리얼: Manifest V2로 이전

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

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

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 파일 내에 배치합니다.
인라인 이벤트 핸들러 (예: onclick 등)를 사용하고 있나요?
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 (이제 문자열이어야 하며 객체가 될 수 없음)

페이지 작업 변경사항

브라우저 작업의 변경사항과 마찬가지로 페이지 작업 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">

이는 매니페스트 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의 좋은 소개를 참고하여 콘텐츠 보안 정책에 관해 자세히 알아보세요.