크롬 확장 프로그램 만들기



1. 개요 #

2. Quick Start #

2.1. 매니페스트 작성 #


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

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

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

2.2. 버튼 만들기 #

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

2.2.1. 선언 #

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"},

2.2.2. 내용 추가 #

같은 폴더에 test.htm을 만든다.

2.3. 백그라운드 만들기 #

2.3.1. 선언 #

manifest.json에 다음을 추가한다.

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

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

이 글에는 0 개의 댓글이 있습니다.