使用Greasemonkey或Tampermonkey添加JavaScript按鈕？

Question

我對Greasemonkey的世界相當陌生，而且我在徘徊如何在JavaScript中製作一個按鈕。

假設我想在YouTube或Google上放一個按鈕？我將如何去調用它或做它？

我很困惑，找不到任何東西。除非有與這些網站的HTML交互並將它們添加到Greasemonkey腳本的方式嗎？

Answer 1

好吧，這裏是一個完整的劇本，增加了一個活釦，以SO問題頁：

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

---

出人意料的是，這個問題不顯得在SO之前就已經被這樣問過了。

Answer 2

如果你問我，你可以做小了很多（與HTML5ñES6），如：

function addButton(text, onclick, cssObj) { 
    cssObj = cssObj || {position: 'absolute', bottom: '7%', left:'4%', 'z-index': 3} 
    let button = document.createElement('button'), btnStyle = button.style 
    document.body.appendChild(button) 
    button.innerHTML = text 
    button.onclick = onclick 
    btnStyle.position = 'absolute' 
    Object.keys(cssObj).forEach(key => btnStyle[key] = cssObj[key]) 
    return button 
} 

示例腳本（用於選擇在谷歌的收件箱中的所有閱讀電子郵件）：

// ==UserScript== 
// @name  mark unread 
// @namespace all 
// @include  https://inbox.google.com/* 
// @version  1 
// @grant  none 
// ==/UserScript== 

(function(){ 
    'use strict' 

    window.addEventListener('load',() => { 
    addButton('select read', selectReadFn) 
    }) 

    function addButton(text, onclick, cssObj) { 
     cssObj = cssObj || {position: 'absolute', bottom: '7%', left:'4%', 'z-index': 3} 
     let button = document.createElement('button'), btnStyle = button.style 
     document.body.appendChild(button) 
     button.innerHTML = text 
     button.onclick = onclick 
     Object.keys(cssObj).forEach(key => btnStyle[key] = cssObj[key]) 
     return button 
    } 

    function selectReadFn() { 
     [...document.getElementsByClassName('MN')].filter(isRead).forEach(element => element.click()) 
    } 

    function isRead(element) { 
     childs = element.parentElement.parentElement.parentElement.getElementsByClassName('G3') 
     return ![...childs].some(e => e.innerText.search(/unread/i)!==-1) 
    } 

}())