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?
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.
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) } }())
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With