如何創建按鈕和文本在JavaScript腳本中輸入。 （Tampermonkey）

Question

我使用篡改猴子創建腳本（Javascript）。該平臺上最常用的腳本創建按鈕和框，以在他們希望腳本發生的網站上輸入文本（例如，在google.com上創建一個額外的按鈕，並在點擊它時執行功能）。我有幾個例子，像你管到MP4轉換器這就是直接在YouTube網站上。 （如果這有幫助）如果這需要HTML或CSS在真正不熟悉這些語言。 如何創建像這樣的腳本的按鈕和文本框放入我的JavaScript代碼？

Script

Answer 1

此代碼將創建一個按鈕（Add a JavaScript button using Greasemonkey or Tampermonkey?）：

// ==UserScript== 
// @name  _Adding a live button 
// @description Adds live example button, with styling. 
// @include  https://stackoverflow.com/questions/* 
// @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; 
}