marzPT marzPT - 1 year ago 237
Javascript Question

How to create buttons and text enters with javascript in scripts. (Tampermonkey)

Im creating scripts (Javascript) using tamper monkey. The most used scripts on this platform create buttons and boxes to enter text on the website they want the script to happen (for example creating an extra button on and when clicked it does a function). I have a few examples like a you tube to mp4 converter thats directly on the youtube website itself. (If this helps) If this requires HTML or CSS In not really familiar with those languages.
How do I create buttons and text boxes like this script to put into my JavaScript code?


Answer Source

This code will create a button (Add a JavaScript button using Greasemonkey or Tampermonkey?) :

// ==UserScript==
// @name        _Adding a live button
// @description Adds live example button, with styling.
// @include*
// @grant       GM_addStyle
// ==/UserScript==

/*--- Create a button in a container div.  It will be styled and
    positioned with CSS.
var zNode       = document.createElement ('div');
zNode.innerHTML = '<button id="myButton" type="button">'
                + 'For Pete\'s sake, don\'t click me!</button>'
zNode.setAttribute ('id', 'myContainer');
document.body.appendChild (zNode);

//--- Activate the newly added button.
document.getElementById ("myButton").addEventListener (
    "click", ButtonClickAction, false

function ButtonClickAction (zEvent) {
    /*--- For our dummy action, we'll just add a line of text to the top
        of the screen.
    var zNode       = document.createElement ('p');
    zNode.innerHTML = 'The button was clicked.';
    document.getElementById ("myContainer").appendChild (zNode);

//--- Style our newly added elements using CSS.
GM_addStyle ( multilineStr ( function () {/*!
    #myContainer {
        position:               absolute;
        top:                    0;
        left:                   0;
        font-size:              20px;
        background:             orange;
        border:                 3px outset black;
        margin:                 5px;
        opacity:                0.9;
        z-index:                222;
        padding:                5px 20px;
    #myButton {
        cursor:                 pointer;
    #myContainer p {
        color:                  red;
        background:             white;
*/} ) );

function multilineStr (dummyFunc) {
    var str = dummyFunc.toString ();
    str     = str.replace (/^[^\/]+\/\*!?/, '') // Strip function () { /*!
            .replace (/\s*\*\/\s*\}\s*$/, '')   // Strip */ }
            .replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them.
    return str;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download