1. Chrome Hosted Apps 제작하기 및 개발버전 업로드

 제 Blog의 Chrome 웹 바로가기를 만들고, 그걸 크롬 웹 스토어에 올리기위해서 작성합니다. 생각보다 어렵지 않고, 간단하게 만들고,스토어에 등록 할 수 있더군요. 그리고 좀더 알리고.. 크롬을 자주 사용하는 저로써는 접속하기 쉽게 바로가기 아이콘을 한번 만들어보았습니다.

 

아래는 개발용 버전으로 업로드 한 아이콘

Chrome Web Store 등록 URL 주소(제 블로그 Hosted Apps 입니다)

  http://bit.thdev.net/I8V9ou

목차

1. Chrome Hosted Apps 제작하기 및 개발버전 업로드

2. Chrome Hosted Apps 스토어에 올리기

    http://thdev.net/164

 이번 리뷰는 1. Chrome Hosted Apps 제작하기 및 개발버전 업로드 부분을 설명하겠습니다. 다음 리뷰에서 웹 스토어에 올리는데 필요한 절차를 간단히 알아보도록 하겠습니다.

우선 준비

 manifest.json 파일과 .png 파일을 만들기 전에 하나의 폴더로 관리하길 추천드립니다. 테스트 버전 업데이트시에 폴더를 그대로 올릴 수 있습니다. 그리고 .zip 파일로도 가능합니다. 실제 마켓에 등록할때는 .zip 파일로 압축해야 합니다.

 만들어진 폴더아래에  manifest .json, .png 파일이 함께 있다고 가정하고 설명하도록 하겠습니다.

링크 앱 제작

 링크앱을 제작하기 위해서는 제작 메뉴얼을 살펴보아야 합니다. 제작 메뉴얼은 크롬 웹 스토어 메뉴로 접근면 오른쪽에 설정 아이콘이 존재합니다. 클릭하시면 개발자 대시보드 메뉴로 접속하세요.

아래 와 같은 화면에서 apps(앱), extensions(확장 프로그램), publishing them(게시) 하는 방법의 각각 메뉴얼이 나와 있습니다. Hosted Apps는 apps로 접속하셔서 메뉴얼 확인 하실 수 있습니다. 또는 아래 주소로 접속하세요.

 apps 개발 문서 바로가기

  http://bit.thdev.net/Ibz1uJ

{
  "name": "Google Mail",
  "description": "Read your gmail",
  "version": "1.0.0",
  "manifest_version": 2,
  "app": {
    "urls": [
      "*://mail.google.com/mail/",
      "*://www.google.com/mail/"
    ],
    "launch": {
      "web_url": "http://mail.google.com/mail/"
    }
  },
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [
    "unlimitedStorage",
    "notifications"
  ]
}

위와 같은 코드를 확인 할 수 있습니다.

이름, 설명, 버전, 주소, Launch, icons 파일 명, 권환을 간단하게 작성하는 json 코드입니다.

위 코드는 구글의 mail로 바로 접속할 수 있는 코드입니다.

- 자세한 내용은 메뉴얼을 참고하세요. 메뉴얼은 한국어가 제공되지는 않습니다.-

name 간단 설명

 이름은 실제 프로그램 설치시에 보여지는 이름입니다. 저같은 경우에는 "thdev.net" 이라고 표시됩니다.

description 간단 설명

 응용프로그램에 대한 간단한 설명을 작성하시면 됩니다. 제외하셔도 상관 없습니다.

version 간단 설명

 해당 앱의 버전정보입니다. 버전정보는 1, 2, 3....n 으로만 가능합니다. 실제 업로드시 1으로 업로드했다가 1.0 으로 업로드했지만 큰 숫자의 변화가 없어서 업데이트가 안된다는 내용이 포함되어 있었습니다.

 2012. 12월 추가

 최신 버전에서부터는 1, 2, 3...n으로가 아닌 1.0.0 등의 사용자 설정이 가능하도록 변경되었습니다.

2012. 12월 추가

manifest_version 간단 설명

  Chrome 21 버전 이후부터는 manifest_version을 추가하여야 합니다.

urls 간단 설명

