Chrome Extension(확장기능) 개발

Google Chrome Extensions

http://developer.chrome.com/extensions

크롬 확장기능 개발은 너무 쉽다. 또한 강력하다. 크롬 웹 스토어에 가면 구글 메일, 구글 캘린더, 구글토크 까지 API를 보면 웹으로 할 수 있는 거의 모든것이 가능하다. 백그라운드로 데이터를 기다리거나 다른 서버와 데이터를 주고받아 표시하는것 또한 쉽게 가능하다.

전에부터 만들고 싶었던 최저가 검색 Extension을 만들어 보기로 했다.

최저가 검색에는 about.co.kr(http://about.co.kr) 을 이용했다. 관련된 OpenAPI가 있는지 확인하였으나

찾지못하였다. 그래스 그냥 새로운탭으로 about.co.kr을 표시하는 간단한 기능을 구현하였다.

<완성된 모습>

기본적으로 두가지 파일이 필요하다. JSON 형식의 manifest파일과, 실제 코드가 있는 js파일이다. chrome extension은 기본적으로 Javascript로 만들어저있다. 그래서 Javascript API는 모두 사용가능하다.

또한 chrome API도 사용가능하다. 이로인해 파일 핸들링 까지 가능하다.(http://developer.chrome.com/extensions/api_index.html)

소스

1. manifest

{
  "name": "ABOUT 최저가 검색",
  "description": "Lowest Price Search(using about.co.kr)",
  "version": "0.1",
  "permissions": ["contextMenus", "tabs"],
  "background": {
    "scripts": ["lps.js"]
  },
  "manifest_version": 2
}

2. Javascript

var searchUrl = "http://finding.about.co.kr/Search/Search.aspx?Keyword=";

function createLPSTab(code) {
  var args = {
    'url': searchUrl + code,
    'selected': true
  };
  
  try {
    chrome.tabs.create(args);
  } catch (e) {
    alert(e);
  }
}

function lpsOnClick(info, tab) {
  createLPSTab(info.selectionText);
}

// Create one test item for each context type.
var contexts = ["selection","editable"];
for (var i = 0; i < contexts.length; i++) {
  var context = contexts[i];
  var title = "%s 최저가 검색";
  var id = chrome.contextMenus.create({"title": title, "contexts":[context], "onclick": lpsOnClick});
}

디렉토리에 특정소스를 저장하고 브라우저에서 chrome://chrome/extensions 로 이동한다.

개발자 모드를 체크하면 새로운 버튼이 두개 나온다. 여기서 "압축해제된 확장 프로그램 로드..." 버튼을 눌러 manifest와 js파일이 있는 디렉토리를 선택하면 extension이 동록된다.

확장프로그램 압축을 하면 개인키를 필요로 한다. 없는 경우 그냥 누르면 자동으로 생성해 준다.

이제 크롭 웹스토어 개발자 대시보드(https://chrome.google.com/webstore/developer/dashboard)로 이동하여 새로만든 Extension을 등록하자.

처음 개발자 등록할 때는 5$의 비용이 발생하므로 잘 생각하자!!