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?
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
Post a Comment