Question

我想在网站上使用Tampermonkey运行此脚本。

当鼠标悬停在Tampermonkey图标上时，脚本似乎正在运行，但我无法以任何方式与脚本进行交互。它应该显示一个带有4个输入行的表单。

<script type="text/javascript">
    function calcResult() {
        document.getElementById('result').innerHTML = '';
        var num0 = new Number(document.getElementById('txt0').value);
        var num1 = new Number(document.getElementById('txt1').value);
        var num2 = new Number(document.getElementById('txt2').value);
        var num3 = new Number(document.getElementById('txt3').value);
        if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {
            alert('One or more inputs are not a number');
        } else if ((num0) == 1) {
            document.getElementById('result').innerHTML = 2 * num2 / num3;
        } else if ((num0) == 2) {
            document.getElementById('result').innerHTML = 25 * num1 / num3;
        } else if ((num0) == 3) {
            document.getElementById('result').innerHTML = 14 * num1 / num3;
        } else {
            alert('Virus type must be 1, 2 or 3. Where: 1 - warez, 2 - miner, 3 - spam');
        }
    }
    window.onload = function () {
        document.getElementById('btnCalc').onclick = calcResult;
    }
</script>
<body>
<div>
    Virus type <input type="text" id="txt0"/><br/>
    CPU <input type="text" id="txt1"/><br/>
    Internet Speed <input type="text" id="txt2"/><br/>
    Number of viruses <input type="text" id="txt3"/><br/>
    <button id="btnCalc">Calculate</button>
    <div id="result", per hour></div>
</div>
</body>

Answer 1

该问题不包含有效的Tampermonkey脚本 脚本可能不会使用HTML标记（但他们可以使用DOM方法操作标记）。

每当脚本没有按照您的想法运行时，您应该检查the Chrome Console。如果你有，你会看到很多错误，包括：

(E030) Expected an identifier and instead saw '<' ...
(E058) Missing semicolon on line ...
SyntaxError: Unexpected token <
等等。

您似乎正在尝试 将表单添加到某个页面，然后将其激活。

添加表单，弹出窗口，对话框等。使用如下所示的技术：How do I pop up a custom form/dialog in a Greasemonkey script?。

这是一个更新的，完整且正确的Greasemonkey / Tampermonkey脚本，使用问题中的计算器概念说明了该过程：

// ==UserScript==
// @name     _Add "Virus calculator" to page
// @match    http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

//--- Use jQuery to add the form in a "popup" dialog.
$("body").append ( `
    <div id="gmPopupContainer">
    <form>
        <label title="1, 2 or 3. Where: 1 - warez, 2 - miner, 3 - spam">
            Virus type: <input type="number" id="gmVirusType" required>
        </label>
        <label>CPU: <input type="number" id="gmCPU" required></label>
        <label>Internet Speed: <input type="number" id="gmInternetSpeed" required></label>
        <label>Number of viruses: <input type="number" id="gmNumViruses" required></label>
        <button id="gmBtnCalc" type="button">Calculate</button>
        <div id="gmResult"><strong>Result: </strong><span></span>, per hour</div>
    </form>
    </div>
` );

//--- Use jQuery to activate the dialog buttons.
$("#gmBtnCalc").click (calcResult);
function calcResult () {
    var rezCell = $("#gmResult > span");
    rezCell.text ("");

    var vType   = parseInt ( $("#gmVirusType").val (),      10);
    var CPU     = parseInt ( $("#gmCPU").val (),            10);
    var intSpd  = parseInt ( $("#gmInternetSpeed").val (),  10);
    var numVrs  = parseInt ( $("#gmNumViruses").val (),     10);

    switch (vType) {
        case 1:
            rezCell.text (2 * intSpd / numVrs);
            break;
        case 2:
            rezCell.text (25 * CPU / numVrs);
            break;
        case 3:
            rezCell.text (14 * CPU / numVrs);
            break;
        default:
            alert ("Virus type must be 1, 2 or 3. Where: 1 - warez, 2 - miner, 3 - spam.");
            break;
    }
}

//--- CSS styles make it work...
GM_addStyle ( `
    #gmPopupContainer {
        position:               fixed;
        top:                    10%;
        left:                   10%;
        padding:                2em;
        background:             powderblue;
        border:                 3px double black;
        border-radius:          1ex;
        z-index:                777;
    }
    #gmPopupContainer button {
        cursor:                 pointer;
        margin:                 1em auto;
        padding:                0.5ex 2ex;
        border:                 1px outset buttonface;
    }
    #gmPopupContainer > form > label {
        display:                block;
    }
` );

在Stack Overflow上运行脚本，结果如下所示：

运行包含HTML标记的用户脚本？

1 个答案: