Autofill does not work in Angularjs based page

Issue

I’ve a page and I want to fill the login/password fields and autoclick “Sign-In” submit button. I’ve mentioned all the details in here.

The page is using AngularJS.

It does not work since the login/password fields are not detected. I’ve tried many ways including Using page's angular JS in chrome extension

For example. I’ve tried this code( and many others like Trigger a keypress/keydown/keyup event in JS/jQuery? ) but none is able to make the page detect the autofilled login and password:

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

Another crude way is to block the the AngularJs library from the background page and try to make it work. But this too does not work.

How can I make the form autofill for this page?

Solution

In order for angular to record that the content of the input has changed, you need to manually trigger an input event after setting the content of the fields.

The code would roughly translate into this:

document.getElementById('loginEmailMobile').value = '[email protected]'
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'))

This code, when pasted into Chrome’s console, triggers a form submit. I bet it would work with change events instead too.

Since you are making a Chrome extension, this code will need to be injected into the page. You make this by specifying a "content_scripts" key in your manifest.json like so (note your site’s URL is present so that your script inject.js, which contains the logic to trigger the form changes, doesn’t get injected in all pages you visit):

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

Then, in your extension’s popup script, for example, you would use the chrome.tabs API’s executeScript method to call the function you injected with inject.js.

You could also directly inject the above code with executeScript and skip script injection altogether, but as your code grows longer, you might want to have everything in a proper js file somewhere and just call functions with this API.

Answered By – beeb

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published