Skip to Content
Go Back
안형우

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

📌 워드프레스, 답답한 빌더와 플러그인 대신 시원하게 커스터마징하기(강의) 2023-01-15
📌 아무도 말하지 않는 PHP의 좋은 점 2018-10-13
📌 유지보수하기 쉬운 CSS 전략(슬라이드) 2016-12-20
📌 워드프레스 테마에서 템플릿 파일 매칭 순서 2013-05-12
📌 [번역] CSS 코드 냄새 2013-01-01

[Tip] 개발시 자동으로 폼 정보 채우게 하는 가장 속편한 방법 – GreaseMonkey(Firefox), TamperMonkey(Chrome) + jQuery 사용하기

개발을 하다 보면 참가 신청, 주문 정보 등등 폼을 채우고 테스트를 해야 하는 경우들이 생긴다.

이걸 편하게 하려고 자동으로 폼을 채워 주는 플러그인을 써 보기도 했고, 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 변수를 사용할 수 있다.

안녕하세요. 14년차 풀스택 웹개발자 안형우입니다. 이 블로그에서는 WordPress, PHP, CSS, 사용성, 리눅스 서버 등 풀스택 웹개발에서 마주하는 다양한 문제 상황과 해결책, 필요한 개념들을 다룹니다. 👉 소개


작업물

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다