"app" 부분의 "urls"와 "launch" 2개의 부분이 있습니다. 

urls 부분에는 http로 시작하거나 https로 시작할 경우 위와 같이 *로 처리해주시면 됩니다.

 주의할 점은 www.example.com 로 시작하는 도메인을 추가하는 앱이 있고, 또 다른 링크앱을 만들기 위해서  www.example.com/mail 라는 도메인을 새로운 앱으로 추가하였을 경우 충돌이 날 수 있으니 주의하라는 내용이 있습니다.

마켓에 올릴 경우 주의 - 구글에서 인증 받은 URL의 소유권이 확인 되어야 합니다. 그렇지 않으면 게시 할 수 없습니다.

launch 간단 설명

 launch의 web_url은 절대적인 url이 와야 합니다. urls에서는 *://*google.com/ 등으로 처리했다면 launch에서는 실제 사용자가 프로그램을 실행했을 때 보여지는 행동이어야 합니다.

 그리고 중요한 것은 실제 마켓에 올릴 때 사용자 계정 확인이 가능해야 합니다. 다시 말해 본인이 운영하고 있는 홈페이지 주소를 구글에 인증 받아야 하며, 그 주소가 http://www.thdev.net/ 으로 인증을 받았을 경우 web_url 역시 http://www.thdev.net/ 으로 작성해주셔야 합니다. 그렇지 않으면 관리자 확인이 불가능하다고 하여 마켓에 업로드가 불가능합니다.

 기본 설정으로 현재 탭에서 실행되지만 옵션으로 새로운 탭으로 실행 하도록 할 수도 있습니다. 높이와 넓이 지정값도 존재합니다. 

icons 간단 설명

 icons는 사이즈 128과 96 사이즈가 있습니다. 128 사이즈가 기본 값이므로 128 사이즈의 아이콘을 제작하시면 됩니다. 96 사이즈는 실제사이즈가 96이 아닌 128 사이즈이며 128-96 사이즈 만큼은 투명한 배경이어야 한다고 합니다.

permissions 간단 설명

 권환 설정은 현재 동작하는 앱이 어떤 권환이 필요한지 정하는 부분입니다. Hosted Apps를 제작하시는 분은 "unlimitedStorage", "notifications" 의 권환을 주시면 됩니다.

위의 파일을 본인의 app의 내용으로 수정했다면 이제 파일을 저장해야 합니다. 파일 저장이름은 manifest.json 로 저장하셔야 합니다. 그리고 manifest.json 파일은 utf-8 형식으로 제작되어야 합니다.

개발자로 테스트

 이제 이미지와 manifest.json 파일이 완성되었습니다. 완성된 파일을 크롬의 개발자 테스트 모드로 업로드해보겠습니다. 크롬의 설정 아이콘 -> 설정 으로 접속하시거나, 설정아이콘 -> 도구 -> 확장 프로그램으로 접근하시면 됩닏.

파일 업로드

설정에서 확장 프로그램으로 이동합니다.

 확장 프로그램으로 이동하면 아래 사진과 같이 1.번 개발자 모드 체크를 확인 하시면 됩니다. 체크가 되어있고, 2번의 메뉴가 보인다면 아래 2번 메뉴인 압축해제된 파일 업로드 를 선택하시면 됩니다. 아니면 압축을 하셨다면 압축된 파일 업로드 를 선택하셔서 업로드 하시면 됩니다.

저는 압축 해제된 파일 업로드를 선택했기에 바탕화면에 있는 chrome_link 폴더를 선택했습니다.

업로드가 완료되면 확장 프로그램 아이콘, 이름, 버전정보, 압축해제된 파일, 사용 등의 간단한 정보가 보이게 됩니다.

위에서 description 을 입력했다면 아래 화면에서 간단한 설명이 보여지게 됩니다.

마무리

 간단하게 제 블로그로 연결되는 링크 프로그램을 제작해보았습니다. 다음 리뷰에 구글 웹 스토어 등록과 프로그램 업로드에 관해서 설명하도록 하겠습니다. 제가 업로드해둔 바로가기도 많이 이용해주셨으면 합니다.!^^;; 실제 스토어에 올리게 될 줄은 몰랐네요.