[Chrome Extension] manifast.json 파헤치기

모든 Chrome Extension은 중요한 정보를 제공하는 manifest.json이라는 이름의 json 포맷으로된 파일을 가지고 있습니다.

몇몇의 Filed들을 살펴볼까요?

{
  "manifest_version": 2,
  "name": "tetoda_robot_chromeExtension",
  "description": "Hello!",
  "version": "1.0.0",
  "background": {
    //Recommended
    "scripts":["background.js"]
    "persistent": false
  },
  "content_scripts":[{...}],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs",
    "<all_urls>"
  ]
}

manifest_version : 해당 매니페스트의 버전.

name : 확장 프로그램에서 확인할 수 있는 이름. (chrome://extensions/ 에서 확인)

description : 확장 프로그램에서 해당 프로그램의 상세 설명. (chrome://extensions/ 에서 확인)

version : 확장프로그램의 현재 버전.

background : 해당 프로그램이 실행될 때 백그라운드로 실행될 파일을 정의.

content_scripts : 웹페이지의 context에서 실행하는 javascript 파일.

표준 DOM(Document Object Model)을 사용하여 브라우저에서 방문한 웹페이지의 세부정보를 읽거나 그것들을 변경할 수 있습니다.

뒤에서 조금 더 자세히 다루어 볼게요.

browser_action : 해당 프로그램이 크롬에 등록될 시, 주소창 우측에 아이콘이 생깁니다.

이때 어느 아이콘으로 할지, 기본 아이콘과 해당 아이콘을 클릭 시, 어느 .html로 이동할지 기본값을 정함.

여기서 작성하는 이름은 실제 파일명과 동일해야 합니다.

permissions : 해당 프로그램에서 사용할 퍼미션들을 나열합니다. 위에서는 tabs와 <all_urls> 2개를 사용했습니다.

tabs : 클릭 시, 새로운 탭이 오픈되도록 하는 권한입니다.

<all_urls> : 모든 url에서 해당 프로그램을 사용할 수 있도록 하는 권한입니다.

---

앞서 설명했던 content_scripts에 대해 조금 자세히 다루어 볼게요.

만약 content_scripts의 코드가 항상 삽입되어야 할 필요가 있다면,

manifest.json 파일 내에 content_scripts 필드를 사용하여 등록할 수 있습니다.

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "matches": ["http://www.google.com/*"],
      "css": ["mystyles.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ],
  ...
}

만약 코드가 항상 주입될 필요는 없고, 가끔씩만 삽입된다면 아래와 같이 permission field에 대신 정의할 수 있습니다. 

{
  "name": "My extension",
  ...
  "permissions": [
    "tabs", "http://www.google.com/*"
  ],
  ...
}

content_scripts 필드에는 여러가지 속성이 있는데요.

몇가지만 살펴보겠습니다.

Name	Type	Description
matches	array of strings	필수값. 이 스크립트가 삽입될 페이지를 지정합니다.
js	array of strings	matches에 선언한 페이지에 삽입될 javascript 파일 목록입니다.
run_at	string	js파일을 주입할 시기를 제어합니다. 기본값은 "document_idle"이며, "document_start", "document_end" 옵션이 있습니다.  "document_start" : 다른 DOM이 구성되거나, 다른 모든 스크립트가 실행되기 전에 삽입됩니다.  "document_end" : DOM이 완료된 직후에, image와 frame같은 subsource들이 로드되기 전에 삽입됩니다.  "document_idle" : "document_end"와, window.onload 이벤트가 발생한 직후에, 브라우저가 스크립트를 삽입할 시간을 선택합니다.
all_frames	boolean	content script가 일치하는 페이지의 모든 프레임에서 실행할지, 맨 위의 프레임에서만 실행할지를 제어합니다.  기본값은 false이며, 맨 위의 프레임에서만 실행하는 것을 의미합니다.