Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I pop up a custom form/dialog in a Greasemonkey script?

I have been working on a script to use as a plugin in Firefox, and have come across the need to pop up a custom form when a certain button is clicked.

I need to be able to create the entire form myself and then parse the entered data to render images on the original site.

How do I do this?

like image 975
CSadosky Avatar asked Jul 26 '12 11:07

CSadosky


People also ask

Do Greasemonkey scripts work in Tampermonkey?

Tampermonkey. Tampermonkey is one of the most popular browser extensions with over 10 million users. Tampermonkey is used to run so-called userscripts (sometimes also called Greasemonkey scripts) on websites.


1 Answers

Okay, here is a complete script example, showing how to pop up a form and interact with its controls.
Note that it uses jQuery -- which makes it vastly easier/shorter/simpler.

// ==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;          \
    }                                                           \
" );



You'll note that the dialog is pretty basic. For more sophisticated forms, you can use jQuery-UI.

like image 139
Brock Adams Avatar answered Nov 15 '22 04:11

Brock Adams