크롬 익스텐션을 만들어보자, 크롬 익스텐션 파일구성

나름 테크 블로그를 지향하는데 요즘 너무 테크에 대한 얘기가 적었던것 같아

요즘 제가 관심갖고 있는 분야인 웹 앱스토어에 대한 튜토리얼을 올려볼까 합니다.

현재 구글에서 크롬 웹 앱스토어를 런칭한 상태입니다.

앞으로 모질라의 파이어폭스 웹 앱스토어도 활성화 된다면

웹앱스토어 세계도 보다 풍부해지지 않을까 싶습니다.


웹앱스토어는 웹 앱개발에 필요한 사용 언어가 HTML, CSS, JAVASCRIPT로 여러분들이 이미 익히 사용하시는 것들입니다.

새로운 언어를 배울필요도 없고, 새로운 개발도구를 설치할 필요도 없습니다.

다만 브라우저마다 다를 수 있는 고유 API에 대해서 document를 참고하고,

HTML5의 최신 스펙을 알아둘 필요도 있겠지만

여러분들이 새로운 언어를 배우는 것보다 더 쉽고 빠릅니다.


그럼 어디한번 크롬 익스텐션의 세계에 함께 빠져들어 볼까요.




크롬 익스텐션의 파일 구성


크롬 익스텐션을 만들때 아래의 5개 파일은 보통 필수적입니다.

manifest.json 파일은 파일명도 반드시 이것이어야 하지만

이것을 제외한 나머지 파일은 파일명이 꼭 아래와 같지 않아도 됩니다.

manifest.json 파일에서 설정하면 되는 사항입니다.


manifest.json : 익스텐션에 대한 정보를 담고 있는 파일(이름, 버전, 아이콘 경로, 실행파일 경로)
16.png : 주소표시줄 옆에 나타나는 익스텐션 실행 아이콘 16*16
48.png : 설치된 익스텐션 목록에 나타나는 익스텐션 아이콘 48*48
128.png : 익스텐션을 앱스토어에 올렸을때 소개될 128*128의 이미지 파일
background.html : 실제 실행되는 파일



manifest.json 의 예제

{
  "name": "my first extension",
  "version": "1.0.0",
  "icons": { "48": "img/48.png",
            "128": "img/128.png" },
  "description": "It is my first extension. wow",
  "background_page": "background.html",
  "browser_action": {
    "default_title": "my ext",
    "default_icon": "img/16.png"
  },
  "permissions": [
    "tabs"
  ]
}




manifest.json 파일에는 위에서 보시는 예제처럼

익스텐션의 이름과 버전, 아이콘경로, 설명, 실행되는 파일경로, 브라우저 액션 아이콘의 경로, 권한 설정에 대한 내용이 담깁니다.


보다 자세한 manifest.json 파일은 튜토리얼이 어느정도 진행된 후에 보다 자세히 알아보기로 하죠.


자 다음화부터 본격적으로 갑니다!!