Tampermonkey(탬퍼몽키)를 이용한 사이트 기능 확장

Tampermonkey(탬퍼몽키) 란?

어떤 사이트에 특정 기능을 추가해줬으면 하는데, 사이트 개발자에게 기능 추가에 대하여 이야기하기도 어렵고, 내용이 전달했다고 하여도 실제로 구현될지는 해당 개발자도 필요성을 느껴야만 추가가 될 것입니다.

Tampermonkey라는 확장 프로그램을 이용하면, 자바스크립트를 이용하여 사이트에 내가 원하는 기능을 추가하고 수정할 수 있습니다.

예를 들어, 매번 익숙한 댓글을 달아야 하는 경우에서 매번 동일한 문구를 입력하고, "확인" 버튼을 누르는 동작을 매번 하기가 귀찮아서, 버튼 하나를 누르면 자동으로 지정된 문구를 입력하고 저장하는 기능을 하는 버튼을 추가할 수 있습니다. 그러면 해당 사이트에서 새로 추가한 버튼을 누르면 미리 정의된 문구로 자동으로 댓글을 달 수 있습니다.

본 문서에서는 Tampermonkey(탬퍼몽키)라는 확장 프로그램을 이용하여 특정 사이트에 버튼을 추가하는 예제를 작성해 보겠습니다.

tampermonkey 스크립트 작성시 참고할 점

차근차근 한단계씩 작성

• 디버깅이 난해하기 때문에, 하나씩 정상 수행되는 코드 확인하며 진행
• @match 부터 적용하여, alert() 또는 console.log() 함수 등이 잘 동작하는지 확인
• 간단한 코드조차 정상적으로 적용이 안된다면 스크립트를 삭제하고 새로 만들어서 시도하는 것이 정신건강에 좋음 
• // ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match https://www.google.com/search?q=Tampermonkey // @icon https://www.google.com/s2/favicons?domain=google.com // @grant none // ==/UserScript== (function() { 'use strict'; // Your code here... alert('tampermonkey test!!!'); })();

@match가 잘 동작하는 것에서 앞서 작성한 예제 부분대신 실제 코드 추가하기

디버깅 방법

• 개발자 도구를 띄우고, 콘솔창의 오류 메시지들을 확인하여 코드를 올바로 수정
• 작성한 스크립트 코드의 라인과는 동떨어진 곳의 오류로 표시되기 때문에, 가급적이면 직접 콘솔에서 작성, 확인 후 Tampermonkey 스크립트에 적용하는 것을 추천
• 콘솔 직접 실행 예시:

  >> let elmCommentTxt = document.querySelector('#wr_content')
  undefined
  >> elmCommentTxt.value = '리뷰 잘 보고 갑니다.'
  '리뷰 잘 보고 갑니다.'
  >> submit_comment('viewcomment');
  jquery-1.8.3.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
  send @ jquery-1.8.3.min.js:2
  ajax @ jquery-1.8.3.min.js:2
  fviewcomment_submit @ board.php?bo_table=free&wr_id=1010:3062
  submit_comment @ comment.js:344
  (익명) @ VM10681:1
  undefined
  

Youtube download 스크립트를 활용한 "Commment" 추가 스크립트 작성

Youtube download 버튼을 추가하는 "y2mate" 스크립트를 참고하여 다음과 같이 댓글을 자동으로 추가하는 스크립트를 작성하여 적용합니다.

// ==UserScript==
// @name         auto comment
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  auto comment script
// @author       hbesthee@naver.com
// @match        https://*my-host.kr/bbs/board.php?bo_table=*&wr_id=*
// @icon         https://www.google.com/s2/favicons?domain=my-host.kr
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    var CommentMain = {
        DocOnLoad: function (o) {
            try {
                if (null != o && null != o.body && null != o.location) {
                    let elmTarget = o.querySelector(".view-good"),
                        elmCommentBtn = o.querySelector("#my_comment_btn");
                    if (null == elmCommentBtn) {
                        if (null == elmTarget) {
                            elmTarget = o.querySelector(".view-good-box").firstChild;
                        }

                        if (null != elmTarget) {
                            elmCommentBtn = CommentMain.NewCommentButton();
                            elmTarget.parentNode.insertBefore(elmCommentBtn, elmTarget);
                        }
                    }
                    if (null != elmCommentBtn) {
                        console.log("CommentMain : add NewCommentButton.");
                    }
                }
                return !0;
            } catch (e) {
                console.log("CommentMain.DocOnLoad. ", e);
            }
        },
        NewCommentButton: function () {
            try {
                let elmNewButton = document.createElement("button");
                elmNewButton.id = "my_comment_btn"; elmNewButton.className = "comment-btn-tooltip";
                elmNewButton.setAttribute("type", "button");
                elmNewButton.setAttribute("title", "Comment");
                elmNewButton.innerHTML = "Comment";
                elmNewButton.setAttribute("style", "min-height:25px; position:relative; top:1px; cursor: pointer; font: 13px Arial; background: #ff003e; color: #fff; text-transform: uppercase; display: block; padding: 10px 16px; margin: 20px 5px 10px 5px; border: 1px solid #ff0068; border-radius: 2px; font-weight:bold");
                elmNewButton.setAttribute("onmouseover", "this.style.backgroundColor='#c10841'");
                elmNewButton.setAttribute("onmouseout", "this.style.backgroundColor='#ff003e'");
                elmNewButton.addEventListener("click", function (a) {
                    let strComment = '감사합니다.';
                    let elmComment = document.querySelector('#wr_content');
                    if (document.location.href.includes('free')) {
                        strComment = '리뷰 잘 보고 갑니다.';
                    }
                    else if (document.location.href.includes('file')) {
                        strComment = '좋은 자료 감사합니다.';
                    }
                    elmComment.value = strComment;
                    submit_comment('viewcomment');
                    elmComment.scrollIntoView({block: "center"});
                }, !0);
                return elmNewButton;
            } catch (e) {
                console.log("NewCommentButton has error. ", e);
            }
        }
    };
    CommentMain.DocOnLoad(window.document);

})();

참고자료

https://www.tampermonkey.net/documentation.php?ext=dhdg ; official documentation

자바스크립트에서 문자열에서 특정 문자열 찾기 관련 함수
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/includes
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/lastIndexOf
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/search