javascript - 使用 Tampermonkey 在 AngularJS 网站上自动提交表单？

Question

我正在尝试在我没有源代码的网站上自动输入一些表单。找到合适的字段并用 js 填充它们并以编程方式提交表单是一项非常简单的任务。但是该网站是用 Angular 构建的，当单击表单提交时，输入字段的所有验证标志都会弹出，就好像没有填写任何字段一样。

浏览其他几篇文章后，我意识到我需要以某种方式将变量设置在一个范围内，如下所示:

$scope.$apply(function() {
    $scope.fieldName = varname;
});

或者将字段设置为脏，如下所示:

$scope.fieldname.$dirty = true;

不幸的是，由于无法访问代码，我不确定范围可能是什么，也不确定如何适本地告诉 Angular 表单上的字段已以编程方式更新。

编辑

我使用 Roblox 作为此错误的示例。
网站上的不同表单，例如注册表(和登录后的表单)对其进行了验证，这会引发我提到的错误。

这是我尝试在注册脚本上使用与登录脚本相同的逻辑的示例:

// ==UserScript==
// @name         Roblox Account Create
// @namespace    http://roblox.com/
// @version      0.1
// @description  Create Roblox Account
// @author       You
// @match        https://www.roblox.com/
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant        none
// ==/UserScript==
/* jshint -W097 */
'use strict';

var _adj        = [ 'Cool', 'Masked', 'Bloody', 'Lame' ];
var _animals    = [ 'Hamster', 'Moose', 'Lama', 'Duck' ];
var _months     = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];

var _username   = _adj[ parseInt( Math.random( ) * _adj.length ) ], _pass = Math.random( ).toString( 36 ).substring( 2, 10 );
_username       += _animals[ parseInt( Math.random( ) * _animals.length ) ];
_username       += parseInt( Math.random( ) * 1000 );

var _dt_month   = _months[ Math.floor( Math.random( ) * ( 12 ) + 0 ) ];
var _dt_day     = Math.floor( Math.random( ) * ( 28 ) + 1 );
var _dt_year    = Math.floor( Math.random( ) * ( 2005 - 1916 + 1 ) + 1916 );

$( '#Username' ).val( _username );

$( '#Password' ).val( _pass );
$( '#PasswordConfirm' ).val( _pass );
$( '#MonthDropdown' ).val( _dt_month );
$( '#DayDropdown' ).val( _dt_day );
$( '#YearDropdown' ).val( _dt_year );

$( '#FemaleButton' ).click( );
$( '#SignupButton' ).click( );

我尝试在更改值后将输入和更改事件都添加到我的调用中，但在将验证更新为我添加到输入字段的值方面没有任何变化。例如:

$( '#Username' ).val( _username ).trigger( 'input' ); // Also .trigger( 'change' )

您可以通过将它们添加到 Tampermonkey 并导航到 ssl roblox homepage 来测试这两个脚本。 .

Answer 1

关键是 Angular 代码(和类似的 JS)使用 change 事件来触发它们的验证器。所以，仅仅设置值是不够的；您还必须发送更改事件。

所以:

1. 设置值。
2. 发送更改事件。对于 Greasemonkey/Tampermonkey 脚本，您必须注意这部分的沙箱和 jQuery 冲突。
   从未注入(inject)的用户脚本中使用 jQuery .change() 或 .trigger() 很少起作用。发送适当的更改事件；见下文。
3. 由于您@required jQuery(好)，但使用@grant none(坏)，您的脚本导致页面崩溃，您会看到各种错误在控制台中。
4. 该脚本存在竞争条件，并且经常在输入准备好之前触发。等待 window.load 似乎就足够了，但如果您应该看到更多计时问题，您可能必须采取类似 waitForKeyElements() 的措施。
5. $('#SignupButton').click (); 可能存在其他时间问题，如果是这样，则不在本问题的讨论范围内。
6. 请勿利用此知识违反任何网站的服务条款。 (如果适用)

这样，脚本就变成了:

// ==UserScript==
// @name         Roblox Account Create
// @match        https://www.roblox.com/
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant        GM_addStyle
// ==/UserScript==
var _adj        = [ 'Cool', 'Masked', 'Bloody', 'Lame' ];
var _animals    = [ 'Hamster', 'Moose', 'Lama', 'Duck' ];
var _months     = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];
var _username   = _adj[ parseInt( Math.random( ) * _adj.length ) ], _pass = Math.random( ).toString( 36 ).substring( 2, 10 );
_username       += _animals[ parseInt( Math.random( ) * _animals.length ) ];
_username       += parseInt( Math.random( ) * 1000 );
var _dt_month   = _months[ Math.floor( Math.random( ) * ( 12 ) + 0 ) ];
var _dt_day     = Math.floor( Math.random( ) * ( 28 ) + 1 );
var _dt_year    = Math.floor( Math.random( ) * ( 2005 - 1916 + 1 ) + 1916 );

window.addEventListener ("load", function load () {
    setControl ('Username', _username );
    setControl ('Password', _pass );
    setControl ('PasswordConfirm', _pass );
    setControl ('MonthDropdown', _dt_month );
    setControl ('DayDropdown', _dt_day );
    setControl ('YearDropdown', _dt_year );
    $( '#FemaleButton' ).click( );
    $( '#SignupButton' ).click( );
} );

function setControl (elemID, value) {
    var zInput  = $( '#' + elemID );
    zInput.val( value );

    var changeEvent = document.createEvent ("HTMLEvents");
    changeEvent.initEvent ("change", true, true);
    zInput[0].dispatchEvent (changeEvent);
}

请注意，我们使用了一个有效的 @grant 值，而不是 none。这对于避免与页面的 javascript 发生冲突至关重要。