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

튜토리얼: Manifest V2로 이전

매니페스트 버전 1은 Chrome 18에서 지원 중단되었으며 다음 규정에 따라 지원이 단계적으로 중단될 예정입니다. 매니페스트 버전 1 지원 일정을 준수해야 합니다. 버전 1에서 버전 2로의 변경사항은 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 파일 내에 배치합니다.
인라인 이벤트 핸들러 (예: 온클릭 등)를 사용하고 있나요?
이러한 확장 파일을 HTML 코드에서 삭제하고 외부 JS 파일로 이동하고 addEventListener()를 사용합니다. 하세요.
확장 프로그램이 리소스에 액세스해야 하는 웹페이지 (예: 파일(예: 이미지, 스크립트)을 포함할 수 있나요?
web_accessible_resources 속성을 정의하고 리소스 (선택사항)를 나열합니다. 해당 리소스에 대해 별도의 콘텐츠 보안 정책)을 사용합니다.
확장 프로그램에 외부 웹페이지가 삽입되어 있나요?
sandbox 속성을 정의합니다.
코드 또는 라이브러리에서 eval(), 새 Function(), innerHTML, setTimeout() 또는 어떻게 해야 할까요?
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: 배지 위로 마우스를 가져가면 도움말에 표시되는 텍스트
default_popup: 브라우저 작업의 UI를 나타내는 HTML 페이지 (이제 필수 문자열일 수 없으며 객체일 수 없음)

페이지 작업 변경사항

브라우저 작업에 대한 변경사항과 마찬가지로 페이지 작업 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의 콘텐츠 보안 정책 채택으로 인한 것입니다. 나 에서 이 정책의 영향을 자세히 읽어 보시기 바랍니다.

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

콘텐츠 보안 정책의 사용으로 인해 인라인 <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)를 로컬로 다운로드하고 확장 프로그램과 함께 패키징합니다.
HTTPS 출처를 허용 목록에 추가하여 제한된 방식으로 CSP를 완화할 수 있습니다. "content_security_policy" 섹션에 추가하면 됩니다. Google 애널리틱스와 같은 라이브러리를 포함하려면 취할 수 있는 조치는 다음과 같습니다.
```
{
  ...,
  "content_security_policy": "script-src 'self'
  https://ssl.google-analytics.com; object-src 'self'",
  ...
}
```

동적 스크립트 평가 사용

아마도 새로운 Manifest V2 체계의 가장 큰 변화 중 하나는 확장 프로그램이 더 이상 eval() 또는 새로운 Function()와 같은 동적 스크립트 평가 기법을 사용하거나 JavaScript 문자열을 전달합니다. eval()를 사용하도록 하는 함수(예: setTimeout())에 코드를 추가해야 합니다. 또한 특정 Google 지도 및 특정 템플릿 라이브러리와 같이 일반적으로 사용되는 JavaScript 라이브러리는 사용할 수 있습니다.

Chrome은 페이지가 자체 출처에서 실행될 수 있는 샌드박스를 제공하며 이러한 경우 Chrome에 대한 액세스가 거부됩니다.* 데이터에 액세스할 수 있습니다 새 콘텐츠 보안 정책에 따라 eval() 등을 사용하려면 다음을 따르세요.

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

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

추가 자료

매니페스트 버전 2의 변경 사항은 확장 프로그램 및 앱을 빌드할 수 있습니다. 매니페스트 버전 1의 전체 변경사항 목록 보기 버전으로 업그레이드하려면 매니페스트 파일 설명서를 참조하세요. 샌드박스 사용에 대한 자세한 내용은 안전하지 않은 코드를 분리하려면 샌드박스 평가 문서를 읽어보세요. '콘텐츠'에 대한 자세한 내용은 확장 프로그램 관련 튜토리얼을 방문하고 HTML5Rocks여야 합니다.