개발을 하다 보면 참가 신청, 주문 정보 등등 폼을 채우고 테스트를 해야 하는 경우들이 생긴다.
이걸 편하게 하려고 자동으로 폼을 채워 주는 플러그인을 써 보기도 했고, js 코드로 박아 넣은 적도 있다. 그런데 자동으로 폼을 채워 주는 플러그인은 만족스럽게 작동하지 않았고, js 코드로 박아 넣는 건 실수로 사이트에 올릴까 봐 스트레스를 받으면서 개발을 해야 했다.
클라이언트 단에서만 js를 작동하게 하는 방법은 없을까 하는 고민을 하다가 크롬 확장을 뒤져 봤다. JavaScript Injector 라는 플러그인이 있었는데, URL을 딱 하나만 사용해야 한다는 문제가 있었다. 내가 개발하는 놈은 URL이 동적으로 바뀌는 것이었기 때문에 적용할 수 없었다.
GreaseMonkey
그러다가 파이어폭스 플러그인인 그리스몽키 GreaseMonkey 를 떠올렸다. 크롬 확장으로는 탐퍼몽키 TamperMonkey라는 놈이 있었다. 그래서 당장 설치를 했다.
그리고 UserScript로 아래와 같이 만들어서 넣었다.
// ==UserScript==
// @name 자동으로 주문정보 넣기
// @namespace https://mytory.net/?p=2650
// @version 0.1
// @description @require를 사용해야 jQuery를 사용할 수 있다.
// @match http://target-url.com/?item=*
// @require http://code.jquery.com/jquery-latest.js
// @copyright 2012+, You
// ==/UserScript==
(function(){
jQuery('[name="code"]').click();
jQuery('[name="bankUid"]').val(6);
jQuery('[name="depositor"]').val('asdf');
jQuery('input[data-initcode="orderer"]').click();
})();
위 코드를 참고해서 각자 만들어 사용하면 될 거다.
GreaseMonkey, TamperMonkey 에서 jQuery 사용하기
jQuery를 사용하면 훨씬 코드를 빨리 짤 수 있는데, 그리스몽키와 탐퍼몽키 안에서는, 웹사이트에 들어가 있는 jQuery를 사용할 수 없었다. 왜 그런진 모르겠지만 여튼 안 됐다. 그래서 좀 찾았는데, UserScript 사이트에서 해답을 얻을 수 있었다. 위 코드에서
// @require http://code.jquery.com/jquery-latest.js
이 부분이 핵심이다. 이 부분을 넣어 주면 그 때부터 jQuery 변수를 사용할 수 있다.
댓글 남기기