使用Tampermonkey在AngularJS网站上自动提交表格

Automate form submission, on an AngularJS website, using Tampermonkey?

本文关键字：提交 表格 网站 Tampermonkey AngularJS 使用      更新时间：2023-09-26

我正在尝试在一个没有源代码的网站上自动输入一些表单。找到合适的字段并用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主页来测试它们。

关键是Angular代码（以及类似的JS）使用change事件来触发它们的验证器。因此，仅仅设置值是不够的；您还必须发送一个更改事件。

因此：

  1. 设置值
  2. 发送更改事件。对于Greasemonkey/Tampermonkey脚本，您必须注意这部分的沙盒和jQuery冲突
    从未注入的用户脚本中使用jQuery.change()或.trigger()很少有效。发送适当的更改事件；请参见下文
  3. 由于@require d 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发生冲突至关重要。

事实证明，有几个不同的事件会在不同的网站上触发验证（input、keyup、change）。以下是我使用的似乎适用于所有网站的函数（jquery、angularjs或普通的旧javascript）：

function fireChangeEvents(element){
    var changeEvent = null;
    changeEvent = document.createEvent ("HTMLEvents");
    changeEvent.initEvent ("input", true, true);
    element.dispatchEvent (changeEvent);
    console.debug('input event dispatched for element: '+element.id);
    changeEvent = document.createEvent ("HTMLEvents");
    changeEvent.initEvent ("keyup", true, true);
    element.dispatchEvent (changeEvent);
    console.debug('keyup event dispatched for element: '+element.id);
    changeEvent = document.createEvent ("HTMLEvents");
    changeEvent.initEvent ("change", true, true);
    element.dispatchEvent (changeEvent);
    console.debug('change event dispatched for element: '+element.id);
}

在这种特定的情况下，我认为这个jquery应该起作用：

fireChangeEvents(document.getElementById('Username'));

您可能需要小心，只有在值实际发生更改时才触发"change"事件。我看到一些关于复选框的草率代码在每个"更改"事件上切换"有效"，而不是读取实际的复选框值。

注：在chrome 46.0.2490.71（portable_apps版）上测试

我无法使用此处的代码在nextcloud联系人应用程序中设置联系人字段（用angular编写）。这就是对我有效的：

function setAngularInputValue (targetInput, newValue) {
    targetInput.value = newValue;
    const event       = new Event('input', { bubbles: true });
    targetInput.dispatchEvent(event);
}
相关文章：