본문 바로가기

WebDev

Chrome extension 개발

Chrome extension 개발

공식 문서를 참고했다.

크롬 익스텐션을 개발하는 방법을 간단하게 정리한다.

Chrome Extension 요소


  • manifest.json 개발할 익스텐션의 [소개, 권한, 자원]을 명세하는 파일
  • background 크롬이 실행되어 익스텐션이 불려질 때 실행될 스크립트. 크롬 브라우저가 완전히 꺼질 때까지 유지된다
  • browser action 주소창 오른쪽에 있는 익스텐션 아이템을 클릭했을 때 보여지는 팝업 윈도우
  • content 웹 페이지가 열릴 때마다 실행될 스크립트로, 마치 해당 스크립트가 해당 페이지에 원래 포함되어 있었던 듯이 행동한다. 이 특징에 의해 해당 페이지의 모든 자원에 아무 문제 없이 접근할 수 있다는 장점이 있으나, 보안 정책1에 휘둘린다.

한 줄 요약 background==backend, browser action==control panel, content==frontend

따라서 정리하자면,

  1. manifest를 작성하고,
  2. browser action의 html, css, javascript를 작성하고,
  3. background를 작성해 backend를 만들고,
  4. content를 작성해 background의 클라이언트가 되게 만든다

는 것이다.

Chrome Extension Cheat Sheet


디렉토리 하나 만들고, 모든 파일을 집어넣고 개발하면 된다.

manifest.json

{
  "manifest_version": 2,
  "name": "recipes",
  "description": "The programmable DOM manipulator",
  "version": "1.0",
  "author": "makerj (ohenwkgdj@gmail.com)",
  "permissions": ["<all_urls>"],

  "background": {
    "scripts": ["jquery-1.12.0.min.js", "jquery-ui.min.js", "background.js"]
  },

  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png",
    "256": "icon256.png"
  },

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["jquery-1.12.0.min.js", "jquery-ui.min.js", "content.js"],
      "css": ["content.css"],
      "run_at": "document_end"
    }
  ]
}

html, css, js의 이름은 자유다. 다만 보안 정책상 외부 라이브러리를 cdn에서 가져올 수 없다.
따라서 위의 예처럼 jquery와 같은 외부 라이브러리는 다운로드 받아 직접 사용해야 한다.

permissions는 공식 문서를 참조하자. 설명하기엔 너무 많다.

content_scripts에서 "matches": ["<all_urls>"]부분을 볼 수 있는데, 이 부분은 꼭 필요한 url서에만 작동하도록 지정할 수도 있다. 예를 들어 "matches": ["http://daum.net/*"]


  1. 예를 들어 frame간 origin이 다른 경우 Security Limitation에서 벗어날 수 없다. 프레임을 도배한 네이버 블로그 페이지를 가지고 놀다보면 이 경우를 체험할 수 있을 것이다.

'WebDev' 카테고리의 다른 글

Require.js  (0) 2016.02.20
tosync.js  (0) 2016.02.20
Web SQL  (0) 2016.02.15
django custom user  (0) 2016.02.07
django facebook login  (0) 2016.02.06