Question

我有一个页面，我想填写登录/密码字段并自动点击“登录”提交按钮。我在here中提到了所有细节。

该页面正在使用AngularJS。

由于未检测到登录/密码字段，因此无效。我尝试了很多方法，包括Using page's angular JS in chrome extension

例如。我已尝试过此代码（以及许多其他代码，例如Trigger a keypress/keydown/keyup event in JS/jQuery?），但没有人能够使页面检测到自动填充的登录名和密码：

$("#loginEmailMobile").val(user_selections.freecharge_details.login).trigger('input').keydown().keyup();   
         $("input#clientpassword").val(user_selections.freecharge_details.password).trigger('input').keydown().keyup();

另一种粗暴的方法是从后台页面阻止AngularJs库并尝试使其工作。但这也行不通。

如何为此页面自动填写表单？

Answer 1

为了让角度记录输入的内容已经改变，您需要在设置字段内容后手动触发input事件。

代码大致会转化为：

document.getElementById('loginEmailMobile').value = 'test@test.com'
document.getElementById('loginEmailMobile').dispatchEvent(new Event('input'))
document.getElementById('clientpassword').value = 'password'
document.getElementById('clientpassword').dispatchEvent(new Event('input'))
document.getElementById('signInButton').dispatchEvent(new Event('click'))

此代码粘贴到Chrome控制台后会触发表单提交。我打赌它也适用于change事件。

由于您要制作Chrome扩展程序，因此需要将此代码注入页面。您可以通过在"content_scripts"中指定manifest.json密钥来实现此目的（请注意您的网站的网址已存在，以便您的脚本inject.js包含触发表单的逻辑更改，不会在您访问的所有页面中注入）：

"content_scripts": [
    {
        "matches": ["https://login.freecharge.in/*"],
        "js": ["js/inject.js"]
    }
],

然后，在您的扩展程序的弹出式脚本中，您可以使用chrome.tabs API's executeScript method来调用您使用inject.js注入的函数。

您也可以使用executeScript直接注入上面的代码并完全跳过脚本注入，但随着代码变长，您可能希望将所有内容都放在适当的js文件中，并使用此API调用函数。

自动填充在基于Angularjs的页面

1 个答案: