튜토리얼: 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 속성을 정의하고 리소스 (선택적으로 해당 리소스의 별도 콘텐츠 보안 정책)를 나열합니다.

  • 확장 프로그램이 외부 웹페이지를 삽입하나요?

  • 샌드박스 속성을 정의합니다.

  • 코드 또는 라이브러리에서 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 애널리틱스 코드와 같이 외부에서 제공되는 리소스를 로드해야 하는 경우도 있습니다. 다음과 같은 두 가지 방법이 있습니다.

  1. 관련 라이브러리 (예: jQuery)를 로컬로 다운로드하고 확장 프로그램과 함께 패키징합니다.

  2. 매니페스트의 'content_security_policy' 섹션에서 HTTPS 출처를 허용 목록에 추가하여 제한된 방식으로 CSP를 완화할 수 있습니다. Google 애널리틱스와 같은 라이브러리를 포함하려면 다음 방법을 따르세요.

    {
  ...,
  "content_security_policy": "script-src 'self'
  https://ssl.google-analytics.com; object-src 'self'",
  ...
}

동적 스크립트 평가 사용

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

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

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

이 작업을 수행하는 방법에 관한 자세한 내용은 샌드박스 평가 문서를 참고하세요.

추가 자료

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