Greasemonkey 스크립트에서 사용자 정의 양식/대화 상자를 표시하려면 어떻게합니까?

Question

저는 파이어 폭스에서 플러그인으로 사용하기 위해 스크립트 작업을 해왔고 특정 버튼을 클릭 할 때 커스텀 폼을 팝업 할 필요성을 알게되었습니다.

전체 양식을 직접 작성한 다음 입력 된 데이터를 구문 분석하여 원본 사이트에서 이미지를 렌더링 할 수 있어야합니다.

어떻게하면됩니까?

Answer 1

좋아, 여기에 완전한 스크립트 예를 들어 양식을 팝업하고 컨트롤과 상호 작용하는 방법을 보여줍니다.
jQuery을 사용한다는 점에 유의하십시오. 이로써 훨씬 더 쉽고 빠르며 간단 해집니다.

// ==UserScript== 
// @name  _Form, popup example 
// @include  http://stackoverflow.com/* 
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 
// @grant  GM_addStyle 
// ==/UserScript== 
/*- The @grant directive is needed to work around a design change 
    introduced in GM 1.0. It restores the sandbox. 
*/ 

//--- Use jQuery to add the form in a "popup" dialog. 
$("body").append ('               \ 
    <div id="gmPopupContainer">            \ 
    <form> <!-- For true form use method="POST" action="YOUR_DESIRED_URL" --> \ 
     <input type="text" id="myNumber1" value="">       \ 
     <input type="text" id="myNumber2" value="">       \ 
                       \ 
     <p id="myNumberSum">&nbsp;</p>          \ 
     <button id="gmAddNumsBtn" type="button">Add the two numbers</button> \ 
     <button id="gmCloseDlgBtn" type="button">Close popup</button>   \ 
    </form>                 \ 
    </div>                 \ 
'); 


//--- Use jQuery to activate the dialog buttons. 
$("#gmAddNumsBtn").click (function() { 
    var A = $("#myNumber1").val(); 
    var B = $("#myNumber2").val(); 
    var C = parseInt(A, 10) + parseInt(B, 10); 

    $("#myNumberSum").text ("The sum is: " + C); 
}); 

$("#gmCloseDlgBtn").click (function() { 
    $("#gmPopupContainer").hide(); 
}); 


//--- CSS styles make it work... 
GM_addStyle ("             \ 
    #gmPopupContainer {           \ 
     position:    fixed;       \ 
     top:     30%;       \ 
     left:     20%;       \ 
     padding:    2em;       \ 
     background:    powderblue;      \ 
     border:     3px double black;    \ 
     border-radius:   1ex;       \ 
     z-index:    777;       \ 
    }               \ 
    #gmPopupContainer button{         \ 
     cursor:     pointer;      \ 
     margin:     1em 1em 0;      \ 
     border:     1px outset buttonface;   \ 
    }               \ 
"); 

---

당신은 대화가 아주 기본적인 것을 알게 될 것이다

. 더 복잡한 양식의 경우 jQuery-UI을 사용할 수 있습니다.