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


im creating scripts (javascript) using tamper monkey. used scripts on platform create buttons , boxes enter text on website want script happen (for example creating button on google.com , when clicked function). have few examples tube mp4 converter thats directly on youtube website itself. (if helps) if requires html or css in not familiar languages. how create buttons , text boxes script put javascript code?

script

this code create button (add javascript button using greasemonkey or tampermonkey?) :

// ==userscript== // @name        _adding live button // @description adds live example button, styling. // @include     https://stackoverflow.com/questions/* // @grant       gm_addstyle // ==/userscript==  /*--- create button in container div.  styled ,     positioned 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 newly added button. document.getelementbyid ("mybutton").addeventlistener (     "click", buttonclickaction, false );  function buttonclickaction (zevent) {     /*--- our dummy action, we'll add line of text top         of screen.     */     var znode       = document.createelement ('p');     znode.innerhtml = 'the button 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; } 

Comments

Popular posts from this blog

angular - Is it possible to get native element for formControl? -

unity3d - Rotate an object to face an opposite direction -

javascript - Why jQuery Select box change event is now working? -