Add a JavaScript button using Greasemonkey or Tampermonkey?

Question

I am fairly new to the world of Greasemonkey and I was wondering how to make a button in JavaScript.

Say I wanted to put a button on YouTube or Google for instance? How would I go about calling it or making it?

I'm very confused and cant find anything on it. Unless is there someway to interact with the HTML of these sites and add them to Greasemonkey scripts?

It's somewhat hard to believe that you can't find anything. There must be *dozends* of Greasemonkey tutorials on the Internet. — Tomalak, Jun 25 '11 at 19:43
And yet somehow, _this_ page is the first thing that appears on google. — user2102929, Jul 05 '23 at 01:40

Brock Adams · Answer 1 · 2018-12-17T18:37:26.197

Ok, here's a complete script that adds a live button to SO question pages¹:

// ==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;
    }
` );

¹ Surprisingly, this question doesn't seemed to have been asked quite this way on SO before.

I was wondering if there was a way to change the background image of the button. — Joe, Jun 09 '19 at 21:29
@YoussofHammoud, you would use CSS like: `background: url("https://interactive-examples.mdn.mozilla.net/media/examples/lizard.png");`, etc. — Brock Adams, Jun 09 '19 at 22:25
In GreaseMonkey 4 and later addStyle has been removed so you need to set the position by setting the attributes of the elements directly. — Kevin Whitefoot, Aug 10 '21 at 17:53
I just came here, as I was looking for the exact same thing. But I am wondering how I could tweak the code, in order to hide and unhide the HTML - not adding more HTML whenever the button is clicked (: — Vanassins, Mar 22 '23 at 13:12

score 16 · Answer 2 · answered Oct 08 '16 at 13:30

if you ask me, you can do it lot smaller( with HTML5 n es6) like:

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
}

example script (for selecting all the read emails in google inbox):

// ==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)
    }

}())

Add a JavaScript button using Greasemonkey or Tampermonkey?

2 Answers2

Linked

Related