添加使用的Greasemonkey或Tampermonkey一个JavaScript按钮？ [英] Add a JavaScript button using Greasemonkey or Tampermonkey?

问题描述

我是相当新的Greasemonkey的世界，我是游荡如何在JavaScript中的一个按钮。

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

说我希望把一个按钮，在YouTube或谷歌的实例？我怎么会去调用它或使它？

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

我很迷茫，找不到它任何东西。除非是有什么方法与这些网站的HTML互动，并把它们添加到Greasemonkey脚本？

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?

推荐答案

好吧，这里是一个完整的脚本，将现场按钮SO问题页 ¹ ：

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.
// @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:                222;
        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;
}

搜索结果

¹ 出人意料的是，这个问题并不似乎已被要求在此之前相当这个样子。

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

这篇关于添加使用的Greasemonkey或Tampermonkey一个JavaScript按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！