javascript - 使用 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.
// @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;
    }
` );

---

¹ 令人惊讶的是，以前似乎并没有在 SO 上以这种方式问过这个问题。