运行具有 HTML 标签的用户脚本？答案

【问题标题】：Run userscript that has HTML tags?运行具有 HTML 标签的用户脚本？
【发布时间】：2016-10-08 18:51:53
【问题描述】：

我想在站点上使用 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>

【问题讨论】：

该脚本不是用户脚本，因此不清楚您如何在 Tampermonkey 中“运行”它。此外，我已经修复了缩进，但代码仍然存在问题：<div id="result", 是无效语法。必须是<div id="result">。
基本上，我想将此脚本与 tempmonkey 一起使用，这样当我在网站上时，我可以关闭表单，以便我可以输入数字并获得此脚本的结果。但我不知道如何做到这一点

标签： javascript forms greasemonkey userscripts tampermonkey

【解决方案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 上运行脚本，结果如下：

【讨论】：