javascript - 如何拦截读取文本输入的值？

Question

我正在为各种第三方网站编写一些 Greasemonkey/Tampermonkey 脚本。 (添加越南文本输入的 Unicode 规范化，如网站所期望的那样，将字符组合为预组合字符。)

在简单的站点上，我已经能够找到它们捕获、通常提交的事件，并在站点脚本处理之前处理文本输入的内容。

但是在 AJAXy 网站上，他们可能会做一些事情，比如测试每个按键或计时器的输入。 (我不想在打字时更改文本规范化，因为它会扰乱退格键的语义以更改声调标记)。

每次站点脚本尝试从 DOM 获取输入元素中的文本时，有什么方法可以捕获吗？也许与 prototype 相关，我以前从未使用过，或者因为它处理 DOM/主机对象等所以不会？

我目前正在处理的网站似乎总是使用 jQuery .val() 来获取文本输入的文本值。我猜至少必须有一些深奥的方法来拦截 jQuery，但如果可能的话，我真的很想知道我在最低级别拦截它的选项。

Answer 1

您可以通过覆盖 <input> 来更改 javascript 看到的页面²的 value -属性(property)的 setter/getter 。请注意，这个重写还会更改 jQuery 和其他库看到的内容:

Object.defineProperty (HTMLInputElement.prototype, "value", {
    get: function () {
        return "xxx";
        //return this.value;  //-- Warning! This causes infinite recursion.
    }
} );

下面的片段显示了一个更实际的示例(仅限 Firefox。我认为在 Chrome 中没有一种可行的方法可以在没有严重并发症的情况下执行此操作——请参阅引用错误(s)，如下。)

此示例正常报告输入值，直到您按下“欺骗”按钮。按“列表”按钮查看 javascript 认为输入的值是什么。:

window.fakeInput = false;

$(document).ready (jQueryMain);

function ListValue (preamble) {
    $("#Output").append ('<li>' + preamble + $("#inpTarg").val() + '</li>');
}

function jQueryMain () {
    //-- This works on Firefox but not Chrome!
    var oldInpValDescriptor = Object.getOwnPropertyDescriptor (HTMLInputElement.prototype, "value");
    if (oldInpValDescriptor == null) {
        // See Chrome issue 43394 and many related.
        alert ('This browser does not support overriding the value property');
        return;
    }
    Object.defineProperty (HTMLInputElement.prototype, "value", {
        get: function () {
            if (window.fakeInput && this.id == "inpTarg") {
                console.log ("Spoofing...");
                return document.getElementById ("inpSpoof").value;
            }

            return oldInpValDescriptor.get.call (this);
        }
    } );

    $("#btnPrint").click ( function () {
        ListValue ('');
    } );

    $("#btnHijack").click ( function () {
        window.fakeInput    = ! window.fakeInput;
        var onOffStr        = window.fakeInput ? "on" : "off";

        if (window.fakeInput)
            $("#btnHijack").text ('Restore Input');
        else
            $("#btnHijack").text ('Hijack Input');

        ListValue ('Hijack ' + onOffStr + '. Value = ');
    } );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
    <label>Target value:<input type="text" value="I'm not safe!" id="inpTarg"></label> <br>
    <label>Spoof value:<input type="text" value="I'm perfectly fine. ;)" id="inpSpoof"></label>
</p>
<p>
    <button id="btnHijack">Hijack Input</button> <br>
    <button id="btnPrint">List value</button> <br>
</p>
<ol id="Output"></ol>

警告:

1. 这听起来像是一个“x Y”问题。回答提出的问题，但这种方法可能不是解决任何现实生活问题的最佳方法。
2. 这不会覆盖在 HTML 表单提交时发送到服务器的内容。目标服务器将看到未欺骗的值。
3. 在 Greasemonkey/Tampermonkey 脚本中，覆盖代码必须在页面范围内运行。也就是说，使用 @grant none或注入(inject)代码。
4. 这目前在 Chrome 中不起作用!参见 Issue 43394以及许多相关的错误。