일전에 소개한 바 있는 그리스몽키 스크립트를 이용하여, 특정 사이트의 로그인을 자동으로 해주는 초간단 스크립트를 만들어 보았다. 사실 다 만들고 나니까 초간단이지 어리버리 하다보니 만드는데 10시간은 족히 걸린 듯 하다.
만들면서 힘들었던 점, 느낀 점이라면,
Source Code
Concepts
컨셉은 간단하다.
Details
이상의 Concepts 을 구현하기 위하여 처음에는 "document.formname.submit();" 과 같이 단순하게 시도를 해봤지만 역시나 실패했다. 그래서 그리스 몽키의 메뉴얼인 "Dive into Greasemonkey" 를 찾아보니 form submit 과 관련된 아래와 같은 내용이 있었다. (친절히 번역도 한번 해봤다.. ㅋㅋㅋ)
문제는, 여기 나와있는 소스만 갖고는 해결이 안된다는 거.. ㅡ.ㅡ. 그래서 덕분에 삽질만 하게 됐었다는 거.. 그래도 소득은 있었다. DOM 객체를 이용할 경우 이러한 예외 상황이 있을 수 있다는 것을 알게 된 거지..
References
그리스몽키 메뉴얼 페이지 : http://diveintogreasemonkey.org/toc/
자바스크립트 메뉴얼 및 예제 : http://koxo.com/lang/js/index.html
만들면서 힘들었던 점, 느낀 점이라면,
- 생경한 DOM control 이 힘들었고,
- 참 공부를 많이 해야겠구나 란 생각과
- 드디어 해냈구나 라는 성취감?? ㅋㅋ 이 들었다.
- Tistory 에도 테터툴즈나 다른 설치형 블로그처럼 소스코드 하이라이팅 플러그인이 있었음 좋겠다. 아님 설치라도 가능하게 해주던지.. ㅡ.ㅡ 소스코드 올릴때 마다 색깔 입히기 너무 힘들어 ㅠ.ㅠ
Source Code
1 // ==UserScript== 2 // @name Login Auto Manager 3 // @namespace http://goora.net 4 // @description Manage Login Automatically 5 // @include http://somewhere.com/login/*
6 // ==/UserScript== 7 8 var id = "Your ID"; 9 var pwd = "Your Password"; 10 11 var form = document.getElementsByTagName("form")[0]; 12 var input = document.getElementsByTagName("input"); 13 eval("input[0].value='" + id + "'"); 14 var form_pwd = document.getElementById("pass_word"); 15 eval("input[1].value='" + pwd + "'"); 16 17 form.submit();
Concepts
컨셉은 간단하다.
- 자동 로그인을 원하는 페이지의 DOM 구성이 하나의 form 또는 로그인 관련 폼이 가장 첫번째 form element 이고, (11번 라인)
- 그 form 의 첫번째 input 태그가 id, 두번째가 password 일 경우를 가정했을 때, (13, 15 번 라인)
- http://somewhere.com/login 이라는 페이지에 있는 각각 id, pass_word 란 name 을 갖는 input 태그의 value 에 (12, 14 번 라인)
- 각각 id 와 pwd 변수에 담아 놓은 "Your ID", "Your Password" 를 대입하고 (13, 15 번 라인)
- 이상의 input 태그들이 들어있는 form 을 submit 하는 것이다. (17 번 라인)
Details
이상의 Concepts 을 구현하기 위하여 처음에는 "document.formname.submit();" 과 같이 단순하게 시도를 해봤지만 역시나 실패했다. 그래서 그리스 몽키의 메뉴얼인 "Dive into Greasemonkey" 를 찾아보니 form submit 과 관련된 아래와 같은 내용이 있었다. (친절히 번역도 한번 해봤다.. ㅋㅋㅋ)
A
예컨대, form 의 submit 버튼을 클릭한다거나, 커서를 폼에 둔채로 엔터를 치거나 할 때와 같이, 유저가 일반적으로 폼을 서밋할때 submit 이벤트가 발생한다. 하지만, "aForm.submit()" 과 같이 스크립트를 통해 form 을 submit 하려고 하면 submit 이벤트는 발생하지 않는다. 따라서 form submit 을 위해서는
submit event fires when a user submits a form in the usual way, i.e. by clicking the form's Submit button or hitting ENTER within a form. However, the submit event does not fire when the form is submitted via a script calling aForm.submit(). Therefore you need to do two things to capture a form submission: add an event listener to capture to submit event, and modify the prototype of the HTMLFormElement class to redirect the submit() method to your custom function.예컨대, form 의 submit 버튼을 클릭한다거나, 커서를 폼에 둔채로 엔터를 치거나 할 때와 같이, 유저가 일반적으로 폼을 서밋할때 submit 이벤트가 발생한다. 하지만, "aForm.submit()" 과 같이 스크립트를 통해 form 을 submit 하려고 하면 submit 이벤트는 발생하지 않는다. 따라서 form submit 을 위해서는
- submit 이벤트를 캡쳐하기 위해 "Event Listener" 를 추가해야하며,
- 또한 submit() 메소드를 우리가 form submit 을 위해 만든 함수로 redirect 시키기 위해 "HTMLFormElement 클래스" 의 "Prototype" 을 수정해야하는 두가지 추가 작업이 필요하다.
문제는, 여기 나와있는 소스만 갖고는 해결이 안된다는 거.. ㅡ.ㅡ. 그래서 덕분에 삽질만 하게 됐었다는 거.. 그래도 소득은 있었다. DOM 객체를 이용할 경우 이러한 예외 상황이 있을 수 있다는 것을 알게 된 거지..
References
그리스몽키 메뉴얼 페이지 : http://diveintogreasemonkey.org/toc/
자바스크립트 메뉴얼 및 예제 : http://koxo.com/lang/js/index.html
이올린에 북마크하기
이올린에 추천하기'Programming 이야기' 카테고리의 다른 글
| MacOSX 에 개발환경 구축하기 (0) | 2007/11/15 |
|---|---|
| MySQL :: SELECT 쿼리 결과를 파일로 저장하기 (0) | 2007/11/03 |
| GreaseMonkey 이용하여 Form submit 하기 (0) | 2007/07/12 |
| Perl 을 이용하여 Date Type 을 Unix Timestamp 로 변환하기 (0) | 2007/06/18 |
| JSP 오픈소스 게시판 유니콘(Unicorn) (1) | 2007/05/28 |
| MySQL 초기화 스크립트 (0) | 2007/05/09 |
댓글을 달아 주세요