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?
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.
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"> </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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With