[[TableOfContents]]

== 개요 ==
크롬 확장 프로그램 개발 - 개요
[http://dailyupgrade.me/post/5176583468/chrome-extension-development-overview]

Chrome Extensions
[http://developer.chrome.com/extensions/index]

== Quick Start ==
=== 매니페스트 작성 ===
[http://developer.chrome.com/extensions/manifest]

임의의 폴더를 만든다.
폴더안에 새 파일 manifest.json을 작성한다. 파일 인코딩은 반드시 UTF-8 이어야 한다.

{{{
{
    // Reqired
    "manifest_version": 2,
    "name": "내 첫 번째 확장 프로그램",
    "version": "0.9.0"   
}
}}}

주소창에 chrome://extensions 입력하거나 {{{도구>확장 프로그램}}}을 선택한다.
{{{개발자 모드}}}를 체크한다. {{{압축해제된 확장 프로그램 로드...}}} 버튼을 누른다.
아까 만든 폴더를 선택한다.

=== 버튼 만들기 ===
아주 간단하다. manifest.json에 팝업 버튼을 사용하겠다고 아이콘만 지정하면 버튼이 생기고 버튼을 누르면 보이는 내용은 HTML로 작성하면 된다.

==== 선언 ====
manifest.json에 다음을 추가한다.

{{{
{
    "manifest_version": 2,
    "name": "내 첫 번째 확장 프로그램",
    "version": "0.9.0",

    "description": "내 크롬 확장",
    "icons": { "48": "icon48.png" },

    "browser_action": {
      "default_icon": "icon48.png",
      "default_popup": "test.htm"
    },

    "permissions": [
      "tabs",
      "activeTab"
    ]
}
}}}

적당한 아이콘 이미지 icon48.png를 만든다. 

※ 실제 사용할 때는 사이즈 전부 추가해주는 게 좋다.
{{{
    "icons": { "16": "icon16.png",
               "48": "icon48.png",
              "128": "icon128.png"},
}}}

==== 내용 추가 ====
같은 폴더에 test.htm을 만든다. 

=== 백그라운드 만들기 ===
[https://developer.chrome.com/extensions/background_pages]

==== 선언 ====
manifest.json에 다음을 추가한다.

{{{
{
  "name": "My extension",
  ...
  "background": {
    "scripts": ["background.js"]
  },
  ...
}
}}}
또는

{{{
{
  "name": "My extension",
  ...
  "background": {
    "page": "background.html"
  },
  ...
}
}}}

----
CategoryDocument