Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add a JavaScript button using Greasemonkey or Tampermonkey?

Tags:

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?

like image 299
paul Avatar asked Jun 25 '11 19:06

paul


2 Answers

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

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




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

like image 92
Brock Adams Avatar answered Sep 20 '22 19:09

Brock Adams


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)     }  }()) 
like image 21
mido Avatar answered Sep 21 '22 19:09

mido