2007년 7월 9일 월요일

그리스몽키 스크립트(GreaseMonkey Script) 프로그래밍

1. 그리스몽키란?

파이어폭스 (Firefox) 일명 불여우의 확장팩(Extension)으로 기존 브라우저의 한계를 극복할 수 있는 다양한 기능을 자바스크립트를 이용하여 구현할 수 있으며, 다른 사람들이 만들어 놓은 스크립트를 웹사이트를 통해 공유할 수도 있다. 참고로 IEToy 라는 MS 인터넷 익스플로러에서도 그리스몽키를 사용할 수 있도록 해주는 플러그인이 있는데, 애석하게도 FF 와 호환은 대부분 되지 않으니 그저 참고하기 바란다. (나도 자세히는 모르지만 대충 훑어보니 ie7.0 도 지원하는 듯 함)


2. 메뉴얼 및 사용방법

사용방법은 별로 특별할 것이 없다. 아래 링크사이트 중 홈페이지로 가서 안내에 따라 다운로드 받고 설치하면 끝이다. 메뉴얼은 웹에서 볼 수도 있고 PDF 형식 또는 HTML 형식으로 다운로드하여 볼 수도 있다.(메뉴얼 제목이 아주 재미있다 "Dive into Greasemonkey" ^^)

1) 새로운 스크립트를 추가할때 즉, 이미 만들어진 다른 사람들이 올려놓은 스크립트를 설치하고 싶을때는 해당 홈페이지에서 적절한 스크립트를 검색한 다음 설치하면 된다. (클릭만으로 간단하게 설치 된다.)

그냥 한번 해보면 신기하고 재미있으니 http://userscripts.org/ 에서 "네이버" 로 검색한 후 네이버에서 광고들을 싹 없애주는 스크립트를 받아서 한번 설치 해보라. 신기할 따름이다. ^^

2) 유저 스크립트 즉, 자신이 만든 스크립트를 설치 하고자할때는(나는 방법을 몰라서 좀 해맸었따. ㅋ) 그냥 만들어진 *.user.js 파일을 마우스를 이용해 FF 의 창에다가 Drag & Drop 하면 끝.


3. 유저 스크립트 제작하기

역 시 홈페이지에 있는 메뉴얼을 보고 간단하게 따라하며 된다. 모든 language 의 처음 시작은 "Hello World" 부터. 메뉴얼에 있는 첫번째 예제 "Hello World" 를 한번 따라해보라. 아주아주 간단하니 꼭 한번 해보시길. 메뉴얼이나 그리스몽키 홈페이지에 이미 많은 레퍼런스가 잇으므로 기초적인 설명은 자세히 하지 않겠다. 다만, 몇가지 주의사항만 아래에 쓴다.

  1. 반드시 파일은 저장시 *.user.js 라는 확장명으로 저장
  2. 설치는 만들어진 파일을 FF 에다가 마우스로 Drag & Drop 으로 던지면 끝
  3. 파일내 @로 시작하는 주석을 성실히 작성할 것 특히 include 와 exclude, include 는 해당 스크립트를 사용할 페이지의 url 을 말하고, exclude 는 사용하지 않을 페이지의 url 을 말하며, * 를 이용한 batch 기능도 가능하다.

4. 그리스몽키로 크로스도메인(Cross Domain) 침범하기

그 럼 나름대로 노하우라고 생각이 되는 Cross Domain 영역을 설명하겠다. 일반적으로 사용하는 모든 브라우저들에서 기본적으로 Cross Domain 즉 현재 보고 잇는 페이지의 도메인과 다른 도메인 영역의 페이지의 object 를 사용하는 일은 차단되어 있다. 이유는 당연히 보안때문이다. 그래서 현존하는 어떤 기술을 쓰더라도 자신만의 브라우저를 직접 만들어 쓰지 않는 이상 이 부분은 안된다고 보면 된다.

실제로 본인도 혹시나 하는 마음에 Ajax 를 이용해서 단순히 remote url 에 접속하여 remote url 에 있는 DOM object 를 parsing 하는 테스트를 해봤다. 하지만 결과는 역시나 에러..
테스트 코드를 첨부하려다, 너무 누더기 소스라 ㅋㅋ 지우고 그냥 참고서적인 "Ajax 입문 (타카하시 토시로 저, 이창신 역, 한빛미디어)"의 일부를 발췌, 첨부한다.

크로스도메인의 보안을 위해, 대상 URL은 그것을 요구하는 페이지와 같은 도메인에 있어야 합니다. (p35, XMLHttpRequest 레퍼런스 > XMLHttpRequest 란)

하지만 그리스몽키에서는 된다. 물론 이 된다는 것은 그리스몽키가 client side 에서 자기 혼자 쓰는 것이므로 가능한 이야기일 것이다. 누군가 만든 스크립트가 해당 url 에 있는 서버측 소스코드를 건드려서 자신만이 아닌 다른 모든 해당 url 을 보는 사람들에게 영향을 미친다면 그것은 있어서는 안될 일일 것이다. 어쨋든 이미 만들어진 이러한 Cross Domain 을 이용한 스크립트들을 보면,

