Chrome 확장 개발 : Hello World로 확장을 만들고 싶습니다.

목표

콘솔에서 「Hello World!」라고 출력할 뿐인 Google 크롬 확장이 완성된다. 덧붙여 이번 성과물은 GitHub의 suin/chrome-extension-playground에 놓았다.

1. 필요한 최소한의 파일 만들기

적절한 디렉토리에 background.js와 manifest.json과 아이콘 이미지를 만듭니다.

├── background.js
├── icons
│   ├── icon128.png
│   ├── icon16.png
│   ├── icon19.png
│   └── icon48.png
└── manifest.json

background.js는 Hello World를 출력하는 JavaScript입니다.

background.js

console.log("Hello World!");

manifest.json은 확장 정보를 정리한 파일입니다. Chrome 확장을 만들 때 필수입니다.

manifest.json

{
  "name": "Example 0: Hello World in Console",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "This is an example to print Hello World in Chrome console",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "background": {
    "scripts": [
      "background.js"
    ]
  }
}

여기 background는 Google 크롬의 배경 페이지에서 스크립트를 실행한다는 선언. Backgroupd Pages는 스크립트를 뒷면에서 계속 실행할 수 있도록 하는 구조로, Chrome이 일어나고 있는 동안 계속 실행해 두고 싶은 처리나, 유지해 두고 싶은 상태를 가질 때 사용한다.

2. Chrome을 개발자 모드로 설정하고 확장 로드

Chrome의 Preference→Extension으로 이동하여 'Developer mode'를 체크합니다. 그러면 "Load unpacked extension"이라는 버튼이 나오므로 그것을 누릅니다.



Finder가 열리므로 manifest.json이있는 디렉토리를 선택하고 열 수 있습니다. 그러면 Extensions에 확장이 로드되어 사용할 수 있는 상태가 된다.

3. 실행 결과 확인

Background Pages로 출력한 내용은 Extensions의 각 확장의 Inspect views에서 확인할 수 있다.



열어 보면, Inspector가 열려 Console의 탭을 열면, 「Hello World!」라고 나오고 있을 것이므로, 확인해 주었으면 한다.



코드를 수정하고 다시 실행할 때는 "Reload"의 링크를 눌러 확장을 다시 읽습니다.

Chrome 확장 개발 시리즈

다음 번 : 확장에서 페이지로 JavaScript를 전송하고 싶습니다.