使用Greasemonkey或Tampermonkey添加JavaScript按钮？

我对Greasemonkey的世界相当陌生，我想知道如何用JavaScript制作一个按钮

比如说，我想在YouTube或谷歌上设置一个按钮？我该如何称呼它或使它成为现实

---

我很困惑，在上面找不到任何东西。除非有什么方法可以与这些网站的HTML交互并将它们添加到Greasemonkey脚本中？

好的，下面是一个完整的脚本，它在问题页面1中添加了一个live按钮：

/==UserScript==
//@name\u添加活动按钮
//@description添加带有样式的live example按钮。
//@match*://stackoverflow.com/questions/*
//@match*://YOUR_SERVER.COM/YOUR_PATH/*
//@grant GM_addStyle
//==/UserScript==
/*---在容器div中创建一个按钮。它将被设置样式并
定位与CSS。
*/
var zNode=document.createElement（'div'）；
zNode.innerHTML=“”
+“看在皮特的份上，别点击我！”
;
zNode.setAttribute（'id'，'myContainer'）；
document.body.appendChild（zNode）；
//---激活新添加的按钮。
document.getElementById（“myButton”）.addEventListener(
“单击”，按钮单击操作，错误
);
功能按钮ClickAction（zEvent）{
/*---对于我们的虚拟操作，我们只需在顶部添加一行文本
屏幕的另一端。
*/
var zNode=document.createElement（'p'）；
zNode.innerHTML='按钮已单击'；
document.getElementById（“myContainer”）.appendChild（zNode）；
}
//---使用CSS为我们新添加的元素设置样式。
GM_addStyle（`
#霉菌容器{
位置：绝对位置；
排名：0；
左：0；
字体大小：20px；
背景：橙色；
边框：3件黑色；
保证金：5px；
不透明度：0.9；
z指数：1100；
填充：5px20px；
}
#我的按钮{
光标：指针；
}
#霉素A{
颜色：红色；
背景：白色；
}
` );

---

---

1令人惊讶的是，这个问题以前似乎没有被这样问过。

如果你问我，你可以做得更小（使用HTML5 n es6），比如：

示例脚本（用于选择google收件箱中的所有已读电子邮件）：

---

很难相信你什么都找不到。Internet上一定有很多Greasemonkey教程。我想知道是否有办法更改按钮的背景图像。@YoussofHammoud，您可以使用CSS，如：

background:url（“https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png");，等等。
// ==UserScript==
// @name        _Adding a live button
// @description Adds live example button, with styling.
// @match       *://stackoverflow.com/questions/*
// @match       *://YOUR_SERVER.COM/YOUR_PATH/*
// @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 ( `
    #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 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)
    }

}())