- Google 검색 결과와 타 사이트 검색결과를 merge 하기
- Amazon.com 의 검색 결과와 모 도서관의 검색결과를 merge 하기

와 같은 기능들이 있다. 하지만 소스를 다운 받아보면 굉장히 복잡하다. (자바스크립트를 잘 하는 사람들은 모르겠지만 본인은 그랬다.) 그래서 초심자들도 쉽게 이해할 수 있도록 소스코드를 살짝 정리해봤다.


1) test.user.js : 그리스몽키 스크립트 즉, FF 에 Drag & Drop 으로 설치해야할 스크립트이다.

// ==UserScript==
// @name    test
// @namespace   
http://www.goora.net
// @description    example script for Cross Domain
// @include    */test.html
// ==/UserScript==


function cross_domain(url)
{
    var req_obj = new Object();
    req_obj.method = 'GET';
    req_obj.url = url;
    req_obj.onload = function(responseDetails)
    {
        var body = document.getElementsByTagName("body")[0];
        var span = document.createElement("span");
        var result = document.createTextNode(responseDetails.responseText);
        span.appendChild(result);
        body.appendChild(span);
    }
    GM_xmlhttpRequest(req_obj);
}


var url = "http://www.goora.net/gm2.html";
cross_domain(url);

  • "GM_" 라는 prefix 가 붙은 method 들이 그리스몽키에서 지원하는 method 임.
  • GM_xmlhttpRequest 는 ajax 에서 사용하는 xmlhttpRequest 와 하는 일이 똑같다.
  • 메뉴얼에 Cross Domain 부분 예제는 Advanced Topic 파트의 Integrating data from other sites 인데, 위예제와 조금 다르다. GM_xmlhttpRequest 메소드의 인자로 object 를 넘겨줄때 object 를 만드는 방식이 Array 형식으로 좀 복잡해보여서 좀더 직관적으로 고쳐봤다.
  • 이유는 정확히 모르겠지만 remote url 에서 받아온 data 를 merge 할때 document.write 를 사용하면 무한루프에 빠지니 주의할 것. (테스트 결과 alert 는 괜찮고 innerHTML 은 해보지 않았다.)
  • 주석부분이 하는 일은 메뉴얼을 참고하기 바란다.

2) 로컬파일(test.html) : FF 에서 그리스몽키를 적용할 html 파일
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>
Greasemonkey TEST</TITLE>
</HEAD>
<BODY>

렌더링이 끝날때까지는 지금 이 텍스트만 보입니다.
</BODY>
</HTML>
  • 1)의 test.user.js 스크립트를 파이어폭스에 설치한 다음, 본 파일을 로컬 경로에 저장해두고(굳이 로컬경로에 있지 않더라도 리모트파일과 다른 도메인아래에 있기만하면 OK) 파이어 폭스로 이 파일을 열면된다.
  • 그리스몽키는 local url 의 랜더링이 모두 끝났다음에 브라우저에서 별도로 동작하기때문에 local url 의 랜더링이 끝나고 remote url 과의 http 통신이 끝난 후에 적용된 화면이 보일 것이다.
3) 리모트파일(http://www.goora.net/gm2.html) : test.user.js 파일의 GM_xmlhttpRequest 가 call 할 remote file 이다.

Wonderful Goora*Net
  • 본 파일을 gm2.html(만약 test.user.js 스크립트의 remote url 을 수정했다면 그 url 로)라는 이름으로 특정 도메인에 저장을 한 후 테스트해보라. 적당한 도메인이 없다면 본인이 당분간 지우지않고 유지할테니 파일이 존재하는지 확인해보고 있다면 이놈을 이용하기 바란다.


4) 확인하기 : 본인의 guide 를 성공적으로 따랐다면 test.html 을 파이어폭스를 통해 열었을때 아래 첫번째 첨부이미지와 같이 test.html 파일의 내용이 보이다가 잠시후, 두번째 첨부 이미지와 같이 바뀔 것이다.

- test.html 의 렌더링이 끝난을 때

사용자 삽입 이미지


- http 통신을 마친후 스크립트가 성공적으로 실행된 화면

사용자 삽입 이미지


사 실 아직 본인도 그리스몽키나 Ajax 에 전문가는 아니다. 본인의 주업무와도 다소 동떨어진 것도 사실이고. 하지만 혹시 관심이 있는데 적절한 레퍼런스를 못찾은 사람이 있다면(나처럼 ㅡ.ㅜ), 먼저 해본 사람으로서 조금이나마 도음이 되었으면 하는 마음에 부족하나마 한번 적어본다.


5. References

< 그리스몽키 관련 >
- 그리스몽키 스크립트 홈페이지
- 그리스몽키 다운로드
- 그리스몽키 메뉴얼 페이지
- 그리스몽키 유저스크립트 배포하기
- 다른사람이 만든 그리스몽키 스크립트 찾아보기

< 자바스크립트 관련 >
- 자바스크립트 참고페이지 - (1)
- 자바스크립트 참고페이지 - (2)
- Ajax 참고 페이지

< 기타 >
- IEToy (익스플로러용 그리스몽키)