ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 크롬 확장프로그램 (Chrome Extension)
      웹 2016. 5. 21. 14:05

      모바일의 앱스토어 처럼 구글에도 웹스토어가 존재합니다. 이에 어떻게 크롬 확장프로그램을 개발할지와 이를 이용해 ajax를 호출하는 확장프로그램 개발을 설명하겠습니다.

      개발

      확장프로그램을 개발하기 위해서는 html과 자바스크립트를 사용할 수 있어야 합니다.

       https://developer.chrome.com/extensions 해당 url에서 익힐 수 있지만 여기서는 테스트 api에 ajax 호출을 하는 프로그램을 개발할 수 있도록 진행하겠습니다.

      manifest.json

      매니페스트에 정의된 것으로 크롬이 해당 확장프로그램을 인식하고 어떻게 동작할 지 확인합니다. 자세하게 확장 프로그램의 이름, 설명, 어떠한 파일이 먼저 실행될 지, 사용하는데에 필요한 퍼미션은 무엇인지 등을 기술합니다.

      아래의 예는 사무실 문을 여는 확장프로그램의 manifest입니다.

      {
    "manifest_version": 2,
    "name": "테스트",
    "description": "테스트입니다.",
    "version": "1.0",
    "background": {
        "scripts": ["door.js"]
    },
    "browser_action": {
        "default_icon": "open.png",
        "default_popup":"door.html"
    },
    "permissions": [
        "tabs",
        "contextMenus",
        "<all_urls>"
    ]
} 

      manifest_version : 해당 매니페스트의 버전을 표시합니다.

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

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

      version : 확장프로그램의 현재 버전을 나타냅니다.

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

      browser_action : 해당 프로그램이 크롬에 등록될 시, 주소창 우측에 아이콘이 생깁니다. 이때 어느 아이콘으로 할지, 기본 아이콘과 해당 아이콘을 클릭 시, 어느 .html로 이동할지 기본값을 정합니다.

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

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

      • tabs: 클릭 시, 새로운 탭이 오픈되도록 하는 권한입니다.
      • contextMenus : 마우스 오른쪽을 눌렀을 때 동작하도록 하는 권한입니다.
      • <all_urls>: 모든 url에서 해당 프로그램을 사용할 수 있도록 하는 권한입니다.


      위와 같이 굵은 글씨로 정리된 내용을 제외하고 크롬에서 제공하는 더 많은 API를 알고 싶거나 해당 API에 대해 더 자세히 알고 싶다면 https://developer.chrome.com/extensions/api_index 에서 확인할 수 있습니다.

      js

      위의 json파일에서 background로 door.js파일 호출하도록 만들었습니다. 

      var req;
function openURL(){
    var msg = {
			body: {
				필요한 부분 기재
			},
			header: {
				필요한 부분 기재
			}
		};
    req = new XMLHttpRequest();
    req.onreadystatechange = handleStateChange;
    req.open("POST",ip주소 및 url,false);
    req.setRequestHeader("content-Type","application/json;charset=utf-8");
    req.send(JSON.stringify(msg));
}
function handleStateChange(){
    if(req.readyState == 4){
            if(req.status == 200){
                //alert("성공: "+req.responseText);
            }else{
                //alert("실패: "+req.status);
            }
        }
}
//마우스 오른쪽을 눌렀을 때, 반응하는 부분
chrome.contextMenus.create({"title":"테스트입니다.", "contexts":["all"], "onclick":openURL});
//window.onload = test;


      마우스 오른쪽을 클릭하면 해당 프로그램이 실행되면서 위에 정의한 chrome.contextMenus.create 해당부분이 실행됩니다. 

      chrome.contextMenus.create
      • title : 오른쪽 클릭 시 메뉴에서 보이는 제목입니다.
      • contexts : 오른쪽 클릭에도 여러 상황이 있습니다. 가령 빈 페이지에서 오른쪽 클릭을 할 경우, 이미지에 오른쪽 클릭을 할 경우 등등 많은 상황이 있는데 이러한 상황들을 체크해주는 옵션입니다. 위에서는 all로 정의해서 어떠한 상황에서도 동작합니다. 
      • onclick : 메뉴에서 해당 프로그램을 클릭했을 시 호출할 함수

      create에 대한 더 많은 함수 및 함수 정의는 https://developer.chrome.com/extensions/contextMenus#method-create 에서 확인할 수 있습니다.


      위에서는 크롬에서 제공하는 API중 contextMenus의 create 함수에 대해서만 설명을 했지만 https://developer.chrome.com/extensions/samples#search 에서 사용할 퍼미션에 대해 검색하고 정보를 찾을 수 있습니다.

      다른 블로그들을 확인하면 jquery를 사용해 동작한다고 나와있는데 직접 해본결과 jquery를 사용한 ajax호출이 되지 않은 것으로 확인했습니다.

      html

      매니페스트 파일에서 기본 html 파일을 아래의 door.html로 정의했습니다.

      <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            BODY {width : 200px; min-height:30px;}
        </style>
    </head>
    <body>
        <p>마우스 오른쪽으로 써주세요.</p>
    </body>
</html>

      크롬 확장프로그램을 설치 후 활성화를 시키면 주소창 오른쪽에 아이콘이 생기면서 클릭을 할 수 있습니다. 여기서는 해당 아이콘을 클릭하면 정의한 문구가 나오도록 설정했습니다.

      등록하기

      위에서 정의한 매니페스트 파일, html, js, 아이콘 파일을 door라는 하나의 폴더에 이동시킵니다.

      다음 구글 확장프로그램으로 이동해 우측에 있는 개발자 모드의 체크박스를 활성화 시킵니다.


      체크박스 활성화 시, 압축해제된 확장프로그램 로드... 버튼이 생기는데 해당버튼을 클릭한 후, door 폴더를 선택해 줍니다.

      새로고침을 하면 활성화가 된 것을 확인할 수 있습니다.


      관련글 관련글 더보기

      댓글

    티스토리툴바