GreasemonkeyまたはTampermonkeyを使用してJavaScriptボタンを追加しますか？

Question

私はGreasemonkeyの世界にはかなり新しいです。私はJavaScriptでボタンを作る方法をさまよっていました。

たとえば、YouTubeやGoogleにボタンを挿入したかったとします。それを呼び出すか、それを作るのはどうですか？

私は非常に混乱していて、何も見つけられません。これらのサイトのHTMLとやりとりしてGreasemonkeyスクリプトに追加することができないのであれば、

Answer 1

OK]をクリックして、ここにSOの質問ページライブボタンを追加し、完全なスクリプトは次のとおりです。

驚くべきことに、この質問は思えないん

// ==UserScript== 
// @name  _Adding a live button 
// @description Adds live example button, with styling. 
// @include  http://stackoverflow.com/questions/* 
// @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 (multilineStr (function() {/*! 
    #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; 
    } 
*/})); 

function multilineStr (dummyFunc) { 
    var str = dummyFunc.toString(); 
    str  = str.replace (/^[^\/]+\/\*!?/, '') // Strip function() { /*! 
      .replace (/\s*\*\/\s*\}\s*$/, '') // Strip */ } 
      .replace (/\/\/.+$/gm, '') // Double-slash comments wreck CSS. Strip them. 
      ; 
    return str; 
} 

---

以前はそんなに頼んだことがありました。

Answer 2

あなたは私に言わせれば、あなたは（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 
} 

（Googleの受信トレイ内のすべての読み取り電子メールを選択するための）スクリプトの例：

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

}())