使用 Greasemonkey 或 Tampermonkey 添加 JavaScript 按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6480082/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add a JavaScript button using Greasemonkey or Tampermonkey?
提问by paul
I am fairly new to the world of Greasemonkey and I was wondering how to make a button in JavaScript.
我对 Greasemonkey 的世界相当陌生，我想知道如何在 JavaScript 中制作按钮。
Say I wanted to put a button on YouTube or Google for instance? How would I go about calling it or making it?
比如说我想在 YouTube 或 Google 上放置一个按钮？我将如何调用它或制作它？
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?
我很困惑，找不到任何关于它的东西。除非有什么方法可以与这些站点的 HTML 交互并将它们添加到 Greasemonkey 脚本中？
回答by Brock Adams
Ok, here's a complete script that adds a live button to SO question pages1:
好的，这是一个完整的脚本，它向 SO 问题页面1添加了一个实时按钮：
// ==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;
}
` );
1Surprisingly, this question doesn't seemed to have been asked quite this way on SO before.
1令人惊讶的是，这个问题之前似乎并没有被这样问过。
回答by mido
if you ask me, you can do it lot smaller( with HTML5 n es6) like:
如果你问我，你可以做得更小（使用 HTML5 n es6），比如：
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)
}
}())
